We Keep Coding

Adding a JSON Response to a HighCharts Graph - javascript

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

Related

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

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.

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.

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.

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