Retrieving JSON data for Highcharts with multiple series? - javascript

I've been looking through tons of examples but I can't seem to get my code to pull out the data. The chart is blank.
I have a php file that gives the following: (date, value1, value2)
[
["2013-09-15 08:44:37",19.8,8.19],
["2013-09-15 08:47:37",18.4,7.81],
["2013-09-15 08:50:37",18.3,7.78],
["2013-09-15 08:53:37",18.1,7.77]
]
I then have the following code:
<!DOCTYPE html>
<head>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/highcharts.js" type="text/javascript"></script>
<script>
var chart;
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
},
title: {
},
xAxis: {
type: 'datetime'
},
yAxis: {
},
series: [{
name: 'val1',
data: []
}, {
name: 'val2',
data: []
}]
};
$.getJSON('data_day.php', function(json) {
val1 = [];
val2 = [];
$.each(json, function(key,value) {
val1.push([value.time, value.val1]);
val2.push([value.time, value.val2]);
});
options.series[0].data = val1;
options.series[1].data = val2;
chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<html>
I'm trying to use firebug to see where I've gone wrong. If I put
console.log(key,value)
under the $.each I can see the data:
0 ["2013-09-15 08:50:37", 18.3, 7.78]
1 ["2013-09-15 08:53:37", 18.1, 7.77]
2 ["2013-09-15 08:56:37", 18.2, 7.8]
Is there a problem with the
val1.push([value.time, value.val1]);
or
options.series[0].data = val1;
Update: Changed it to this and its now working.
val1.push([value[0], value[1]]);
val2.push([value[0], value[2]]);


As per Pal's comment - changed it to this:
val1.push([value[0], value[1]]);
val2.push([value[0], value[2]]);

Related

How to get two output JSON Objects in js line chart?

I would like to display two lines in a Chart.js line chart. The required data from the database I have a JSON file with 2 objects.
Now I want to display them in the line chart. If I only want to display one data set it is no problem. When displaying two lines at the same time I have no idea what to do. I tried to call the objects and then output them, but the output is always undefined.
What am I doing wrong here?
Error:
Cannot read property 'current_week' of undefined
JSON Output:
{"current":[{"current_week":23},{"current_week":636},{"current_week":237}],"last":[{"last_week":235},{"last_week":74},{"last_week":737},{"last_week":767},{"last_week":546},{"last_week":73},{"last_week":453}]}
JS Chart.js Code:
$(document).ready(function() {
$.ajax({
url : "http://localhost/r6team-new/admin/includes/stats/website-weekly-stats.php",
type : "GET",
success : function(data) {
console.log(data);
var current_week = [];
var last_week = [];
for(var i in data) {
current_week.push(data.current[i].current_week);
last_week.push(data.last[i].last_week);
}
console.log(current_week);
console.log(last_week);
var visitorsChart = {
labels: ['MO', 'DI', 'MI', 'DO', 'FR', 'SA', 'SO'],
datasets: [{
type : 'line',
data : current_week,
backgroundColor : 'transparent',
borderColor : '#007bff',
pointBorderColor : '#007bff',
pointBackgroundColor: '#007bff',
fill : false
},
{
type : 'line',
data : last_week,
backgroundColor : 'tansparent',
borderColor : '#ced4da',
pointBorderColor : '#ced4da',
pointBackgroundColor: '#ced4da',
fill : false
}]
};
var ctx = $("#visitors-chart");
var LineGraph = new Chart(ctx, {
data: visitorsChart,
});
},
});
});

your loop is incorrect
var current_week = [];
var last_week = [];
for(var i in data["current_week"]) {
current_week.push(i["current_week"]);
}
for(var i in data["last_week"]) {
last_week.push(i["last_week"]);
}
or make it more easier
$(document).ready(function() {
$.ajax({
url : "http://localhost/r6team-new/admin/includes/stats/website-weekly-stats.php",
type : "GET",
success : function(data) {
var visitorsChart = {
labels: ['MO', 'DI', 'MI', 'DO', 'FR', 'SA', 'SO'],
datasets: [{
...
//current_week
data: data["current"].map(d => d["current_week"])
},
{
...
//last_week
data: data["last"].map(d => d["last_week"])
}]
};
var ctx = $("#visitors-chart");
var LineGraph = new Chart(ctx, {
data: visitorsChart
});
},
});
});

Adding a JSON Response to a HighCharts Graph

So I have a a csv file that is converted to a JSON using a python script and which is accessible by using "/data" at the end of my route. I want to be able to receive this JSON response and put in into a HighCharts graph however the response I'm receiving is a bunch of arrays in an object of an object and I'm having trouble being able to access the data.
Here is a sample of what my JSON object looks like:
{"sensor_data":{"class_label":[1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0,-1.0],"sample index":["sample0","sample1","sample2","sample3","sample4","sample5","sample6","sample7","sample8","sample9","sample10","sample11","sample12","sample13","sample14","sample15","sample16","sample17","sample18","sample19","sample20","sample21","sample22","sample23","sample24","sample25","sample26","sample27","sample28","sample29","sample30","sample31","sample32","sample33","sample34","sample35","sample36","sample37","sample38","sample39","sample40","sample41","sample42","sample43","sample44","sample45","sample46","sample47","sample48","sample49","sample50","sample51","sample52","sample53","sample54","sample55","sample56","sample57","sample58","sample59","sample60","sample61","sample62","sample63","sample64","sample65","sample66","sample67","sample68","sample69","sample70","sample71","sample72","sample73","sample74","sample75","sample76","sample77","sample78","sample79","sample80","sample81","sample82","sample83","sample84","sample85","sample86","sample87","sample88","sample89","sample90","sample91","sample92","sample93","sample94","sample95","sample96","sample97","sample98","sample99","sample100","sample101","sample102","sample103","sample104","sample105","sample106","sample107","sample108","sample109","sample110","sample111","sample112","sample113","sample114","sample115","sample116","sample117","sample118","sample119","sample120","sample121","sample122","sample123","sample124","sample125","sample126","sample127","sample128","sample129","sample130","sample131","sample132","sample133","sample134","sample135","sample136","sample137","sample138","sample139","sample140","sample141","sample142","sample143","sample144","sample145","sample146","sample147","sample148","sample149","sample150","sample151","sample152","sample153","sample154","sample155","sample156","sample157","sample158","sample159","sample160","sample161","sample162","sample163","sample164","sample165","sample166","sample167","sample168","sample169","sample170","sample171","sample172","sample173","sample174","sample175","sample176","sample177","sample178","sample179","sample180","sample181","sample182","sample183","sample184","sample185","sample186","sample187","sample188","sample189","sample190","sample191","sample192","sample193","sample194","sample195","sample196","sample197","sample198","sample199","sample200","sample201","sample202","sample203","sample204","sample205","sample206","sample207","sample208","sample209","sample210","sample211","sample212","sample213","sample214","sample215","sample216","sample217","sample218","sample219","sample220","sample221","sample222","sample223","sample224","sample225","sample226","sample227","sample228","sample229","sample230","sample231","sample232","sample233","sample234","sample235","sample236","sample237","sample238","sample239","sample240","sample241","sample242","sample243","sample244","sample245","sample246","sample247","sample248","sample249","sample250","sample251","sample252","sample253","sample254","sample255","sample256","sample257","sample258","sample259","sample260","sample261","sample262","sample263","sample264","sample265","sample266","sample267","sample268","sample269","sample270","sample271","sample272","sample273","sample274","sample275","sample276","sample277","sample278","sample279","sample280","sample281","sample282","sample283","sample284","sample285","sample286","sample287","sample288","sample289","sample290","sample291","sample292","sample293","sample294","sample295","sample296","sample297","sample298","sample299","sample300","sample301","sample302","sample303","sample304","sample305","sample306","sample307","sample308","sample309","sample310","sample311","sample312","sample313","sample314","sample315","sample316","sample317","sample318","sample319","sample320","sample321","sample322","sample323","sample324","sample325","sample326","sample327","sample328","sample329","sample330","sample331","sample332","sample333","sample334","sample335","sample336","sample337","sample338","sample339","sample340","sample341","sample342","sample343","sample344","sample345","sample346","sample347","sample348","sample349","sample350","sample351","sample352","sample353","sample354","sample355","sample356","sample357","sample358","sample359","sample360","sample361","sample362","sample363","sample364","sample365","sample366","sample367","sample368","sample369","sample370","sample371","sample372","sample373","sample374","sample375","sample376","sample377","sample378","sample379","sample380","sample381","sample382","sample383","sample384","sample385","sample386","sample387","sample388","sample389","sample390","sample391","sample392","sample393","sample394","sample395","sample396","sample397","sample398","sample399"],"sensor0":[0.8342509834222027,0.8040591737544392,0.6944042750266697,0.7836895305460438,0.7888353321633572,0.2406299291845031,0.4056446222233688,0.7147468237320453,0.5353416487380942,0.548196738900725,0.5203011391221466,0.7516346854539425,0.856897479464049,0.7836895305460438,0.8553526511086944,0.8217145616588485,0.1817267638536257,0.2549525422938068,0.5228048219125999,0.2309840283134481,0.7707008154675333,0.5461938504660493,0.6267369308550971,0.3058042606114584,0.017609762120689543,0.8186554619781937,0.8742282449649711,0.5558963397473439,0.6279780315314364,0.6243948636445962,0.9370265827781692,0.600202119588456,0.34497258154899746,0.8139441290527544,0.8728351342285425,0.7255970828169529,0.6619734799196021,0.7931962261862477,0.9900022030230928,0.6616952542423745,0.8994521718278122,0.4454142189113598,0.5429973752491887,0.7008021524732678,0.9934538277850494,0.8728351342285425,0.5493169859197086,0.9240495885324922,0.13329305460959673,0.3910162510987541,0.865991367976391,0.8571331734679286,0.7661508941807119,0.3661386633239368,0.7050742645265525,0.8126376841635325,0.9900022030230928,0.457280457747594,0.7413951873443472,0.6461430374327456,0.6104136944386439,0.7404885489907799,0.9370265827781692,0.25221801901382856,0.9027174122768274,0.5463259057847863,0.608390063478528,0.9011410595665064,0.7451292968363841,0.6212116969120911,0.9070883495126832,0.6267369308550971,0.6094329209784268,0.8466507329797839,0.6123472105605812,0.6492969892053877,0.5228048219125999,0.8630070341435948,0.9921556221857328,0.4694026131479279,0.4321558372537115,0.8186554619781937,0.2452730534118909,0.5806852304972248,0.4463181844890969,0.03117022528870461,0.582578909603501,0.6301478078950739,0.7526444037868796,0.6545975458612655,0.5906735762251086,0.9088819202472465,0.9875428113339848,0.6315113420725106,0.7008021524732678,0.3201179992261679,0.6995393868192927,0.7545444904282262,0.5976449009002688,0.8261297992960709,0.8261297992960709,0.6569065479873349,0.9769446559729712,0.9020215048719044,0.5429973752491887,0.8509366656033454,0.8034467378486213,0.6535157872845202,0.8334763292922207,0.5979679623241948,0.9230786255584088,0.9875428113339848,0.7314436380352776,0.7527599196897644,0.7164371987678253,0.5349063125564877,0.6785352221143449,0.7304615662856323,0.7782670395655239,0.6362355209574786,0.9203199879351556,0.7226803760344891,0.5908372785205473,0.6901546573851163,0.8588260425673215,0.09957427671585163,0.9089891698631442,0.9089891698631442,0.5689746790121009,0.7626327439430869,0.06279587056835045,0.5426350781980658,0.5426350781980658,0.5897821358236218,0.5216669318045457,0.7226803760344891,0.6362355209574786,0.5761365150423148,0.5909810486814845,0.5906735762251086,0.3189403072683662,0.6230339064332895,0.509650228808574,0.7147468237320453,0.7652398570176886,0.7983735803065884,0.7139926180272788,0.7302040510211433,0.7830341392298311,0.8139441290527544,0.5493169859197086,0.6974960316317865,0.7661508941807119,0.7778184764919785,0.9104946877423422,0.9769149328563096,0.7363188502642961,0.8104132844705834,0.8289485979100332,0.19980807737048745,0.2595532491974152,0.7888353321633572,0.9921556221857328,0.2903927712733632,0.5843295890599021,0.7304615662856323,0.7633816404253955,0.9104946877423422,0.9921556221857328,0.7151618846475077,0.5840913187344342,0.10408607314504914,0.6943705049398179,0.3685566916624784,0.9452105344733114,0.5806852304972248,0.21917473189392234,0.6955821606135237,0.9994756875868857,0.2065432020154392,0.7440290277877339,0.6458002240423756,0.7440290277877339,0.8721848841542321,0.6403523412672083,0.943605466715396,0.6943705049398179,0.13957706100930845,0.3999914242849606,0.5689746790121009,0.9863485108715232,0.7045672957780832,0.8480753123662816,0.884672971113442,0.9876612956671996,0.6661535207384663,0.8893234504022597,0.9294196421826122,0.7916599110709502,0.6691036031479298,0.4614151538873268,0.15861531839627507,0.015053024774653534,0.2543016971647206,0.1511921994574441,0.9994756875868857,0.4604409744687393,0.9769446559729712,0.4089252022237506,0.3468684941507011,0.7451292968363841,0.047070279720089266,0.23001052263735836,0.017609762120689543,0.2999351059742477,0.589242986067106,0.04925981828155557,0.5031815354341485,0.8791254131837124,0.22028312291647856,0.3633405651132341,0.44570418861617295,0.4089252022237506,0.13552373976490928,0.4403657886428181,0.1061715580172884,0.4698986722233266,0.5843295890599021,0.5461938504660493,0.8342509834222027,0.25221801901382856,0.9203199879351556,0.014224388292887637,0.6243948636445962,0.2627475752333104,0.39883102235234297,0.4665234526634825,0.8027231448329213,0.2514021874406174,0.2903927712733632,0.4522904006838488,0.21908834385814235,0.2232892599291859,0.24892157633170545,0.41420945689899424,0.23663190020199265,0.8509366656033454,0.268169102662174,0.16303394577063554,0.034106691977286774,0.5031815354341485,0.4010800906959512,0.4830357827001226,0.7363188502642961,0.2993638736474489,0.3483870171643594,0.5148818302563637,0.5140772526628589,0.2406299291845031,0.7916599110709502,0.33099288927038906,0.16531398680109166,0.4694026131479279,0.19582203872775486,0.09957427671585163,0.19980807737048745,0.2263029910252448,0.06279587056835045,0.2760061161069235,0.3013115781149882,0.2549525422938068,0.4262476870784353,0.39883102235234297,0.7302040510211433,0.4932001394518949,0.22028312291647856,0.5203011391221466,0.0259007336043674,0.4932001394518949,0.3393463540008431,0.3751049541649163,0.4665234526634825,0.3444912677498805,0.7717788781391197,0.4745395722894433,0.3751397984518733,0.4171165764715357,0.24892157633170545,0.007774581261955293,0.5140772526628589,0.8104132844705834,0.15675082389319786,0.4871265679536285,0.3189403072683662,0.8537103978778746,0.22210488921052574,0.1134176494876178,0.4010800906959512,0.16034213558940258,0.4056446222233688,0.08242937762035263,0.0341087770223687,0.26622206982972163,0.6535157872845202,0.4731597158660253,0.4892828912800582,0.5171490872286908,0.8051964146780597,0.0940218083382992,0.7526444037868796,0.7652398570176886,0.5349063125564877,0.8466507329797839,0.21908834385814235,0.08242937762035263,0.2701890952736837,0.33504543142086984,0.5979679623241948,0.3999914242849606,0.8677942678451326,0.4162642961213104,0.5123748433765994,0.284440941684605,0.21749064046722444,0.2756409701063435,0.8013405456953867,0.2155375876171517,0.4127776194515831,0.3186671800383177,0.21908834385814235,0.5192303954654396,0.4162642961213104,0.457280457747594,0.7139926180272788,0.7527599196897644,0.1489541419006888,0.10371459034344688,0.13329305460959673,0.04880192397550232,0.4454142189113598,0.1542844172307145,0.12646817833225066,0.30414323954286715,0.0749903221112711,0.04925981828155557,0.13957706100930845,0.3186671800383177,0.6569065479873349,0.7688348089897896,0.2263029910252448,0.4508723811048195,0.9104946877423422,0.047070279720089266,0.6362355209574786,0.3057214116837209,0.3058042606114584,0.0960004785645413,0.3822714321804582,0.4909315154992018,0.24472411203549504,0.7156744529365995,0.3057214116837209,0.2309840283134481,0.29341537927882266,0.03117022528870461,0.4399382636370685,0.3141646638099491,0.2514021874406174,0.2595532491974152,0.14023971553432354,0.21908834385814235,0.329235377962243,0.6266052664129459,0.4267101490302346,0.3910162510987541,0.4891055830547436,0.6619734799196021,0.10371459034344688,0.3710235237294053,0.3078650530464981,0.1817267638536257,0.4403657886428181,0.16303394577063554,0.8553526511086944,0.11364750100152733,0.24472411203549504,0.4871265679536285,0.21464674459654232,0.26770905856219884,0.33504543142086984,0.4034349365762077,0.15861531839627507,0.5123748433765994,0.4267101490302346,0.6616952542423745,0.4331504161846808,0.3393463540008431,0.3201179992261679,0.05913230519528556,0.3797777155678834],"sensor1":[0.7260813992742677,0.253135155172477,0.5957765709194961,0.03877962756957088,0.1744333489120683,0.1424777511908094,0.7273879895132506,0.6562098658346016,0.27359076844875285,0.33742624657900044,0.25586066805193985,0.20844785608786254,0.621303197065188,0.11644707970559864,0.26077703534208485,0.6706865590631278,0.6356661691054787,0.7657419322995629,0.7199266939240095,0.6100998000744899,0.23531622891019002,0.7491564369949893,0.6786617531216094,0.723343638607208,0.6478782281787702,0.6072264170433108,0.5487481598077378,0.723343638607208,0.6202636630625171,0.5680141340860324,0.7154768280461169,0.5794353192567437,0.01681592436749013,0.5989839599335605,0.5767946020456288,0.6748935500294461,0.6706865590631278,0.5734931643828036,0.383823045197604,0.9759952061825568,0.6682326890082187,0.08118174168806147,0.079431946838743,0.7489520627519083,0.7479687089872854,0.2569802675993931,0.5759411240079411,0.18019338897063156,0.07078623113142167,0.24385998054145064,0.6526223470334807,0.14536679338349956,0.2182816282092908,0.6394083885914137,0.7557117095433368,0.597211497357959,0.5367293158177581,0.17862894576004795,0.3949563244602505,0.033907864699883265,0.5780030558939503,0.5654403607250189,0.2060239999489869,0.4449509190474525,0.25457364913505776,0.14652719602434394,0.6451312350889868,0.6312147419553418,0.16398904075526097,0.651144314958331,0.11479457620694232,0.2603923540467256,0.6654734698384653,0.7197958724177218,0.22296754837248967,0.17342653871012992,0.7459991836649209,0.4156151233911337,0.004605091264255457,0.7493075914703463,0.5876800246438066,0.8686302391733645,0.6727554860109296,0.10973740154345267,0.16398904075526097,0.715089921590326,0.11079876627933982,0.7258185327049826,0.9254778402831888,0.17351196302855354,0.09367640725903592,0.13396604033896198,0.10914841113830877,0.13300311344319835,0.06482469796460666,0.2389990283665168,0.9815561616715368,0.0585339857222954,0.1029913122136733,0.0383729277416992,0.5567894776388725,0.6134146295072561,0.7347983990171596,0.22815803680644986,0.06625517496066657,0.6432318583345678,0.350477486526545,0.00766914848441136,0.7292061019449797,0.4632178257158512,0.6006627010366354,0.5728395776931576,0.017667153370483857,0.2303405105534844,0.0187908886556839,0.6365909821132251,0.9104783061047692,0.1029203342000472,0.6403831688172956,0.7465855205007239,0.003865392976895921,0.2503593020249263,0.6168867002392913,0.6396282792884779,0.2228788470910772,0.6836721690332073,0.0442659061149725,0.7260813992742677,0.2256431550018282,0.7423971444962872,0.5420732030080447,0.6082229063270371,0.15021498532867406,0.5763954112737417,0.9562448997898194,0.01835965766730196,0.7632850299025191,0.2335242475397961,0.5696507344737191,0.6168867002392913,0.6414745091063865,0.02091336753369744,0.5356609017609607,0.6610417920664242,0.07078623113142167,0.7032701898177937,0.25451308791402194,0.5696507344737191,0.2503593020249263,0.6955664310284528,0.7889819992518828,0.4760150016815621,0.6952520240115684,0.6253843430408846,0.6526223470334807,0.2446954751769985,0.1029203342000472,0.5487481598077378,0.03174232427735013,0.7423971444962872,0.7260813992742677,0.5780030558939503,0.1168249113256864,0.5005402285906505,0.6385132383595901,0.2076706688812482,0.004316315939731474,0.5527959268847893,0.5344587001464217,0.6432318583345678,0.664107624417183,0.6955664310284528,0.6518720211572341,0.6610417920664242,0.13601825733501338,0.7122381970027803,0.2182816282092908,0.09679576903623588,0.079431946838743,0.602850993855429,0.6483578870935829,0.9044417921388505,0.5379985024270841,0.003865392976895921,0.17862894576004795,0.15602845785559216,0.2200839322453112,0.5957765709194961,0.7149587982038303,0.27223507285738524,0.11712211072188886,0.1699986023944079,0.6385132383595901,0.003865392976895921,0.0339357783868971,0.7099306809960055,0.7347983990171596,0.2524388467725762,0.597211497357959,0.19029625748771886,0.8230571633385037,0.8052154856855146,0.1613740059425931,0.40544716546941817,0.4132580919758583,0.3557667140668689,0.3868045760626755,0.8059056663765753,0.6312147419553418,0.9759952061825568,0.2779800821027445,0.8038196209743722,0.4462973469261713,0.3470616665824344,0.4930905704227292,0.28853339467890426,0.4440792242042712,0.4612833149739976,0.8108159573331793,0.8138524926403706,0.2877975890519804,0.940800121812162,0.33779255347630444,0.4208705490254964,0.9044417921388505,0.4158620153500612,0.811450310187664,0.7762172864476359,0.7762172864476359,0.5509697887919454,0.8438608230292113,0.4584771401383395,0.5128458909672098,0.2779800821027445,0.0383729277416992,0.3916543328339408,0.29914023616450797,0.35204620114657026,0.4206988870402927,0.3739054963377199,0.004316315939731474,0.15602845785559216,0.950432764647012,0.8168237795739175,0.14536679338349956,0.9313927604051444,0.5066061487976794,0.5066270070846124,0.8074777016349168,0.8758499655509144,0.9592659152711264,0.2256431550018282,0.928861116880368,0.7908178960467565,0.664107624417183,0.41790066392462,0.4385115350336168,0.9985920643657608,0.5140073874733813,0.3949563244602505,0.4769741269791264,0.9375334956193044,0.4208705490254964,0.9109157866814735,0.6396282792884779,0.804049979784017,0.5367293158177581,0.41641630343994174,0.8762499512378444,0.9526974245369064,0.5098823263464507,0.845328204457981,0.9275485256257714,0.9340147605115212,0.37738558191917504,0.3306388854002812,0.4164891297845643,0.9325880594136446,0.5180536120793974,0.3700593792872493,0.9121361955118871,0.4925134305864862,0.5069444845804905,0.9066194418957646,0.32753923523701634,0.4112822476041623,0.4156151233911337,0.3260269041301385,0.7154768280461169,0.5040609944840525,0.7727461175738554,0.17351196302855354,0.3335729866372912,0.4760150016815621,0.5051355209796101,0.9841940021065928,0.049226102024943034,0.9254778402831888,0.825034019140545,0.4773188718424243,0.9739683173040382,0.7850630198706505,0.922962276190418,0.9291692672974196,0.3557667140668689,0.3967877671928155,0.9375334956193044,0.2877975890519804,0.9058981014617392,0.4815242576525665,0.376441225801796,0.9114490607449852,0.978339635174936,0.3248014396741529,0.3260269041301385,0.8499340032757063,0.4480476054772825,0.4970723026169613,0.9402573082005578,0.3190950860063675,0.8418040661374,0.41641630343994174,0.7713423036526971,0.28447973530572435,0.2910343083385012,0.02091336753369744,0.35204620114657026,0.2912142352912951,0.8418040661374,0.3850268179369327,0.8770833302660004,0.9915608799859694,0.8543900297391153,0.9815561616715368,0.4632178257158512,0.8636414061448247,0.5128458909672098,0.34443930350760155,0.4952706152372665,0.4697621870079634,0.4158620153500612,0.2779800821027445,0.811450310187664,0.4449509190474525,0.40302759018819656,0.9797409499964082,0.8117633548712893,0.3561841022638447,0.5082217193335185,0.9472812310940384,0.03877962756957088,0.8074777016349168,0.3903889972893888,0.6365909821132251,0.9256379240289082,0.9986798568659072,0.9067898570276643,0.7889819992518828,0.3648521898056963,0.3786684643168372,0.3916543328339408,0.8758499655509144,0.9104783061047692,0.4449509190474525,0.933825494749438,0.4597989153897598,0.2503593020249263,0.2446954751769985,0.5005402285906505,0.3557667140668689,0.9814663917692809,0.4566381750893119,0.4164891297845643,0.3063653634248187,0.4170550221652074,0.825034019140545,0.2785752646205508,0.867061034809968,0.3611266107961518,0.4241271280085879,0.4462973469261713,0.8133441300599541,0.7772832103326837,0.8438608230292113,0.3374279759102293,0.30155627329399204,0.8691034478184957,0.41180130877447785,0.09679576903623588,0.4253730525645958,0.2869456709713616,0.6024113737967441,0.9238719476604618,0.3227335835394828,0.8067403730915316,0.8161086982576026,0.9146103660335191,0.4449509190474525,0.33742624657900044,0.4602563818931488]}}
I have the graph with labels showing up but no data is shown. Here is the code I have so far:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function () {
let counter = [];
let answers = ['sensor0', 'sensor1','sensor2','sensor3','sensor4','sensor5','sensor6','sensor7','sensor8','sensor9'];
$.getJSON('http://0.0.0.0:7410/data', function(data) {
// Populate series
// console.log(data);
//console.log(data.class_label);
let arr = []
let key;
for(let event in data){
let dataCopy = data[event]
arr.push(dataCopy)
}
let obj = (JSON.stringify(arr))
console.log(obj);
console.log(obj[10]);
// draw chart
$('#container').highcharts({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: "Wow"
},
xAxis: {
type: answers,
allowDecimals: false,
title: {
text: ""
}
},
yAxis: {
min: 0,
title: {
text: "Scores"
}
},
series: [{
name: 'Subjects',
data: arr
}]
});
});
});
</script>

