Array for Highcharts: - javascript

I just play around with Highcharts (http://www.highcharts.com) inside of a test app based on rails 3.1.1 and HAML. I'm still new to js and I try to accomplish a nice integration of highcharts.
In my controller I set up some json arrays for usage in highcharts.
#category_ids_json = Category.all(:conditions => { :income => false},:select => "id").to_json
#categories_json = Category.all(:conditions => { :income => false}, :select => "id,title,income").to_json
#transactions_json = Transaction.all(:select => "date,title,amount,category_id").to_json
Out of these instance variables, I filter some values and create a new array, which i use for the highcharts data array:
var category_transactions_sum = new Array();
category_transactions_sum.push({title:categories[c].title, amount: transactions_sum})
The content of the array looks somehting like this:
[{title: "Salary", amount: 50},{title: "Food", amount: 25},{title: "Recreation", amount: 10}]
Now I'm stuck when it is time to initialize Highcharts. This is how I initialize it right now:
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
series: [{
type: 'pie',
name: 'Expenses',
data: [
[category_transactions_sum[0].title, category_transactions_sum[0].amount],
[category_transactions_sum[1].title, category_transactions_sum[1].amount],
[category_transactions_sum[2].title, category_transactions_sum[2].amount],
[category_transactions_sum[3].title, category_transactions_sum[3].amount],
[category_transactions_sum[4].title, category_transactions_sum[4].amount],
[category_transactions_sum[5].title, category_transactions_sum[5].amount],
[category_transactions_sum[6].title, category_transactions_sum[6].amount],
[category_transactions_sum[7].title, category_transactions_sum[7].amount],
[category_transactions_sum[8].title, category_transactions_sum[8].amount],
[category_transactions_sum[9].title, category_transactions_sum[9].amount],
[category_transactions_sum[10].title, category_transactions_sum[10].amount],
[category_transactions_sum[11].title, category_transactions_sum[11].amount],
[category_transactions_sum[12].title, category_transactions_sum[12].amount],
[category_transactions_sum[13].title, category_transactions_sum[13].amount],
[category_transactions_sum[14].title, category_transactions_sum[14].amount],
[category_transactions_sum[15].title, category_transactions_sum[15].amount],
[category_transactions_sum[16].title, category_transactions_sum[16].amount],
[category_transactions_sum[17].title, category_transactions_sum[17].amount],
[category_transactions_sum[18].title, category_transactions_sum[18].amount],
[category_transactions_sum[19].title, category_transactions_sum[19].amount],
[category_transactions_sum[20].title, category_transactions_sum[20].amount],
[category_transactions_sum[21].title, category_transactions_sum[21].amount],
[category_transactions_sum[22].title, category_transactions_sum[22].amount],
[category_transactions_sum[23].title, category_transactions_sum[23].amount],
[category_transactions_sum[24].title, category_transactions_sum[24].amount],
[category_transactions_sum[25].title, category_transactions_sum[25].amount],
[category_transactions_sum[26].title, category_transactions_sum[26].amount],
]
}]
});
My Questions:
How would i iterate through the category_transactions_sum array to get rid of that bunch of lines inside of the "data" declaration of highcharts. I tried a for loop but it didn't work.
Is there a better way to insert the data into highcharts? Highcharts needs data in this format:
data: [
['Firefox', 45.0],
['IE', 26.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
Is it possible to do something like this?
data: [
myArrayWithPreparedData
]
If yes, how would i build this array?
Many thanks for helping a newbie out.

I believe you want something like this:
data: $.map(category_transactions_sum, function(i, c) { return [c.title, c.amount]; })

you can try this (works for me):
temp = $.map(json, function(i) { return [[i.in_time, i.status]]; })
showData = JSON.parse(JSON.stringify(temp, null, ""));
and then use in the series as :
chart.addSeries({
data: showData
});

Alex almost has it.
Should be:
someVar = [{title: "Salary", amount: 50},{title: "Food", amount: 25},{title: "Recreation", amount: 10}]
data = $.map(someVar, function(i) { return [[i.title, i.amount]]; })
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
series: [{
type: 'pie',
name: 'Expenses',
data: 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"])

How to add a custom last row within a table using jspdf-Autotable

I'm trying to build a small app with jspdf and jspdf-Autotable but I don't find how to create a custom last row with another variable value in an existing table.
What I just have done so far is this:
doc.autoTable({
body: concepts,
columns: [{ header: 'Concept', dataKey: 'name' }, { header: 'Amount', dataKey: 'amount' }],
didDrawPage: function (data) {
let rows = data.table.body;
rows.push({
content: 'Total = ' + total,
colSpan: 2
});
if (data.row.index === rows.length - 1) { doc.setFillColor(239, 154, 154); }
}
});
I'm pretty sure that I'm getting confused on how to face this problem. total comes with a number value but I want to print it in one custom last row alone but within the table, kind like an Excel rule would do.
Any suggestion would be helpful! Thank you.
You have to add your custom data before processing the elements. Use ... to destructure the data and merge with the new row.
function generate() {
var doc = new jsPDF();
var data = [
{name: "Bar", amount: 1200},
{name: "Zap", amount: 200},
{name: "Foo", amount: 320}];
var total = data.reduce((sum, el) => sum + el.amount, 0);
var body = [...data.map(el => [el.name, el.amount]),
[{content: `Total = ${total}`, colSpan: 2,
styles: { fillColor: [239, 154, 154] }
}]]
doc.autoTable({
head: [['Concept', 'Amount']],
body: body
});
doc.save("table.pdf");
}
<script src="https://unpkg.com/jspdf#1.5.3/dist/jspdf.min.js"></script>
<script src="https://unpkg.com/jspdf-autotable#3.4.1/dist/jspdf.plugin.autotable.js"></script>
<button onclick="generate()">Generate PDF</button>

Show special symbol for each series in category in highcharts

I am trying to draw chart that is looks like below
So far so I have achieved what you can see here.
I want to know :-
1 . How can I place special symbol(diamond) with each series in each category ?
Is there anything better than what I have done ?
Relevant Code
series: [{
name: 'Meeting 1',
data: [
{y:100,color:'#F4B183'},
{y:100,color:'#FFE699'},
{y:100,color:'#FFD966'},
]
},
{
name: 'Meeting 2',
data: [
{y:100,color:'#F4B183'},
{y:100,color:'#FFE699'},
{y:100,color:'#FFD966'}
]
},
{
name: 'Meeting 3',
data: [
{y:100,color:'#F4B183'},
{y:100,color:'#FFE699'},
{y:100,color:'#FFD966'}
]
}
]
You can use extra scatter serie with diamond marker
{
type:'scatter',
color:'black',
marker:{
symbol:'diamond'
},
data:[[2,50]]
}
Example: http://jsfiddle.net/mdzzdLeh/3/
Alternative solution: use Renderer.

series declared dynamically Highcharts

Good evening,
I made a chart visible in http://jsfiddle.net/6u7fW/1/.
As it turns out, I have defined the variable "data" as an array, since we do not know their numbers (in the graph are three, but could be more).
you can declare the variable "series" in a dynamic way, so that from then code it is possible to enter all the data ("data") and that it is not static?
series: [{
name: name,
data: data[2]
},
{
name: name,
data: data[1]
},
{
name: "",
data: data[0]
}]
Thank you in advance
Dave
Let me explain:
you can do something like:
series: function() {
for (i=0; i <data.length; i++) {
return { name: "", data: data[i]}
}
}
You can use something like this:
var len = data.length,
series = [],
i;
for(i=0;i<len;i++){
series.push({ name: "", data: data[i]});
}
//highcharts part
series: series

How to make a Pie Chart Aggregate the Data Source?

Using Kendo UI Complete for ASP.NET MVC, version: 2013.3 1119 (Nov 20, 2013)...
If I have this bit of code:
$("#status-chart").kendoChart({
dataSource: {
data: [
{Status: 10},
{Status: 20},
{Status: 200},
{Status: 200}
]
},
series: [{
field: 'Status',
categoryField: "Status",
aggregate: 'count'
}]
});
I get this chart:
As you can see - Status 10 and 20 have got a value of 1 and Status 200 a value of 2.
Great, but what I actually want is exactly the same thing in a pie chart (so, a chart with 3 pie slices, 2 of which are exactly the same size and one that is 2 times as big as the rest).
I therefore thought to myself, all I need to do is just set type: "pie" like so:
$("#status-chart").kendoChart({
dataSource: {
data: [
{Status: 10},
{Status: 20},
{Status: 200},
{Status: 200}
]
},
series: [{
field: 'Status',
categoryField: "Status",
aggregate: 'count',
type: "pie"
}]
});
But that produced this chart:
You can see that Status 200 is repeated and the value is determining the size of the slices.
So, here is my question:
How can I create a pie chart that looks like the picture below but which is bound to the data source in the first code snippet above?
Incidentally, the reason I do not want to change the data source is that I wish to share it with a grid.
What you are trying to do here is to group a shared DataSource and have it only affect one widget. Furthermore, Kendo UI will return a grouped object when you group it. The Pie chart is not interested in these objects, but rather the count of the items that each of these group objects contains. We just need to get the data in the right format.
So you have your original DataSource (which I have extracted since it's shared with another widget). When that DataSource changes, you want to populate a second one - one that you can group without affecting the grid.
var ds = new kendo.data.DataSource({
data: [
{Status: 10},
{Status: 20},
{Status: 200},
{Status: 200}
],
change: function() {
chartData.data(this.data());
}
});
The second DataSource (chartData) is grouped, and when it changes, it populates an array, constructing objects that the pie chart can actually understand.
var groupedData = [];
// populate the grouped data array by grouping this datasource
// and then populating an plain array
var chartData = new kendo.data.DataSource({
group: { field: 'Status' },
change: function() {
groupedData = [];
$.each(this.view(), function() {
groupedData.push({ field: this.value, value: this.items.length });
});
}
});
And then just bind your pie chart to that array
$("#status-chart").kendoChart({
dataSource: groupedData,
series: [{
type: 'pie',
field: 'value',
categoryField: 'field'
}]
});
Working example: http://jsbin.com/EKuxORA/1/edit

Categories