Issue formatting data in JavaScript for a pie chart - javascript

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

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

Chart.js chart in vue.js component does not update

I´m developing a visualization module for some crypto portfolios with vue.js and chart.js but am currently stuck with this:
Empty chart is displayed but non of the values are rendered.
Since the values are dynamically loaded after the chart is initialized I believe that the chart is not updating itself properly (even though I call .update()), but no errors are displayed whatsoever.
I wrapped the chart.js rendering in a vue component:
Vue.component('portfolioValues', {
template: '<canvas width="400" height="200"></canvas>',
data: function() {
return {
portfolio_value: [],
portfolio_labels: [],
chart: null,
}
},
methods: {
load_portfolio_value_local: function() {
values = [];
labels = []
local_data.forEach(element => {
values.push(element.total_usd);
labels.push(moment(element.timestamp, 'X'));
});
this.portfolio_value = values;
this.portfolio_labels = labels;
this.chart.update();
},
render_chart: function() {
this.chart = new Chart(this.$el, {
type: 'line',
data: {
labels: this.portfolio_labels,
datasets: [{
label: "Portfolio Value",
data: this.portfolio_value,
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
distribution: 'linear',
}]
}
}
});
}
},
mounted: function() {
this.render_chart();
this.load_portfolio_value_local();
}
});
For demonstration purposes I just added some data locally, looks like this:
local_data = [{
"timestamp": 1515102737,
"total_btc": 0.102627448096786,
"total_usd": 1539.41274772627
}, {
"timestamp": 1515102871,
"total_btc": 0.102636926127186,
"total_usd": 1538.52649627725
}, {
"timestamp": 1515103588,
"total_btc": 0.102627448096786,
"total_usd": 1532.33042753311
}
]
Here is the full demo code: https://codepen.io/perelin/pen/mppbxV
Any ideas why no data gets rendered? thx!

The problem you have here is how vuejs handles its data.
If you use it like that:
local_data.forEach(element => {
this.portfolio_value.push(element.total_usd);
this.portfolio_labels.push(moment(element.timestamp, 'X'));
});
this.chart.update();
The chart will update. But by re-initializing the arrays you work against vuejs.
TL;DR
If you want to re-initialize an object, you could assign the array to the object:
Object.assign(this.portfolio_value, values);
Object.assign(this.portfolio_labels, labels);
That way, the linking stays working.

How to plot a highstock single line series graph from ajax data

I have a rails app that fetches currency information data of the value of the sterling pound compared to the Kenyan shilling from a JSON API.
I want to use this data to plot a time-series graph of the value of the pound over a long period of time.
I'm using AJAX to populate data to a highcharts chart and my code is as follows:
<div id="currency", style="width: 220px, height:320px">
<script type="text/javascript">
$(document).ready(function(){
localhost = {}; //global namespace variable
localhost.currenctHTML = ""; //currency HTML built here
localhost.currencyValue = []; //array of percentage changes
localhost.currencyDate = []; //array of currency names
localhost.chart1 = {yAxisMin : null, yAxisMax : null};//obj holds things belonging to chart1
var url = '/forexes.json'
$.ajax({
url: url,
cache: false,
dataType: 'jsonp', //will set cache to false by default
context: localhost,
complete: function(data){
var a=JSON.parse(data.responseText);
// console.log(a);
var data_mapped = a.map(function (data){
return data.forex;
}).map(function (data) {
return {
currencyDate: data.published_at,
currencyValue: data.mean
}
});
this.currencyDate = _.pluck(data_mapped, 'currencyDate');
this.currencyValue = _.pluck(data_mapped, 'currencyValue');
console.log(this.currencyDate);
this.chart1.data.series[0].data = this.currencyValue;
this.chart1.data.xAxis.categories = this.currencyDate;
chart = new Highcharts.Chart(this.chart1.data);
}
});
localhost.chart1.data = { //js single-threaded, this obj created before callback function completed
chart: {
renderTo: "currency"
},
title: {
text: "Forex by Day"
},
xAxis: {
categories: null, //will be assigned array value during ajax callback
title: {
text: null
}
},
yAxis: {
title: {
text: "Pounds"
}
},
tooltip: {
formatter: function() {
return Highcharts.dateFormat("%B %e, %Y", this.x) + ': ' +
"$" + Highcharts.numberFormat(this.y, 2);
}
},
series: [{
name: 'Pound',
data: null
}
]
};
});
</script>
</div>
**** returns
this.chart1.data.xAxis.categories = ["2003-01-01T00:00:00.000Z", "2003-01-02T00:00:00.000Z", "2003-01-03T00:00:00.000Z", "2003-01-04T00:00:00.000Z", "2003-01-05T00:00:00.000Z"]
this.chart1.data.series[0].data = [147.653, 148.007, 147.971, 148.202, 148.384, 147.888]
How do I use this data to generate a highstocks line chart resembling this