According to the comments - try to get access to the data array like in the demo below.
Demo: https://jsfiddle.net/BlackLabel/rjqmoc8s/
console.log(receivedData[0]["class_label"])

Issue formatting data in JavaScript for a pie chart

I am not a JavaScript expert and I am trying to put a simple pie chart together using the data from a csv file. The sample code for the pie chart with its input data looks like below and it works perfectly.
var pie = new d3pie("pie", {
header: {
title: {
text: "A Very Simple Pie",
fontSize: 30
}
},
data: {
content: [
{ label: "JavaScript", value: 264131 },
{ label: "Ruby", value: 218812 },
{ label: "Java", value: 157618}
]
}
});
but when I try to use the data from the csv file. It says no data is provided. I obviously try to pass the dynamic data to the data.content but it seems like I am not doing it correctly. Below is my code:
var input_data = []
d3.csv("data.csv", function (data) {
input_data.push({
label: data["First"],
value: +data["Age"]
});
});
console.log(input_data); // This shows [{label: "james", value:30},{"John",value:22}]
var pie = new d3pie("pie", {
header: {
title: {
text: "Simple Pie",
fontSize: 30
}
},
data: {
content: input_data
}
});
Any idea what I am doing wrong here?

As noted in my comment, your problem is because d3.csv acts asynchronously, and input_data isn't populated when d3pie tries to create your chart.
There is something highly suspicious going on with input_data in the other examples -- it should be called for every item in data, but seems only to be called once. Rather than using input_data to collate intermediate results, it's much easier to use javascript's map function to transform your csv data into the format you want:
d3.csv("data.csv", function (data) {
var pie = new d3pie("pie", {
header: {
title: {
text: "Simple Pie",
fontSize: 30
}
},
data: {
content: data.map( function(d){
return { label: d['First'], value: +d['Age'] }
})
}
});
});
map iterates over an array and produces an array as output, so it's much cleaner and easier than creating extra arrays on to which you push data, etc.

