2014-01-04 3 views
0

Highcharts/PHP/JS новичок здесь. У меня возникли проблемы с форматированием требуемого массива данных ($ data) для подачи в Highcharts. Встроенный код PHP выводит DateTime/десятичный массив данных о формеHighcharts PHP JSON - правильный формат данных

[1388680500000, 11215], [1388680800000, 11334], [1388681100000, 11487], [1388681400000, 11600], [1388681700000, 11641], [1388682000000, 11648], [1388682300000, 11692], [1388682600000, 11641], [1388682900000, 11715], [1388683200000, 11808], [1388683500000, 11845], [1388683800000, 11813], [1388684100000, 11771], [1388684400000, 11746], [1388684700000, 11808], [1388685000000, 11784], [1388685300000, 11727], [1388685600000, 11608], [1388685900000, 11648], [1388686200000, 11587], [1388686500000, 11555], [1388686800000, 11596], [1388687100000, 11541], [1388687400000, 11441], [1388687700000, 11393], [1388688000000, 11340], [1388688300000, 11152], [1388688600000, 11031], [1388688900000, 10920], [1388689200000, 10681], [1388689500000, 10221], [1388689800000, 9895] 

В настоящее время я вручную копировать эти данные (в []) в серию: данные: поля, который успешно генерирует диаграмму (см ниже). Я попытался заменить поле данных цифрами : [{ данные: [] однако диаграмма больше не создана. (согласно http://www.highcharts.com/docs/working-with-data/preprocessing-data-from-a-database)

Я также пробовал много итераций json_encode ($ data) в php и JS, но безрезультатно. Я был бы очень благодарен всем, кто мог бы показать мне точный перевод выхода php в поле данных Highcharts, предпочтительно используя JSON.

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 

    <?php 
     //the usual stuff 
     error_reporting(-1); 

     $con = mysql_connect("localhost","root",""); 

     if (!$con) { 
      die('Could not connect: ' . mysql_error()); 
     } 

     mysql_select_db("test", $con); 

     $result = mysql_query("SELECT unix_timestamp(DATETIMES), TEST FROM PT"); 

     $data = array(); 

     while ($row = mysql_fetch_array($result)) { 
     extract($row); 
     $row[0]=1000*$row[0]; 
     $data[] = "[$row[0], $row[1]]"; 
     } 

     mysql_close($con); 
     echo join($data, ', '); 
    ?> 



<script> 
$(function() { 
    Highcharts.setOptions({ 
     chart: { 
      backgroundColor: 'rgba(255, 255, 255, .9)', 
      borderWidth: 2, 
      plotBackgroundColor: 'rgba(255, 255, 255, .9)', 
      plotShadow: true, 
      plotBorderWidth: 1 
     } 
    }); 

    var chart1 = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
     }, 

     xAxis: { 
      type: 'datetime' 
     }, 

     series: [{ 
      data: [[1388680500000, 11215], [1388680800000, 11334], [1388681100000, 11487], [1388681400000, 11600], [1388681700000, 11641], [1388682000000, 11648], [1388682300000, 11692], [1388682600000, 11641], [1388682900000, 11715], [1388683200000, 11808], [1388683500000, 11845], [1388683800000, 11813], [1388684100000, 11771], [1388684400000, 11746], [1388684700000, 11808], [1388685000000, 11784], [1388685300000, 11727], [1388685600000, 11608], [1388685900000, 11648], [1388686200000, 11587], [1388686500000, 11555], [1388686800000, 11596], [1388687100000, 11541], [1388687400000, 11441], [1388687700000, 11393], [1388688000000, 11340], [1388688300000, 11152], [1388688600000, 11031], [1388688900000, 10920], [1388689200000, 10681], [1388689500000, 10221], [1388689800000, 9895]], 
      pointStart: 0, 
      pointInterval: 3600 * 1000 // one hour 
     }] 
    }); 
}); 
</script> 

</head> 
<body> 

<div id="container" style="height: 300px"></div> 

</body> 
</html> 

EDIT:

Я быстро восстановлены скрипт в следующем формате, однако график не больше участков вообще ... Я уверен, что формат JSON является правильным. Пожалуйста помоги!

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>Highcharts Example</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
     <script type="text/javascript"> 
     $(document).ready(function() { 
      var options = { 
       chart: { 
        renderTo: 'container', 
        type: 'line', 
        marginRight: 130, 
        marginBottom: 25 
       }, 
       title: { 
        text: 'test', 
        x: -20 //center 
       }, 
       subtitle: { 
        text: '', 
        x: -20 
       }, 
       xAxis: { 
        categories: [] 
       }, 
       yAxis: { 
        title: { 
         text: 'Amount' 
        }, 
        plotLines: [{ 
         value: 0, 
         width: 1, 
         color: '#808080' 
        }] 
       }, 
       tooltip: { 
        formatter: function() { 
          return '<b>'+ this.series.name +'</b><br/>'+ 
          this.x +': '+ this.y; 
        } 
       }, 
       legend: { 
        layout: 'vertical', 
        align: 'right', 
        verticalAlign: 'top', 
        x: -10, 
        y: 100, 
        borderWidth: 0 
       }, 
       series: [] 
      } 

      $.getJSON("data.php", function(json) { 
       options.xAxis.categories = json['category']; 
       options.series[0].name = json['name']; 
       options.series[0].data = json['data']; 
       chart = new Highcharts.Chart(options); 
      }); 
     }); 
     </script> 
     <script src="http://code.highcharts.com/highcharts.js"></script> 
     <script src="http://code.highcharts.com/modules/exporting.js"></script> 
    </head> 
    <body> 
     <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
    </body> 
</html> 
+0

См. Раздел посвященный теме http://stackoverflow.com/questions/20922657/highcharts-getjson-chart-not-plotting –

ответ

0

Попробуйте код ниже, чтобы получить записи из MYSQL и преобразовать его в высокоширотные данные.

setup.js

var chart; 
    $(document).ready(function() { 
     var cursan = { 
      chart: { 
       renderTo: 'current_sanand', 
       defaultSeriesType: 'area', 
       marginRight: 10, 
       marginBottom: 20 
      }, 
      title: { 
       text: '', 
      }, 
      subtitle: { 
       text: '2013/14', 
      }, 
      xAxis: { 
       categories: ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar'] 
      }, 
      yAxis: { 
       title: { 
        text: 'Amount [Billion]' 
       }, 
       plotLines: [{ 
        value: 0, 
        width: 1, 
        color: '#808080' 
       }] 
      }, 
      tooltip: { 
       crosshairs: true, 
       shared: true 
      }, 
      legend: { 
       layout: 'vertical', 
       backgroundColor: 'white', 
       align: 'right', 
       verticalAlign: 'top', 
       y: 35, 
       x: -10, 
       borderWidth: 1, 
       borderRadius: 0, 
       title: { 
        text: '::::::::::::' 
       }, 
       floating: true, 
       draggable: true, 
       zIndex: 20 

      }, 

      plotOptions: { 

       series: { 
        cursor: 'pointer', 
        marker: { 
         lineWidth: 1 
        } 
       } 
      }, 

      series: [{ 
       color: Highcharts.getOptions().colors[2], 
       name: 'Sanand', 
       marker: { 
        fillColor: '#FFFFFF', 
        lineWidth: 2, 
        lineColor: null // inherit from series 
       }, 
       dataLabels: { 
        enabled: true, 
        rotation: 0, 
        color: '#666666', 
        align: 'top', 
        x: -10, 
        y: -10, 
        style: { 
         fontSize: '9px', 
         fontFamily: 'Verdana, sans-serif', 
         textShadow: '0 0 0px black' 
        } 
       } 
      }], 

     } 


    $.getJSON("data.php", function(json){ 
      options.xAxis.categories = json['category']; 
      options.series[0].name = json['name']; 
      options.series[0].data = json['data']; 
      chart = new Highcharts.Chart(options); 
    }); 

}); 

data.php

$ CON = mysql_connect ("локальный", "корень", "");

if (!$con) { 
     die('Could not connect: ' . mysql_error()); 
    } 

    mysql_select_db("test", $con); 
    $sql = mysql_query("SELECT unix_timestamp(DATETIMES), TEST FROM PT"); 
    $result['name'] = 'Sales Summary'; 
    while($r = mysql_fetch_array($sql)) { 
    $datetime = $r['inv_dt']; 
    $result['category'][] = $datetime; 
    $result['data'][] = round($r['amount'],2) ; 
} 
print json_encode($result); 

index.php

<html> 
    <body> 
     <div id="container" style="height: 300px"></div> 
    </body> 
</html> 

Я сделал все это, и этот метод работает должным образом. Попробуй.

+0

Спасибо за ответ @Sameer. Вывод php принимает вид {«name»: «Sales Summary», «category»: [1387791900000,1387792200000,1387792500000,1387792800000,1387793100000], «данные»: [8389,8478,8761,8980,9050]}, однако при запуске html-кода построена диаграмма, но серия не построена. – user3080213

+0

Нужно ли создавать новый Highcharts.Chart в .getJSON, если новый код уже был указан в коде? – user3080213

+0

Yaa Мы создаем новый график с различными данными, поэтому он требует создания. –

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