In the highstock you cannot use categories, only datetime type, so you should parse your data to timestamp and use it in the data.

json data into highcharts

For my project i want to use the json file below to show in the highcharts.
For some reason the chart stays empty.
i think i need to format the json part in someway but i cant seem the figure out how.
Im pretty new to this, so I hope someone can explain the code to me in a simple way.
how do i format the code below? I want to use the colum chart.
[
{
"stadsdeel":"A Centrum",
"veiligheid":18994,
"leefbaarheid":3822,
"maatschappelijke integriteit":733,
"totaal":23549
},
{
"stadsdeel":"B Westpoort",
"veiligheid":878,
"leefbaarheid":318,
"maatschappelijke integriteit":88,
"totaal":1284
},
{
"stadsdeel":"E West",
"veiligheid":8648,
"leefbaarheid":1672,
"maatschappelijke integriteit":536,
"totaal":10856
},
{
"stadsdeel":"F Nieuw-West",
"veiligheid":8673,
"leefbaarheid":1832,
"maatschappelijke integriteit":690,
"totaal":11195
},
{
"stadsdeel":"K Zuid",
"veiligheid":10065,
"leefbaarheid":2171,
"maatschappelijke integriteit":767,
"totaal":13003
},
{
"stadsdeel":"M Oost",
"veiligheid":8284,
"leefbaarheid":1576,
"maatschappelijke integriteit":511,
"totaal":10371
},
{
"stadsdeel":"N Noord",
"veiligheid":5011,
"leefbaarheid":1324,
"maatschappelijke integriteit":385,
"totaal":6720
},
{
"stadsdeel":"T Zuidoost",
"veiligheid":5031,
"leefbaarheid":1264,
"maatschappelijke integriteit":677,
"totaal":6972
},
{
"stadsdeel":"X onbekend",
"veiligheid":196,
"leefbaarheid":46,
"maatschappelijke integriteit":26,
"totaal":268
},
{
"stadsdeel":"Amsterdam",
"veiligheid":65780,
"leefbaarheid":14025,
"maatschappelijke integriteit":4413,
"totaal":84218
}
]
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
series: [{}]
};
$.getJSON('charts.json', function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});

Each point need to have y paramter with number value, becasuse highcharts use this param to calculate position of point.

JS for Loop in Flot with JSON Data

