Hyacinthe Hyacinthe - 1 month ago 14
jQuery Question

Displaying two graphs with JSON

i'm trying to display charts while pulling data from JSON.

Here is my php file that encodes my json:

<?php
header("content-type: application/json");

$chartData = array (
0 =>
array (
'country' => 'Utilities',
'litres' => 501.8999999999999772626324556767940521240234375,
'color' => '#1faf4b',
),
1 =>
array (
'country' => 'Insurance',
'litres' => 301.8999999999999772626324556767940521240234375,
'color' => '#79cf93',
),
2 =>
array (
'country' => 'Telcos',
'litres' => 201.099999999999994315658113919198513031005859375,
'color' => '#a5dfb7',
),
3 =>
array (
'country' => 'Entertainment',
'litres' => 165.80000000000001136868377216160297393798828125,
'color' => '#d2efdb',
),
4 =>
array (
'country' => 'Other',
'litres' => 139.900000000000005684341886080801486968994140625,
'color' => '#ffffff',
),
);

$chartDataRight = array (
0 =>
array (
'income' => 53.5,
'expenses' => 18.10000000000000142108547152020037174224853515625,
'value' => 60.3070000000000021600499167107045650482177734375,
'year' => 2009,
'date' => '20093rd MAR',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
1 =>
array (
'year' => 2009,
'income' => 26.199999999999999289457264239899814128875732421875,
'expenses' => 22.800000000000000710542735760100185871124267578125,
'value' => 10.16799999999999926103555480949580669403076171875,
'date' => '20093rd Apr',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
2 =>
array (
'year' => 2009,
'income' => 30.10000000000000142108547152020037174224853515625,
'expenses' => 23.89999999999999857891452847979962825775146484375,
'value' => 20.07300000000000039790393202565610408782958984375,
'date' => '20093rd May',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
3 =>
array (
'year' => 2009,
'income' => 29.5,
'expenses' => 25.10000000000000142108547152020037174224853515625,
'value' => 30.0270000000000010231815394945442676544189453125,
'date' => '20093rd June',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
4 =>
array (
'year' => 2009,
'income' => 50.60000000000000142108547152020037174224853515625,
'expenses' => 27.199999999999999289457264239899814128875732421875,
'value' => 10.2509999999999994457766661071218550205230712890625,
'dashLengthLine' => 5,
'date' => '20093rd Jul',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
5 =>
array (
'year' => 2009,
'income' => 34.10000000000000142108547152020037174224853515625,
'expenses' => 29.89999999999999857891452847979962825775146484375,
'dashLengthColumn' => 5,
'alpha' => 0.200000000000000011102230246251565404236316680908203125,
'value' => 50.28099999999999880628820392303168773651123046875,
'additional' => '(projection)',
'date' => '20093rd Aug',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
6 =>
array (
'year' => 2009,
'income' => 53.5,
'expenses' => 18.10000000000000142108547152020037174224853515625,
'value' => 60.3070000000000021600499167107045650482177734375,
'date' => '20093rd Sep',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
7 =>
array (
'year' => 2009,
'income' => 26.199999999999999289457264239899814128875732421875,
'expenses' => 22.800000000000000710542735760100185871124267578125,
'value' => 10.16799999999999926103555480949580669403076171875,
'date' => '20093rd Oct',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
8 =>
array (
'year' => 2009,
'income' => 30.10000000000000142108547152020037174224853515625,
'expenses' => 23.89999999999999857891452847979962825775146484375,
'value' => 20.07300000000000039790393202565610408782958984375,
'date' => '20093rd Nov',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
9 =>
array (
'year' => 2009,
'income' => 29.5,
'expenses' => 25.10000000000000142108547152020037174224853515625,
'value' => 30.0270000000000010231815394945442676544189453125,
'date' => '20093rd Dec',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
10 =>
array (
'income' => 53.5,
'expenses' => 18.10000000000000142108547152020037174224853515625,
'value' => 60.3070000000000021600499167107045650482177734375,
'year' => 2010,
'date' => '20103rd MAR',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
11 =>
array (
'year' => 2010,
'income' => 26.199999999999999289457264239899814128875732421875,
'expenses' => 22.800000000000000710542735760100185871124267578125,
'value' => 10.16799999999999926103555480949580669403076171875,
'date' => '20103rd Apr',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
12 =>
array (
'year' => 2010,
'income' => 30.10000000000000142108547152020037174224853515625,
'expenses' => 23.89999999999999857891452847979962825775146484375,
'value' => 20.07300000000000039790393202565610408782958984375,
'date' => '20103rd May',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
13 =>
array (
'year' => 2010,
'income' => 29.5,
'expenses' => 25.10000000000000142108547152020037174224853515625,
'value' => 30.0270000000000010231815394945442676544189453125,
'date' => '20103rd June',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
14 =>
array (
'year' => 2010,
'income' => 50.60000000000000142108547152020037174224853515625,
'expenses' => 27.199999999999999289457264239899814128875732421875,
'value' => 10.2509999999999994457766661071218550205230712890625,
'date' => '20103rd Jul',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
15 =>
array (
'year' => 2010,
'income' => 34.10000000000000142108547152020037174224853515625,
'expenses' => 29.89999999999999857891452847979962825775146484375,
'value' => 50.28099999999999880628820392303168773651123046875,
'date' => '20103rd Aug',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
16 =>
array (
'year' => 2010,
'income' => 53.5,
'expenses' => 18.10000000000000142108547152020037174224853515625,
'value' => 60.3070000000000021600499167107045650482177734375,
'date' => '20103rd Sep',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
17 =>
array (
'year' => 2010,
'income' => 26.199999999999999289457264239899814128875732421875,
'expenses' => 22.800000000000000710542735760100185871124267578125,
'value' => 10.16799999999999926103555480949580669403076171875,
'date' => '20103rd Oct',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
18 =>
array (
'year' => 2010,
'income' => 30.10000000000000142108547152020037174224853515625,
'expenses' => 23.89999999999999857891452847979962825775146484375,
'value' => 20.07300000000000039790393202565610408782958984375,
'date' => '20103rd Nov',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
19 =>
array (
'year' => 2017,
'income' => 29.5,
'expenses' => 25.10000000000000142108547152020037174224853515625,
'value' => 30.0270000000000010231815394945442676544189453125,
'date' => '20173rd Dec',
'color' =>
array (
0 => '#FFFFFF',
1 => '#cccccc',
),
'strColor' => 'black',
),
20 =>
array (
'year' => 2017,
'income' => 53.5,
'expenses' => 18.10000000000000142108547152020037174224853515625,
'value' => 60.3070000000000021600499167107045650482177734375,
'date' => '20117rd MAR',
'color' =>
array (
0 => '#FFFFFF',
1 => '#cccccc',
),
'strColor' => 'black',
),
21 =>
array (
'year' => 2017,
'income' => 26.199999999999999289457264239899814128875732421875,
'expenses' => 22.800000000000000710542735760100185871124267578125,
'value' => 10.16799999999999926103555480949580669403076171875,
'date' => '20117rd Apr',
'color' =>
array (
0 => '#FFFFFF',
1 => '#cccccc',
),
'strColor' => 'black',
),
22 =>
array (
'year' => 2017,
'income' => 30.10000000000000142108547152020037174224853515625,
'expenses' => 23.89999999999999857891452847979962825775146484375,
'value' => 20.07300000000000039790393202565610408782958984375,
'date' => '20117rd May',
'color' =>
array (
0 => '#FFFFFF',
1 => '#cccccc',
),
'strColor' => 'black',
),
23 =>
array (
'year' => 2017,
'income' => 29.5,
'expenses' => 25.10000000000000142108547152020037174224853515625,
'value' => 30.0270000000000010231815394945442676544189453125,
'date' => '20173rd June',
'color' =>
array (
0 => '#FFFFFF',
1 => '#cccccc',
),
'strColor' => 'black',
),
24 =>
array (
'year' => 2017,
'income' => 50.60000000000000142108547152020037174224853515625,
'expenses' => 27.199999999999999289457264239899814128875732421875,
'value' => 10.2509999999999994457766661071218550205230712890625,
'dashLengthLine' => 5,
'date' => '20173rd Jul',
'color' =>
array (
0 => '#FFFFFF',
1 => '#cccccc',
),
'strColor' => 'black',
),
25 =>
array (
'year' => 2017,
'income' => 34.10000000000000142108547152020037174224853515625,
'expenses' => 29.89999999999999857891452847979962825775146484375,
'dashLengthColumn' => 5,
'alpha' => 0.200000000000000011102230246251565404236316680908203125,
'value' => 50.28099999999999880628820392303168773651123046875,
'date' => '20173rd Aug',
'color' =>
array (
0 => '#FFFFFF',
1 => '#cccccc',
),
'strColor' => 'black',
),
26 =>
array (
'year' => 2017,
'income' => 53.5,
'expenses' => 18.10000000000000142108547152020037174224853515625,
'value' => 60.3070000000000021600499167107045650482177734375,
'date' => '20173rd Sep',
'color' =>
array (
0 => '#FFFFFF',
1 => '#cccccc',
),
'strColor' => 'black',
),
27 =>
array (
'year' => 2017,
'income' => 26.199999999999999289457264239899814128875732421875,
'expenses' => 22.800000000000000710542735760100185871124267578125,
'value' => 10.16799999999999926103555480949580669403076171875,
'date' => '20173rd Oct',
'color' =>
array (
0 => '#FFFFFF',
1 => '#cccccc',
),
'strColor' => 'black',
),
28 =>
array (
'year' => 2017,
'income' => 30.10000000000000142108547152020037174224853515625,
'expenses' => 23.89999999999999857891452847979962825775146484375,
'value' => 20.07300000000000039790393202565610408782958984375,
'date' => '20173rd Nov',
'color' =>
array (
0 => '#FFFFFF',
1 => '#cccccc',
),
'strColor' => 'black',
),
29 =>
array (
'year' => 2017,
'income' => 29.5,
'expenses' => 25.10000000000000142108547152020037174224853515625,
'value' => 30.0270000000000010231815394945442676544189453125,
'date' => '20173rd Dec',
'color' =>
array (
0 => '#FFFFFF',
1 => '#cccccc',
),
'strColor' => 'black',
),
);
//echo $_GET['callback']. '('. json_encode($chartDataRight) . ')';

echo $_GET['callback']. '('. json_encode($chartDataRight) . ')' . '('. json_encode($chartData) . ')';

?>


Here is my json outpout:

https://www.loly.com.au/ebp/jsonp.php?callback=?

Then in javascript I do something like this:

$(function() {
$.getJSON('https://www.loly.com.au/ebp/jsonp.php?callback=?', function(chartDataRight, chartData) {
// assign ChartDataRight to chart1, assign ChartData to chart2
}


However, I can only display 1 chart, depending on what data I pass first.

Any Idea how I can display both charts?

Thanks a lot!

Answer

Use a each loop

change you php to return a array:

echo $_GET['callback']. '(['. json_encode($chartDataRight).','. json_encode($chartData) . '])';  

js:

$(function() {
    $.getJSON('https://www.loly.com.au/ebp/jsonp.php?callback=?', function(chartData) {
 $.each(chartData,function(){
  //initi each chart
 })
}