2015-10-16 70 views
0

只需测试Highchars库(http://www.highcharts.com/)。Highcarts:帮助创建JSON

我需要这个页面的同一个图:http://www.highcharts.com/demo/line-time-series

我有这个表:

+-------------+------------------+ 
| amountFinal | date_transaction | 
+-------------+------------------+ 
| 10.00  | 2015-07-15  | 
| 1415.00  | 2015-07-16  | 
| 1545.00  | 2015-07-17  | 
| 1309.00  | 2015-07-18  | 
| 97.00  | 2015-07-20  | 
| 1625.00  | 2015-07-21  | 
| 1248.00  | 2015-07-22  | 
| 752.00  | 2015-07-23  | 
| 2199.00  | 2015-07-24  | 
| 2370.00  | 2015-07-25  | 
| 1141.00  | 2015-07-27  | 
| 1873.00  | 2015-07-28  | 
| 4275.00  | 2015-07-29  | 
+-------------+------------------+ 

这是我的JavaScript部分(相同的例子):

$.getJSON(chart_url, function (data) { 

      $(container_chart).highcharts({ 
       chart: { 
        zoomType: 'x' 
       }, 
       title: { 
        text: 'USD to EUR exchange rate over time' 
       }, 
       subtitle: { 
        text: document.ontouchstart === undefined ? 
          'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in' 
       }, 
       xAxis: { 
        type: 'datetime' 
       }, 
       yAxis: { 
        title: { 
         text: 'Exchange rate' 
        } 
       }, 
       legend: { 
        enabled: false 
       }, 
       plotOptions: { 
        area: { 
         /*fillColor: { 
          linearGradient: { 
           x1: 0, 
           y1: 0, 
           x2: 0, 
           y2: 1 
          }, 
          stops: [ 
           [0, Highcharts.getOptions().colors[0]], 
           [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] 
          ] 
         },*/ 
         marker: { 
          radius: 2 
         }, 
         lineWidth: 1, 
         states: { 
          hover: { 
           lineWidth: 1 
          } 
         }, 
         threshold: null 
        } 
       }, 

       series: [{ 
        type: 'area', 
        name: 'USD to EUR', 
        data: data 
       }] 
      }); 
     }); 

无论JSON创建方法我使用,我有一个空白图表(根本没有数据,没有标签,什么也没有)。

E.g.我想:

foreach ($result as $key=>$value) { 

        $date = (strtotime($value['date_transaction']))*1000; //convert from Unix timestamp to JavaScript time 
     $point = $value['amountFinal']; 
     $data[] = "['$date', $point]"; 

     } 

echo json_encode($result); 

或者直接用于测试:

$data[] = "[Date.UTC(2015, 10, 16), 5]"; 
     $data[] = "[Date.UTC(2015, 10, 17), 7.5]"; 
     $data[] = "[Date.UTC(2015, 10, 18), 1440.0]"; 

     header("content-type: application/json"); 
     echo "data(".join($data,',').")"; 

感谢您的支持!

编辑:

这是在Firebug我的JSON,选项卡的 “答案”:

data(['1436918400000', 10.00],['1437004800000', 1415.00],['1437091200000', 1545.00],['1437177600000' 
, 1309.00],['1437350400000', 97.00],['1437436800000', 1625.00],['1437523200000', 1248.00],['1437609600000' 
, 752.00],['1437696000000', 2199.00],['1437782400000', 2370.00],['1437955200000', 1141.00],['1438041600000' 
, 1873.00],['1438128000000', 4275.00],['1438214400000', 430.00],['1438300800000', 840.00],['1438387200000' 
, 1994.00],['1438560000000', 903.00],['1438646400000', 1868.00],['1438732800000', 1097.00],['1438819200000' 
, 3408.00],['1438905600000', 5335.00],['1438992000000', 1131.00],['1439078400000', 1050.00],['1439164800000' 
, 2784.00],['1439251200000', 867.00],['1439337600000', 916.00],['1439424000000', 914.00],['1439510400000' 
, 773.00],['1439596800000', 1175.00],['1439769600000', 526.00],['1439856000000', 1014.00],['1439942400000' 
, 236.00],['1440028800000', 175.00],['1440115200000', 1954.00],['1440201600000', 549.00],['1440288000000' 
, 625.00],['1440374400000', 377.00],['1440460800000', 489.00],['1440547200000', 219.00],['1440633600000' 
, 428.00],['1440720000000', 272.00],['1440806400000', 363.00],['1440979200000', 755.00],['1441065600000' 
, 659.00],['1441152000000', 286.00],['1441238400000', 414.00],['1441324800000', 462.00],['1441411200000' 
, 2723.00],['1441497600000', 250.00],['1441584000000', 179.00],['1441670400000', 137.00],['1441756800000' 
, 384.00],['1441843200000', 380.00],['1441929600000', 391.00],['1442016000000', 1121.00],['1442188800000' 
, 424.00],['1442275200000', 1632.00],['1442361600000', 2489.00],['1442448000000', 677.00],['1442534400000' 
, 2870.00],['1442620800000', 1767.00],['1442707200000', 500.00],['1442793600000', 570.00],['1442880000000' 
, 767.00],['1442966400000', 784.00],['1443052800000', 1655.00],['1443139200000', 1211.00],['1443225600000' 
, 1279.00],['1443312000000', 260.00],['1443398400000', 392.00],['1443484800000', 1275.00],['1443571200000' 
, 3428.00],['1443657600000', 1912.00],['1443744000000', 1565.00],['1443830400000', 2473.00],['1443916800000' 
, 1145.00],['1444003200000', 1318.00],['1444089600000', 2969.00],['1444176000000', 4328.00],['1444262400000' 
, 3487.00],['1444348800000', 3785.00],['1444435200000', 1980.00],['1444521600000', 1075.00],['1444608000000' 
, 1232.00],['1444694400000', 2298.00],['1444780800000', 2628.00],['1444867200000', 3686.00],['1444953600000' 
, 656.00]) 

CONSOLE.LOG打印相同。

这是PHP代码,将打印数据:

foreach ($result as $key=>$value) { 

      $date = (strtotime($value['date_transaction']))*1000; //convert from Unix timestamp to JavaScript time 

      $point = $value['amountFinal']; 
      $data[] = "['$date', $point]"; 

     } 

     header("content-type: application/json"); 
     echo "data(".join($data,',').")"; 

这是空白图表的形象!

enter image description here

+2

'的console.log(数据)'... – epoch

+0

这里贴上您的JSON响应,并且如果JS控制台任何错误 –

+0

@NishithChaturvedi在js控制台中没有错误。来自Firebug的响应粘贴。 – sineverba

回答

1

的问题是,你的JSON是带引号的发送时间戳“”意味着它发送的字符串,而应该是一个数字。

它不应该像

['1436918400000', 10.00]OR "[1437004800000, 1415.00]" 

,但像这样\

[[1436918400000, 10.00],[1437004800000, 1415.00]] //and so on