I am attempting to create a dynamic flot graph dependant upon the data given to it, my flot graph is using JSON for its information and here is an example of the dataset:
{
"total":[[1377691200,115130],[1377694800,137759],[1377698400,137759],[1377702000,137759],[1377705600,137759],[1377709200,139604],[1377712800,137759],[1377716400,137759],[1377720000,137759],[1377723600,137759],[1377727200,137759],[1377730800,138156],[1377734400,137759],[1377738000,137759],[1377741600,137759],[1377745200,137759],[1377748800,138156],[1377752400,137759],[1377756000,137759],[1377759600,168831],[1377763200,137759],[1377766800,0],[1377770400,0]],
"dev0":[[1377691200,115130],[1377694800,137759],[1377698400,137759],[1377702000,137759],[1377705600,137759],[1377709200,139604],[1377712800,137759],[1377716400,137759],[1377720000,137759],[1377723600,137759],[1377727200,137759],[1377730800,138156],[1377734400,137759],[1377738000,137759],[1377741600,137759],[1377745200,137759],[1377748800,138156],[1377752400,137759],[1377756000,137759],[1377759600,168831],[1377763200,137759],[1377766800,0],[1377770400,0]],
"dev1":[[1377691200,0],[1377694800,0],[1377698400,0],[1377702000,0],[1377705600,0],[1377709200,0],[1377712800,0],[1377716400,0],[1377720000,0],[1377723600,0],[1377727200,0],[1377730800,0],[1377734400,0],[1377738000,0],[1377741600,0],[1377745200,0],[1377748800,0], [1377752400,0],[1377756000,0],[1377759600,0],[1377763200,0],[1377766800,0],[1377770400,0]]
}
The script i have created already:
$(".bytes_portal_pop").click(function(e) {
e.preventDefault();
var graph=$(this).data('graph');
var range=$(this).data('range');
var divid=$(this).data('divid');
var title=$(this).data('boxtitle');
$.getJSON("/action/sites/GetFlotStats/?graph=" + graph + "&range=" + range, function(json) {
//succes - data loaded, now use plot:
var plotarea = $("#" + divid);
var dev0=json.dev0;
var dev1=json.dev1;
$.plot(
$("#" + divid),
[
{
data: dev0,
lines:{show: true, fill: true},
label: "dev0",
},
{
data: dev1,
lines:{show: true, fill: true},
label: "dev1",
},
],
{
xaxis: {mode:"time"},
grid: {hoverable: true},
tooltip: true,
tooltipOpts: {
content: "Traffic: %y GB"
}
}
);
});
$("#boxtitleB_flot").html(title);
});
This way works fine and displays the two lines as i need however i would like it to be dynamic i.e. so i dont have to define each graph line i believe todo this i simply need a for or each() loop on the
var dev0=json.dev0;
and
{
data: dev0,
lines:{show: true, fill: true},
label: "dev0",
},
Any help achieving this would be much appreciated.

Correct, just loop it and generate your series objects dynamically.
Given a json return like:
jsonObj = {
"total":[[1377691200,115130],[1377694800,137759],[1377698400,137759],[1377702000,137759],[1377705600,137759],[1377709200,139604],[1377712800,137759],[1377716400,137759],[1377720000,137759],[1377723600,137759],[1377727200,137759],[1377730800,138156],[1377734400,137759],[1377738000,137759],[1377741600,137759],[1377745200,137759],[1377748800,138156],[1377752400,137759],[1377756000,137759],[1377759600,168831],[1377763200,137759],[1377766800,0],[1377770400,0]],
"dev0":[[1377691200,115130],[1377694800,137759],[1377698400,137759],[1377702000,137759],[1377705600,137759],[1377709200,139604],[1377712800,137759],[1377716400,137759],[1377720000,137759],[1377723600,137759],[1377727200,137759],[1377730800,138156],[1377734400,137759],[1377738000,137759],[1377741600,137759],[1377745200,137759],[1377748800,138156],[1377752400,137759],[1377756000,137759],[1377759600,168831],[1377763200,137759],[1377766800,0],[1377770400,0]],
"dev1":[[1377691200,0],[1377694800,0],[1377698400,0],[1377702000,0],[1377705600,0],[1377709200,0],[1377712800,0],[1377716400,0],[1377720000,0],[1377723600,0],[1377727200,0],[1377730800,0],[1377734400,0],[1377738000,0],[1377741600,0],[1377745200,0],[1377748800,0], [1377752400,0],[1377756000,0],[1377759600,0],[1377763200,0],[1377766800,0],[1377770400,0]]
};
Create an array of series like:
var series = [];
$.each(jsonObj, function (key, val) {
var serie = {};
serie.label = key;
serie.data = val;
series.push(serie);
});
And then create the plot:
$.plot(
$("#placeholder"),
series,
{}
);
Fiddle here.

Categories