Динамически создавать наборы данных ChartJs для ответа JSON Ajax в PHP

Question

У меня проблема со сборкой JSON в PHP, в ответ на Ajax call для динамического заполнения наборов данных для ChartsJs.

В PHP У меня есть возврат Ajax вызов, который работает для 1 набора данных ChartJs:

<?php
   $returnData['line'] = array(
     'type' => 'line',
     'title' => $title,
     'labels' => array('Jan','Feb','March','April','Mai'),
     'datasets' => array(
       array(
         'data' => array(10,20,15,45,21),
         'borderColor' => "#f7464a",
         'label' => "Label 1",
         'fill' => false
       )
     )
   );
   echo json_encode($returnData);
?>

JavaScript, который строит диаграмму:

$.ajax({
    url: "div.php",
    type: "POST",
    dataType: 'json',
    success: function(rtnData) {
        $.each(rtnData, function(dataType, data) {
            var ctx = document.getElementById("myChart").getContext("2d");
            var config = {
                type: data.type,
                data: {
                    datasets: data.datasets,
                    labels: data.labels
                },
                options:  {
                    responsive: true,
                    title: {
                        display: true,
                        text: data.title
                    },
                    legend: {
                        display: true,
                        position: 'right',
                        labels: {
                            fontColor: '#333'
                        }
                    }
                }
            };
            window.myPie = new Chart(ctx, config);

        });
    },
    error: function(rtnData) {
        alert('error' + rtnData);
    }


});

Теперь мой вопрос, когда у меня есть данные для 5 или более Datasets:

//Data  
$title = "MyTitle";
$labels= array('Jan','Feb','March','April','Mai');

//Datasets
$linelabels= array('Line1','Line2','Line3','Line4','Line5');
$mydata1 = array(10,20,15,45,21);
$mydata2 = array(21,45,15,20,10);
$mydata3 = array(10,20,15,45,21);
$mydata4 = array(21,45,15,20,10);
$mydata5 = array(10,20,15,45,21);
$colors = array("#f7464a","#8e5ea2","#f7464a","#8e5ea2","#f7464a");

Как я могу динамически построить эти Datasets в ответе JSON? Например:

'datasets' => array(

    for(i=0:i<5;i++)
    {
        array(
          'data' => array($mydata1[i]),
          'borderColor' => $colors[i],
          'label' => $linelabels[i],
          'fill' => false
        ),
    }

  )

Answer 1

решаемая. Чтобы динамически создать ответ Json для Ajax для диаграмм, возможно, кто-то может помочь:

$returnData2['line'] = array(
  'type' => 'line',
  'title' => 'my Title',
  'labels' => array('Jan','Feb','March','April','Mai'),
  'datasets' => array(
    array(
      'data' => array(10,20,15,45,21),
      'borderColor' => "#f7464a",
      'label' => "Label 1",
      'fill' => false
    ),
    array(
        'data' => array(21,45,15,20,10),
        'borderColor' => "#8e5ea2",
        'label' => 'Line2',
        'fill' => false
    ),
    array
    (
        'data' => array(10,20,15,45,21),
        'borderColor' => "#f7464a",
        'label' => 'Line3',
        'fill' => false
    ),
    array
    (
        'data' => array(21,45,15,20,10),
        'borderColor' => "#8e5ea2",
        'label' => 'Line4',
        'fill' => false
    ),
    array(
        'data' => array(10,20,15,45,21),
        'borderColor' => "#f7464a",
        'label' => 'Line5',
        'fill' => false
    )
  )
);

echo json_encode($returnData2);

Я использовал эту конструкцию, я признаю, что это не самый лучший способ, но он работает. :)

$title = "MyTitle";
$labels= array('Jan','Feb','March','April','Mai');

$linelabels= array('Line1','Line2','Line3','Line4','Line5');
$mydata1 = array(10,20,15,45,21);
$mydata2 = array(21,45,15,20,10);
$mydata3 = array(35,24,20,18,11);
$mydata4 = array(18,5,34,17,42);
$mydata5 = array(23,17,34,12,45);
$colors = array("#E74C3C","#76448A","#148F77","#D4AC0D","#1ABC9C");


$returnData = new stdClass();
$returnData->line = new stdClass();
$returnData->line->type = 'line';
$returnData->line->title = 'my Title';
$returnData->line->labels = $labels;
$returnData->line->datasets = new stdClass();

$dataset = array();
for($i=0;$i<5;$i++)
{
    $mydata = array();
    if($i==0)
        $mydata = $mydata1;
    else if($i==1)
        $mydata = $mydata2;
    else if($i==2)
        $mydata = $mydata3;
    else if($i==3)
        $mydata = $mydata4;
    else if($i==4)
        $mydata = $mydata5;

    $datasets = new stdClass();
    $datasets->data = $mydata;
    $datasets->borderColor = $colors[$i];
    $datasets->label = $linelabels[$i];
    $datasets->fill = false;

    $dataset[] = $datasets;

}

$returnData->line->datasets = $dataset;

echo json_encode($returnData);

Ajax-ответ для построения диаграмм:

$.ajax({
    url: "div.php",
    type: "POST",
    dataType: 'json',
    success: function(rtnData) {
        $.each(rtnData, function(dataType, data) {
            var ctx = document.getElementById("myChart").getContext("2d");
            var config = {
                type: data.type,
                data: {
                    datasets: data.datasets,
                    labels: data.labels
                },
                options:  {
                    responsive: true,
                    title: {
                        display: true,
                        text: data.title
                    },
                    legend: {
                        display: true,
                        position: 'right',
                        labels: {
                            fontColor: '#333'
                        }
                    }
                }
            };
            window.myPie = new Chart(ctx, config);

        });
    },
    error: function(rtnData) {
        alert('error' + rtnData);
    }


});

И результат в Canvas:

введите описание изображения здесь