javascript conditional before push? - javascript

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.

Related

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"])

ChartJs - displaying data dynamically from back-end

I have been struggling with this one for days now, really need some help. I need to apply gradient colors and some custom styling to our ChartJs bar chart, that contains call reporting data which comes from the back-end server. I found a way how to apply the styles and gradients, but can't figure out how to configure datasets to display correct data from the server, instead of some random numbers (eg. 10,20,30), like I tried for gradientGreen below. Any ideas?
//main html
<div class="row mb-4 mt-4">
<div class="col-9">
<h4 class="text-center">Call Distribution</h4>
#await Component.InvokeAsync("HourlyCallTotals", new { from = Model.From, to = Model.To, customer = Model.customer, site = Model.site })
</div>
//component html
#model CallReporter.ViewModels.BasicFilter
<div id="hourlyChart">
</div>
<script>
var HourlyCallData = #Html.RenderAction("HourlyTotals", "Calls", "", new { from = Model.from.ToString("s"), to = Model.to.ToString("s"), customer = Model.customer, site = Model.site })
</script>
//relevant part of JS function for Chart
function hoursChartAjax() {
var hourlyChart = $('#hourlyChart').html('<canvas width="400" height="300"></canvas>').find('canvas')[0].getContext('2d');
// set gradients for bars
let gradientGreen = hourlyChart.createLinearGradient(0, 0, 0, 400);
gradientGreen.addColorStop(0, '#66d8b0');
gradientGreen.addColorStop(1, '#1299ce');
let gradientBlue = hourlyChart.createLinearGradient(0, 0, 0, 400);
gradientBlue.addColorStop(0, '#1299ce');
gradientBlue.addColorStop(1, '#2544b7');
if (hourlyChart !== undefined) {
$.get(base + "Calls/HourlyTotals", { from: from.format(), to: to.format(), customer: currentCustomer.id, site: currentSite }, function (data) {
// set the default fonts for the chart
Chart.defaults.global.defaultFontFamily = 'Nunito';
Chart.defaults.global.defaultFontColor = '#787878';
Chart.defaults.global.defaultFontSize = 12;
var chart = new Chart(hourlyChart, {
type: 'bar',
data: {
labels: ['6AM', '9AM', '12AM', '3PM', '6PM', '9PM', '12PM'],
datasets: [
{
label: 'Total outgoing calls',
backgroundColor: gradientBlue,
data: HourlyCallData
},
{
label: 'Total incoming calls',
backgroundColor: gradientGreen,
data: [10, 20, 30]
}
]
},
//relevant part of back-end code that returns call data as Json
totalsContainer.Totals = allCallsHourly.OrderBy(x => x.Date).ToList();
return Json(new
{
labels = totalsContainer.Totals.Select(x => x.Date.ToString("hh tt")),
datasets = new List<object>() {
new { label = "Total Outgoing Calls", backgroundColor = "#1299CE", data = totalsContainer.Totals.Select(x => x.TotalOutgoingCalls) },
new { label = "Total Incoming Calls", backgroundColor = "#00B050", data = totalsContainer.Totals.Select(x => x.TotalIncomingCalls) } }
});
Attached img with console log and error, after trying solution below:

If the data comes formatted in the right way, you can just write this:
var chart = new Chart(hourlyChart, {
type: 'bar',
data: data: data
}
If not you could do it like so:
var chart = new Chart(hourlyChart, {
type: 'bar',
data: {
labels: data.labels,
datasets: [
{
label: data.datasets[0].label,
backgroundColor: gradientBlue,
data: data.datasets[0].data
},
{
label: data.datasets[1].label,
backgroundColor: gradientGreen,
data: data.datasets[1].data
}
]
}
}

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
}
});
});

Javascript - Plotly.js number frequency in order

I have a plot.ly that inputs a number and digits to view the number of frequency. Per say you enter 111222333 and digits 1,2,3. It will display a bar graph of the repetition of each digit. Everything seems to work except one detail, whenever I add random numbers, the graph does not display in order. Here is an example
Below is my JS code:
function plotIt() {
event.preventDefault();
var entireNumber = document.getElementById('fullNumber').value.split("");
var number = document.getElementById('digit').value.split("");
var matchedNumbers = [];
entireNumber.forEach(digit => {
if (number.includes(digit)) {
matchedNumbers.push(digit);
}
});
var layout = {
categoryorder: 'category ascending',
xaxis: {
type: 'category',
title: 'Values',
},
yaxis: {
title: '# of repetitions'
},
title:'Count'
};
var histElements = {
x: matchedNumbers,
type: 'histogram',
marker: {
color: 'rgba(235, 77, 75,1.0);',
},
};
var data = [histElements];
//Using ID for div to plot the graph
Plotly.newPlot('graph', data, layout,{scrollZoom:true});
}

You are using categoryorder: 'category ascending' in layout which does not exist for histograms in Plotly. As of July 2018 you cannot sort categorical data in histograms. But simply sorting your array before passing it to Plotly should work.
function plotIt() {
var entireNumber = document.getElementById('fullNumber').value.split("");
var number = document.getElementById('digit').value.split("");
number.sort();
var matchedNumbers = [];
entireNumber.forEach(digit => {
if (number.includes(digit)) {
matchedNumbers.push(digit);
}
});
matchedNumbers.sort();
var layout = {
xaxis: {
type: 'category',
title: 'Values',
}
};
var histElements = {
x: matchedNumbers,
type: 'histogram'
};
var data = [histElements];
Plotly.newPlot('graph', data, layout);
}
var button = document.getElementById('button');
button.addEventListener("click", plotIt(), false);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<form>
<input type='number' id='fullNumber' value='144445522123' >
<input type='number' id='digit' value='0123456789'>
</form>
<button type="button" id='button'>Plot me!</button>
<div id='graph'>
</div>

Retrieving JSON data for Highcharts with multiple series?

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]]);

Categories