You probably want to put your d3pie code inside your callback function because you want to call it after the data returns (see this example):
var input_data = []
d3.csv("data.csv", function (data) {
input_data.push({
label: data["First"],
value: +data["Age"]
});
console.log(input_data); // This shows [{label: "james", value:30},{"John",value:22}]
var pie = new d3pie("pie", {
header: {
title: {
text: "Simple Pie",
fontSize: 30
}
},
data: {
content: input_data
}
});
});

const promise = d3.csv("data.csv", function (data) {
input_data.push({
'label': data["First"],
'value': +data["Age"]
});
});
promise.then(function(){
var pie = new d3pie("pieChart", {
header: {
title: {
text: "Simple Pie",
fontSize: 30
}
},
data: {
content: input_data
}
});
});

google.visualisation is undefined using ajax

When i run the below I am getting TypeError: google.visualisation is undefined[Learn More]
the data is coming back from my .php file and I can see it when I do a console.log.
I am probably lost in with the callbacks or maybe someone can andvise otherwise?
I have tried to load the visualistion before i do my ajax here but same error. I have also looked at other possible answers but I still cannot get it to work.
This is my code:
$(document).ready(function(){
console.log("hello world")
//alert("result")
$.ajax({
url:"data.php",
dataType : "JSON",
success : function(result) {
google.charts.load('current', { 'packages':['corechart'] });
google.charts.setOnLoadCallback(function() {
console.log(result);
drawChart(result);
});
}
});
function drawChart(result) {
var data = new google.visualisation.Datatable();
data.addColumn('string','Name');
data.addColumn('number','Quantity');
var dataArray=[];
$.each(result, function(i, obj) {
dataArray.push([ obj.name, parseInt(obj.quantity) ]);
});
data.addRows(dataArray);
var piechart_options = {
title : 'Pie Chart: How Much Products Sold By Last Night',
width : 400,
height : 300
}
var piechart = new google.visualisation.PieChart(document
.getElementById('piechart_div'));
piechart.draw(data, piechart_options)
var barchart_options = {
title : 'Bar Chart: How Much Products Sold By Last Night',
width : 400,
height : 300,
legend : 'none'
}
var barchart = new google.visualisation.BarChart(document
.getElementById('barchart_div'));
barchart.draw(data, barchart_options)
}
});
I am getting an object back from my DB query, so I think that part is right, which is an array with 6 objects:
0: Object { id: "1", name: "Product1", quantity: "2" }
​1: Object { id: "2", name: "Product2", quantity: "3" }
​2: Object { id: "3", name: "Product3", quantity: "4" }
​3: Object { id: "4", name: "Product4", quantity: "2" }
​4: Object { id: "5", name: "Product5", quantity: "6" }
​5: Object { id: "6", name: "Product6", quantity: "11" }
For what it is worth my php code is as follows:
data.php
<?php
require_once 'database.php';
$stmt = $conn->prepare('select * from product');
$stmt->execute();
$results = $stmt->fetchAll(PDO::FETCH_OBJ);
echo json_encode($results);
?>
database.php
<?php
$conn = new PDO('mysql:host=192.168.99.100;dbname=demo','root', 'root');
?>
Note: this version is similar but slightly different

