Using database data for amstockcharts

Question

I am trying to use database data to draw charts with amstockcharts. However i keep failing at the moment. Here is my code:

<script type="text/javascript">
  <?php
     $conn = new PDO ("pgsql:host=localhost port=5432 dbname=dbase", "id", "pass");

     $sql = "SELECT id, time, speed, fuel_level FROM data WHERE id = 294 AND
     time BETWEEN '2013-05-11' AND '2013-05-12' LIMIT 100;"; 
     $date = array();
     $fuel = array();
     $speed = array();
     $counter = 0;
     $query = $conn->query($sql);
     while($result = $query->fetch(PDO::FETCH_ASSOC))
     {
       array_push($date, $result['time']);
       array_push($fuel, $result['fuel']);
       array_push($speed, $result['speed']);
     }
     $jsDate = json_encode($date);
     $jsFuel = json_encode($fuel);
     $jsSpeed = json_encode($speed);
     $conn = null;
     echo "var date = ".$jsDate.";\n";
     echo "var fuel = ".$jsFuel.";\n";
     echo "var speed = ".$jsSpeed.";\n";
  ?>
  var dataObject = [];
  var object;
  for(var i=0; i<100; i++)
  {
     object = { date:date[i], fuel:fuel[i], speed:speed[i] };
     dataObject.push(object);
  }
  AmCharts.ready(function()
  {
     var chart = new AmCharts.AmStockChart();
     chart.pathToImages = "amcharts/images/";

     var dataSet = new AmCharts.DataSet();
     dataSet.dataProvider = dataObject;
     dataSet.fieldMappings = [{fromField:"speed", toField:"speed"}];   
     dataSet.categoryField = "date";
     dataSet.color = "#7f8da9";
     dataSet.title = "Test";
     chart.dataSets = [dataSet];
     chart.mainDataSet = dataSet;

     var stockPanel = new AmCharts.StockPanel();
     stockPanel.title = "Chart";
     chart.panels = [stockPanel];

     var legend = new AmCharts.StockLegend();
     stockPanel.stockLegend = legend;   

     var panelsSettings = new AmCharts.PanelsSettings();
     panelsSettings.startDuration = 1;
     chart.panelsSettings = panelsSettings;   

     var graph = new AmCharts.StockGraph();
     graph.valueField = "speed";
     graph.type = "column";
     graph.title = "speed";
     graph.fillAlphas = 1;
     stockPanel.addStockGraph(graph);

     var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
     categoryAxesSettings.dashLength = 5;
     chart.categoryAxesSettings = categoryAxesSettings;

     var valueAxesSettings = new AmCharts.ValueAxesSettings();
     valueAxesSettings .dashLength = 5;
     chart.valueAxesSettings  = valueAxesSettings;

     var chartScrollbarSettings = new AmCharts.ChartScrollbarSettings();
     chartScrollbarSettings.graph = graph;
     chartScrollbarSettings.graphType = "line";
     chart.chartScrollbarSettings = chartScrollbarSettings;

     var chartCursorSettings = new AmCharts.ChartCursorSettings();
     chartCursorSettings.valueBalloonsEnabled = true;
     chart.chartCursorSettings = chartCursorSettings;
     chart.write('chartDiv');
   });
 </script>

Everything seems fine until i push data to dataObject variable, because the chart displays, but the graph is not drawn nor the axis are displayed.

Answer 1

Replace:

echo "var date = ".$jsDate.";\n";

with:

echo “date: (new Date('" .str_replace('-','/',$jsDate). "')),\n";

It should help you.