Anzeige von zwei Graphen mit JSON

Ich versuche, Diagramme anzuzeigen, während ich Daten aus JSON abrufe.Anzeige von zwei Graphen mit JSON

Hier ist meine PHP-Datei, die mein json kodiert:

<?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) . ')'; 

?>

Hier mein json outpout ist:

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

Dann in javascript ich so etwas tun:

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

Allerdings kann ich nur 1 Diagramm anzeigen, abhängig davon, welche Daten ich pas s zuerst.

Irgendeine Idee, wie ich beide Diagramme anzeigen kann?

Vielen Dank!

Quelle

2016-11-02 Hyacinthe

Verwendung eine jede Schleife – madalinivascu

eine jede Schleife

ändern Sie PHP ein Array zurück:

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

Quelle

2016-11-02 07:36:38 madalinivascu

Dank viel bro! – Hyacinthe

Anzeige von zwei Graphen mit JSON

Antwort

Verwandte Themen