you can actually use
google.charts.load
in place of
$(document).ready
and it should be with a z not s
visualization
not
visualisation
try it like this...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
$.ajax({
url:"data.php",
dataType : "JSON",
success : function(result) {
drawChart(result);
}
});
});
function drawChart(result) {
var data = new google.visualization.Datatable();
data.addColumn('string','Name');
data.addColumn('number','Quantity');
$.each(result, function(i, obj) {
data.addRow([ obj.name, parseInt(obj.quantity) ]);
});
var piechart_options = {
title : 'Pie Chart: How Much Products Sold By Last Night',
width : 400,
height : 300
}
var piechart = new google.visualization.PieChart(document
.getElementById('piechart_div'));
piechart.draw(data, piechart_options)
var barchart_options = {
title : 'Bar Chart: How Much Products Sold By Last Night',
width : 400,
height : 300,
legend : 'none'
}
var barchart = new google.visualization.BarChart(document
.getElementById('barchart_div'));
barchart.draw(data, barchart_options)
}

javascript conditional before push?

Ok I have a graph using Highcharts.JS that is populated by an api call providing it with XML data.
I have managed to get the data to push and display on the graph as such, but now I am having the issue of "What happens when there is no data for "x" component" In which I found out that it makes the whole graph blank until you click to hide "x" component on the legend.
So I was thinking that I could probably do some conditional to have it check if there is actually data in the array that is made from the XML.
<!DOCTYPE html>
<html>
<head>
<title>Graph</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"> </script>
<script>
$(document).ready(function() {
var sgaxml = 'https://sga.quickbase.com/db/bjmdensiu?apptoken=beadyrucxguavbx5isubd6iaqpe&act=API_DoQuery&query=%7B14.EX.%27_FID_9%7D&clist=7.24.25.26.27.28.29.30.31.32.33.34.35.36.37'
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Components Over Time'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Concentration%'
}
},
series: []
};
// Load the data from the XML file
$.get(sgaxml, function(xml) {
// Split the lines
var xml = $(xml).find('record');
// Variables for the component series
var seriesH = {
name: 'Hydrogen',
data: []
};
var seriesHe = {
name: 'Helium',
data: []
};
var seriesO = {
name: 'Oxygen',
data: []
};
var seriesHs = {
name: 'Hydrogen Sulfide',
data: []
};
var seriesN = {
name: 'Nitrogen',
data: []
};
var seriesC = {
name: 'Carbon Dioxide',
data: []
};
var seriesM = {
name: 'Methane',
data: []
};
var seriesE = {
name: 'Ethane',
data: []
};
var seriesP = {
name: 'Propane',
data: []
};
var seriesIb = {
name: 'Iso-Butane',
data: []
};
var seriesNb = {
name: 'N-Butane',
data: []
};
var seriesIp = {
name: 'Iso-Pentane',
data: []
};
var seriesNp = {
name: 'N-Pentane',
data: []
};
var seriesHex = {
name: 'Hexanes+',
data: []
};
xml.each(function (i, record) {
options.xAxis.categories.push(new Date(parseInt($(record).find('sample_date').text())));
seriesH.data.push(parseFloat($(record).find('hydrogen').text()));
seriesHe.data.push(parseFloat($(record).find('helium').text()));
seriesO.data.push(parseFloat($(record).find('oxygen').text()));
seriesHs.data.push(parseFloat($(record).find('hydrogen_sulfide').text()));
seriesN.data.push(parseFloat($(record).find('nitrogen').text()));
seriesC.data.push(parseFloat($(record).find('co2').text()));
seriesM.data.push(parseFloat($(record).find('methane').text()));
seriesE.data.push(parseFloat($(record).find('ethane').text()));
seriesP.data.push(parseFloat($(record).find('propane').text()));
seriesIb.data.push(parseFloat($(record).find('iso_butane').text()));
seriesNb.data.push(parseFloat($(record).find('n_butane').text()));
seriesIp.data.push(parseFloat($(record).find('iso_pentane').text()));
seriesNp.data.push(parseFloat($(record).find('n_pentane').text()));
seriesHex.data.push(parseFloat($(record).find('hexanes_').text()));
});
console.log(seriesO);
options.series.push(seriesH);
options.series.push(seriesHe);
options.series.push(seriesO);
options.series.push(seriesHs);
options.series.push(seriesN);
options.series.push(seriesC);
options.series.push(seriesM);
options.series.push(seriesE);
options.series.push(seriesP);
options.series.push(seriesIb);
options.series.push(seriesNb);
options.series.push(seriesIp);
options.series.push(seriesNp);
options.series.push(seriesHex);
console.log('options: ', options);
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<div id="container" style=" width: 1000px; height: 600px; margin: 0 auto "></div>
</body>
</html>
<!--
XML FROM CALL
=============
<qdbapi>
<action>API_DoQuery</action>
<errcode>0</errcode>
<errtext>No error</errtext>
<dbinfo>
<name>RESULT</name>
<desc/>
</dbinfo>
<variables>
<co2>Carbon Dioxide</co2>
<methane>methane</methane>
</variables>
<chdbids></chdbids>
<record>
<sample_date>1386892800000</sample_date>
<hydrogen>0.002</hydrogen>
<helium>0.114</helium>
<oxygen/>
<hydrogen_sulfide/>
<nitrogen>1.926</nitrogen>
<co2>0.454</co2>
<methane>82.163</methane>
<ethane>6.353</ethane>
<propane>4.760</propane>
<iso_butane>0.618</iso_butane>
<n_butane>1.819</n_butane>
<iso_pentane>0.491</iso_pentane>
<n_pentane>0.544</n_pentane>
<hexanes_>0.756</hexanes_>
<update_id>1408654196361</update_id>
</record>
<record>
<sample_date>1383782400000</sample_date>
<hydrogen>0.006</hydrogen>
<helium>0.038</helium>
<oxygen/>
<hydrogen_sulfide/>
<nitrogen>0.512</nitrogen>
<co2>0.844</co2>
<methane>83.178</methane>
<ethane>8.678</ethane>
<propane>3.631</propane>
<iso_butane>0.493</iso_butane>
<n_butane>1.097</n_butane>
<iso_pentane>0.342</iso_pentane>
<n_pentane>0.371</n_pentane>
<hexanes_>0.810</hexanes_>
<update_id>1408981434690</update_id>
</record>
<record>
<sample_date>1369699200000</sample_date>
<hydrogen>0.004</hydrogen>
<helium>0.060</helium>
<oxygen/>
<hydrogen_sulfide/>
<nitrogen>1.684</nitrogen>
<co2>0.443</co2>
<methane>77.742</methane>
<ethane>10.430</ethane>
<propane>6.842</propane>
<iso_butane>0.587</iso_butane>
<n_butane>1.482</n_butane>
<iso_pentane>0.232</iso_pentane>
<n_pentane>0.249</n_pentane>
<hexanes_>0.245</hexanes_>
<update_id>1408981112624</update_id>
</record>
</qdbapi>
I've attempted to us isnan() as I was told it would be doable with it, but that didn't have any results.

There is already a way to handle this in highcharts. See noData.
noData: {
style: {
fontWeight: 'bold',
fontSize: '15px',
color: '#303030'
}
}
You need to include an extra library (modules/no-data-to-display.js) from highcharts but it is dead simple.

Categories