Buat carta garisan dari data laporan - Bagaimana Untuk

Buat carta garisan dari data laporan

Saya mahu cara membuat widget grafik saya sendiri untuk Papan Pemuka. Berikut Cara untuk menggariskan kaedah yang membolehkan anda membuat widget yang akan menarik data dari Laporan tertentu, melangkahinya untuk membuat jadual data dan merancang carta menggunakan Google Visualisasi API.

Jumlah 5 Langkah

Langkah 1: Buat laporan yang sesuai dan perhatikan IDnya

Laporan anda perlu menghasilkan jadual keputusan. Lajur pertama haruslah merupakan data label. Lain-lain (seberapa banyak yang anda suka) harus berangka. ID boleh ditemui dengan melihat bar alamat apabila anda melihat laporan.

Sebagai contoh, SQL berikut mengeluarkan statistik mengenai tiket terkini:

PILIH
CASE CAST (strftime ('% w', created_at) AS integer)
WHEN 0 THEN strftime ('Sun% d /% m', created_at)
WHEN 1 THEN strftime ('Mon% d /% m', created_at)
KEDUA 2 SEPERTI strftime ('Tue% d /% m', created_at)
WHEN 3 THEN strftime ('Wed% d /% m', created_at)
WHEN 4 THEN strftime ('Thu% d /% m', created_at)
KETIGA 5 THEN strftime ('Fri% d /% m', created_at)
WHEN 6 THEN strftime ('Sat% d /% m', created_at)
END 'Tarikh',
SUM (1) AS 'Tiket Diterima',
SUM (KES SEMULA status = 'terbuka' THEN 1 ELSE 0 END) SEBAGAI 'Masih Terbuka',
SUM (KASUS WHEN status = 'ditutup' THEN 1 ELSE 0 END) SEPERTI 'Sekarang Ditutup'
DARI tiket
WHERE created_at> = date ('now', '- 14 days')
Kumpulan Dengan strftime ('% d /% m', created_at)

Langkah 2: Buat widget baru

Buat widget baru anda dan tentukan sebarang tetapan yang boleh dikonfigurasi pengguna yang anda mahu. Sebagai contoh:

SPICEWORKS.app.dashboard.addWidgetType ({
nama: 'ticketHistoryLineGraphWidget',
label: 'Grafik Talian Sejarah Tiket',
ikon: '/ images / icons / small / chart_bar.png',
settingDefinitions: [
{nama: 'lineChartTitle', label: 'Title Title', ketik: 'string', defaultValue: 'Analisis tiket terkini dengan tarikh penciptaan'},
{nama: 'colourNew', label: 'Warna untuk tiket tiket baharu', ketik: 'rentetan', defaultValue: 'perak'},
{nama: 'colourClosed', label: 'Warna untuk tiket tiket tertutup', ketik: 'rentetan', defaultValue: 'hijau'},
{name: 'color color', label: 'Color for open ticket line', jenis: 'string', defaultValue: 'red'},
{nama: 'reportID', label: 'Laporkan ID', ketik: 'rentetan', defaultValue: '52'}
]

Langkah 3: Jalankan laporan

Untuk menarik data laporan, anda hanya merujuk laporan oleh ID dan pelbagai data akan dimasukkan ke dalam objek pilihan anda. Di sini saya meletakkannya dalam objek yang dipanggil 'tindak balas':

SPICEWORKS.data.runReport (settings.reportID, function (response) {}

Langkah 4: Bekerja dengan data

Anda boleh melangkah baris data mengikut baris. Contoh berikut menunjukkan bagaimana anda boleh mengekstrak tajuk lajur terlebih dahulu dan kemudian nilai sebenar.

Parameter x dan y berada di sana untuk membantu mengesan.

var data = new viz.DataTable ();
response.columns.each (function (colname) {
jika (x === 0) {
data.addColumn ('string', colname);}
lain {
data.addColumn ('number', colname);}
// alert ('Tajuk lajur' + x + '=' + colname);
x + = 1;
});
response.items.each (function (item) {
data.addRows (1);
x = 0;
response.columns.each (function (colname) {
data.setValue (y, x, item [colname]);
// alert ('(' + x + ',' + y + ') =' + item [colname]);
x + = 1;
});
y + = 1;
})

Langkah 5: Lukiskan carta

Kini semua yang perlu anda lakukan ialah menarik carta. Kod yang lengkap berikut menunjukkan keseluruhan proses, termasuk pandangan inisialisasi yang tidak termasuk di atas.

SPICEWORKS.app.dashboard.addWidgetType ({
nama: 'ticketHistoryLineGraphWidget',
label: 'Grafik Talian Sejarah Tiket',
ikon: '/ images / icons / small / chart_bar.png',
settingDefinitions: [
{nama: 'lineChartTitle', label: 'Title Title', ketik: 'string', defaultValue: 'Analisis tiket terkini dengan tarikh penciptaan'},
{nama: 'colourNew', label: 'Warna untuk tiket tiket baharu', ketik: 'rentetan', defaultValue: 'perak'},
{nama: 'colourClosed', label: 'Warna untuk tiket tiket tertutup', ketik: 'rentetan', defaultValue: 'hijau'},
{name: 'color color', label: 'Color for open ticket line', jenis: 'string', defaultValue: 'red'},
{nama: 'reportID', label: 'Laporkan ID', ketik: 'rentetan', defaultValue: '52'}
],
kemas kini: fungsi (elemen, tetapan) {
SPICEWORKS.data.runReport (settings.reportID, function (response) {
var x = 0;
var y = 0;
var chartElem = new Element ('div', {id: 'column_chart', style: 'width: 600px; height: 240px'});
element.insert (chartElem);
SPICEWORKS.utils.google.withVisualizations (['columnchart'], function (viz) {
var data = new viz.DataTable ();
response.columns.each (function (colname) {
jika (x === 0) {
data.addColumn ('string', colname);}
lain {
data.addColumn ('number', colname);}
// alert ('Tajuk lajur' + x + '=' + colname);
x + = 1;
});
response.items.each (function (item) {
data.addRows (1);
x = 0;
response.columns.each (function (colname) {
data.setValue (y, x, item [colname]);
// alert ('(' + x + ',' + y + ') =' + item [colname]);
x + = 1;
});
y + = 1;
});
var chart = new viz.LineChart (chartElem);
chart.draw (data, {width: 600,
ketinggian: 200,
is3D: benar,
tajuk: settings.lineChartTitle,
backgroundColor: "#ffffff",
legenda: 'bawah',
warna: [settings.colourNew, settings.colourOpen, settings.colourClosed]});
});
});
}
});

Sebaik sahaja anda mengetuai bagaimana cara melangkah data kaedah ini boleh digunakan untuk membuat sebarang carta jenis yang disokong oleh API. Saya sedang berusaha memanjangkan fungsi untuk membuat widget charting yang dapat disesuaikan.