Filling Highchart Pie Graph On Kendo Grid Databound Event
I created a fiddle with sample data, but of course it still does not work http://jsfiddle.net/jp2code/q1v4xewc/28/ I have remote data coming in to a kendo grid, and I am trying to
Solution 1:
I have a version that runs. I'm trying to get JSFiddle to show what I did, but I can't figure out it's interface:
http://jsfiddle.net/jp2code/q1v4xewc/79/
<div id="divPieSubst"></div>
<div id="divPieFeedr"></div>
<div id="divPieCycle"></div>
<div id="divPieRoute"></div>
<div id="divBarDays"></div>
<div id="grid"></div>
$(function() {
$(document).ready(function() {
var e = [];
e.push({
Substation: 'ELECTRIC',
Feeder: '',
ServiceType: 'Electric',
Account: '403310300-01',
Rate: 'SCR2',
Cycle: '04',
Route: '4033',
Customer: 'Customer 403310300-01',
Address: '',
Meter: '3P00325',
Start: '02/04/2015',
End: '01/19/2021',
Days: 2176
});
e.push({
Substation: 'Sub 2',
Feeder: '',
ServiceType: 'Water',
Account: '102303446-05',
Rate: '0',
Cycle: '01',
Route: '1023',
Customer: 'Customer 102303446-05',
Address: '',
Meter: '47170023',
Start: '11/14/2018',
End: '01/19/2021',
Days: 797
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '102001979-07',
Rate: '0',
Cycle: '01',
Route: '1020',
Customer: 'Customer 102001979-07',
Address: '',
Meter: '45234070',
Start: '01/03/2021',
End: '01/19/2021',
Days: 16
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '103602334-01',
Rate: '0',
Cycle: '01',
Route: '1036',
Customer: 'Customer 103602334-01',
Address: '',
Meter: '45440615',
Start: '01/03/2021',
End: '01/19/2021',
Days: 16
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '102502791-01',
Rate: '6',
Cycle: '01',
Route: '1025',
Customer: 'Customer 102502791-01',
Address: '',
Meter: '13242857H',
Start: '01/03/2021',
End: '01/19/2021',
Days: 16
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '401112758-08',
Rate: '0',
Cycle: '04',
Route: '4011',
Customer: 'Customer 401112758-08',
Address: '',
Meter: '44633754',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '100601731-08',
Rate: '0',
Cycle: '01',
Route: '1006',
Customer: 'Customer 100601731-08',
Address: '',
Meter: '44634197',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '202802192-03',
Rate: '0',
Cycle: '02',
Route: '2028',
Customer: 'Customer 202802192-03',
Address: '',
Meter: '44633786',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '201900499-02',
Rate: '0',
Cycle: '02',
Route: '2019',
Customer: 'Customer 201900499-02',
Address: '',
Meter: '44633788',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '102702268-00',
Rate: '2',
Cycle: '01',
Route: '1027',
Customer: 'Customer 102702268-00',
Address: '',
Meter: '44634247',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '202602889-09',
Rate: '0',
Cycle: '02',
Route: '2026',
Customer: 'Customer 202602889-09',
Address: '',
Meter: '44634191',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '102702083-02',
Rate: '5',
Cycle: '01',
Route: '1027',
Customer: 'Customer 102702083-02',
Address: '',
Meter: '13242805H',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '101606681-01',
Rate: '5',
Cycle: '01',
Route: '1016',
Customer: 'Customer 101606681-01',
Address: '',
Meter: '45059218',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '100100025-03',
Rate: '0',
Cycle: '01',
Route: '1001',
Customer: 'Customer 100100025-03',
Address: '',
Meter: '45233976',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '101900421-08',
Rate: '0',
Cycle: '01',
Route: '1019',
Customer: 'Customer 101900421-08',
Address: '',
Meter: '45234013',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: 'Sub 3',
Feeder: '',
ServiceType: 'Gas',
Account: '101900421-08',
Rate: '0',
Cycle: '01',
Route: '1019',
Customer: 'Customer 101900421-08',
Address: '',
Meter: 'G34013',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '102002727-01',
Rate: '6',
Cycle: '01',
Route: '1020',
Customer: 'Customer 102002727-01',
Address: '',
Meter: '12732616H',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: '',
Feeder: '',
ServiceType: '',
Account: '102202513-00',
Rate: '2S',
Cycle: '01',
Route: '1022',
Customer: 'Customer 102202513-00',
Address: '',
Meter: '44634246',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '301513750-00',
Rate: '0',
Cycle: '03',
Route: '3015',
Customer: 'Customer 301513750-00',
Address: '',
Meter: '45234068',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '300911973-01',
Rate: '0',
Cycle: '03',
Route: '3009',
Customer: 'Customer 300911973-01',
Address: '',
Meter: '45234017',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
onDataBound(e);
});
functiononDataBound(e) {
$('#grid').kendoGrid({
dataSource: {
data: e
},
});
var pieSubst = [{
label: 'Meter Count per Substation (Top 10)',
data: [],
rows: []
}];
var pieFeedr = [{
label: 'Meter Count per Feeders (Top 10)',
data: [],
rows: []
}];
var pieCycle = [{
label: 'Meter Count per Cycle (Top 10)',
data: [],
rows: []
}];
var pieRates = [{
label: 'Meter Count per Rate (Top 10)',
data: [],
rows: []
}];
var grid = $('#grid').data('kendoGrid');
$.each(e, function(index, item) {
formatPieData(pieSubst, item.Substation, item);
formatPieData(pieFeedr, item.Feeder, item);
formatPieData(pieCycle, item.Cycle, item);
formatPieData(pieRates, item.Rate, item);
});
donutChart('#divPieSubst', pieSubst);
donutChart('#divPieFeedr', pieFeedr);
pieChart('#divPieCycle', pieCycle);
pieChart('#divPieRates', pieRates);
barChart('#divBarDays', barData);
}
functionformatPieData(array, countLabel, item) {
if ((countLabel == null) || (countLabel == '')) {
countLabel = '(no label)';
}
let dataArray = array[1];
if (dataArray.data === undefined) { // if there is nothing at position 2,
dataArray.data = []; // create an empty array (which should have been done in the .ready())
}
var data = dataArray.data.find(o => o.Name === countLabel);
if (data === undefined) { // if array[label] does not exists,
data = { // create the array entry usingName: countLabel, // the labelCount: 1, // and the days
};
dataArray.data.push(data);
} else { // otherwise...
data.Count = data.Count + 1; // ...add the days
}
array[2].rows.push(item); // push the row data on the end
}
functionbarChart(div, array) { // https://www.tutorialspoint.com/highcharts/highcharts_bar_basic.htmvar target = $(div);
if (target != null) {
var names = [];
var data1 = [];
for (var n = array.length - 1; - 1 < n; n--) {
names.push(array[n].label);
data1.push(array[n].days);
}
var series = [{
data: data1,
showInLegend: false,
}];
var json = {
chart: {
type: 'bar'
},
credits: {
text: ''
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
},
minPointLength: 5,
}
},
series: series,
title: {
text: 'Meter Count per Gap Tier (in Days)',
style: {
fontSize: {
size: '8px'
}
},
},
tooltip: {
valueSuffix: ' days'
},
xAxis: {
categories: names,
labels: {
enabled: true
},
min: 0,
title: {
text: null
}
},
yAxix: {
min: 0,
labels: {
enabled: false
},
},
};
$(div).highcharts(json);
}
}
functiondonutChart(div, array) { // donut: https://www.tutorialspoint.com/highcharts/highcharts_pie_donut.htmvar target = $(div);
if (target != null) {
var chartTitle = array[0].label;
array[1].data.sort(function(o1, o2) {
return o2.Count - o1.Count
});
var categories = [];
var colors = Highcharts.getOptions().colors;
var colorMax = colors.length - 1;
var total = 0;
$.each(array[1].data, function(index, item) { // get count first
total = total + item.Count;
});
var top10 = [];
$.each(array[1].data.slice(0, 9), function(index, item) { // only interested in 0 to 9 (top 10)var name = item.Name;
if (name == null) {
name = '(no label)';
}
categories.push(name);
var nColor = index % colorMax; // don't go over the arrayvar percent = (item.Count / total) * 100;
var entry = {
name: name,
y: percent,
color: colors[nColor],
drilldown: {
name: name,
data: item,
color: colors[nColor],
}
};
top10.push(entry);
});
var json = {
chart: {
height: percent,
renderTo: div,
type: 'pie'
},
credits: {
text: ''
},
plotOptions: {
pie: {
borderColor: '#000000',
innerSize: '40%',
dataLabels: {
enabled: true,
format: '{point.name}',
}
}
},
series: [{
name: categories,
colorByPoint: true,
data: top10,
dataLabels: {
format: '{point.name}',
color: 'white',
distance: -30
},
innerSize: '50%',
size: '100%',
}],
title: {
text: chartTitle,
style: {
fontSize: {
size: '6px'
}
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
xAxis: {
categories: categories,
labels: {
enabled: true
},
min: 0,
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Count'
}
},
};
$(div).highcharts(json);
}
}
functionpieChart(div, array) { // basic pie: https://www.tutorialspoint.com/highcharts/highcharts_pie_basic.htmvar target = $(div);
if (target != null) {
var chartTitle = array[0].label;
array[1].data.sort(function(o1, o2) {
return o2.Count - o1.Count
});
var categories = [];
var colors = Highcharts.getOptions().colors;
var colorMax = colors.length - 1;
var total = 0;
$.each(array[1].data, function(index, item) { // get count first
total = total + item.Count;
});
var top10 = [];
$.each(array[1].data.slice(0, 9), function(index, item) { // only interested in 0 to 9 (top 10)if (item !== undefined) {
var name = item.Name;
if (name == null) {
name = '(no label)';
}
categories.push(name);
var nColor = index % colorMax; // don't go over the arrayvar percent = (item.Count / total) * 100;
var entry = {
name: name,
y: percent,
color: colors[nColor],
drilldown: {
name: name,
data: item,
color: colors[nColor],
}
};
top10.push(entry);
}
});
var json = {
chart: {
height: '50%',
renderTo: div,
type: 'pie'
},
credits: {
text: ''
},
plotOptions: {
pie: {
allowPointSelect: true,
borderColor: '#000000',
cursor: 'pointer',
dataLabels: {
enabled: true,
// format: '<b>{point.name}</b>: {point.percentage:.1f} %',formatter: function() {
return1 < this.y ? '' + this.point.name + ': ' + Highcharts.numberFormat(this.y, 1) + '%' : null;
},
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: categories,
colorByPoint: true,
data: top10,
dataLabels: {
formatter: function() {
return1 < this.y ? this.point.name : null;
},
color: 'white',
distance: -30
},
size: '100%',
}],
title: {
text: chartTitle,
style: {
fontSize: {
size: '6px'
}
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
xAxis: {
categories: categories,
labels: {
enabled: true
},
min: 0,
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Count'
}
},
}
console.log('pieChart: json');
console.log(json);
$(div).highcharts(json);
}
}
});
There don't seem to be any errors now (or I can't seem to get the Console to show). When the Console was showing errors, the line numbers indicated did not seem to match up with the line numbers in the code, so something was messed up.
I hope this is useful to someone. I really didn't see any decent examples of how to filter through the data before sending it to Highcharts, and NO EXAMPLES of using a single dataset to fill more than one Highchart graph.
Post a Comment for "Filling Highchart Pie Graph On Kendo Grid Databound Event"