2012-03-24 4 views
0

UPDATE Я обновил свой код в ответ на комментарии @MichaelRushton. Теперь я использую Highcharts, но у меня возникают проблемы с получением результатов в серии данных.Генерировать highchart, основанный на выходе массива

У меня теперь есть следующий массив, сгенерированный из запроса mysql, и я хотел бы вывести его в линейную диаграмму. Моя Y-ось должна содержать сумму, ось x - это диапазон дат, а легенда - разные элементы, нанесенные на диаграмму.

// Call the stored procedure 
    $stmt->execute();      

    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { 
     $array[$row['legend']][$row['date']] = $row['amount']; 
     //print_r($array); 
    } 


    chart = new Highcharts.Chart({ 

    chart: { 
    renderTo: 'container', 
    type: 'line' 
    }, 

    xAxis: 
    { 
    categories: [2012-03-01, 2012-03-02, 2012-03-03, 2012-03-04, 2012-03-05, 2012-03-06, 2012-03-07, 2012-03-08, 2012-03-09, 2012-03-10, 2012-03-11, 2012-03-12, 2012-03-13, 2012-03-14, 2012-03-15, 2012-03-16, 2012-03-17, 2012-03-18, 2012-03-19, 2012-03-20, 2012-03-21, 2012-03-22, 2012-03-23, 2012-03-24, 2012-03-25, 2012-03-26, 2012-03-27, 2012-03-28, 2012-03-29, 2012-03-30, 2012-03-31], 
    }, 

    series: 
    [ 

<?php 
    foreach ($array as $legend => $data) 
     { 
      echo '{'; 
      echo "name: '" . $legend . "',"; 

      $values = array(); 

      for ($i = 1; $i <= 31; ++$i) 
      { 
      $values[] = isset($data[$i]) ? $data[$i] : 0; 
      } 

      echo 'data: [' . implode(', ', $values) . '],'; 
      echo '},'; 

     } 
?> 
], 
} 
); 

<div id="container" style="width: 100%; height: 400px"></div> 
) 

Этот код представляет меня следующий вывод:

series: [ {name: 'Something Tastier',data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],},{name: 'Something Tasty',data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],}, ], }); 

кажется правильным, за исключением нет значения вывода рядов данных. Если у кого-то есть какие-то дальнейшие идеи, это будет очень признательно.

ответ

1

Highcharts - мой любимый вариант для графиков. Может быть, стоит структурирования массива выглядеть следующим образом:

Array (

    [legend_one] => Array 
    (

    [2012-03-01] => 100 
    [2012-03-02] => 200 
    [2012-03-03] => 300 
    ... 

) 

    [legend_two] => Array 
    (

    // Day of the month  
    [2012-03-01] => 100 
    [2012-03-02] => 200 
    [2012-03-03] => 300 
    ... 

) 

    ... 

) 

Вы можете использовать Highcharts как это:

Edit: теперь использует полную дату, а не только день, сделал месяц динамические (с использованием $start переменная) и запустил итератор дня на 0 вместо 1, чтобы удалить необходимость $i - 1 при использовании strtotime для разработки следующей даты.

chart = new Highcharts.Chart({ 

    xAxis: 
    { 

    categories: [ 

<?php 

     // You could dynamically set this date using $_GET/$_POST 
     $start = '2012-03-01'; 

     $dates = array(); 

     for ($i = 0, $days = date('t', strtotime($start)); $i < $days; ++$i) 
     { 
     $dates[] = date('Y-m-d', strtotime($start . ' + ' . $i . ' day')); 
     } 

     echo "'" . implode("', '", $dates) . "'"; 

?> 

    ], 

    }, 

    series: 
    [ 

<?php 

    foreach ($array as $legend => $data) 
    { 

     echo '{'; 

     echo "name: '" . $legend . "',"; 

     $values = array(); 

     for ($i = 0; $i < $days; ++$i) 
     { 

     $date = date('Y-m-d', strtotime($start . ' + ' . $i . ' day')); 

     $values[] = isset($data[$date]) ? $data[$date] : 0; 

     } 

     echo 'data: [' . implode(', ', $values) . '],'; 

     echo '},'; 

    } 

?> 

    ], 

} 
); 
+0

Привет, Майкл, это выглядит очень полезно. В настоящее время я использую PDO $ stmt-> fetchAll (PDO :: FETCH_ASSOC); для рендеринга моего массива. Любые идеи о том, как я могу изменить вывод в массив, который вы предложили? –

+1

Итерации над результатом и do '$ array [$ row ['legend']] [$ row ['day']] = $ row ['amount'];' – MichaelRushton

+0

Спасибо, что код Michael теперь попадает туда. У меня возникли проблемы с обновлением серии данных. –

0

Вы идете не так. Если вы ищете что-то, что уже доступно, тогда вы должны вывести данные таким образом, они принимают. А не наоборот.

С учетом этого попробуйте pChart. Он имеет широкую поддержку для разных форматов.

Смежные вопросы