How to get the data using dataLoader in amCharts?

Question

I'm using amCharts library (it's a JavaScript library for loading data in charts) to extract the data from mySQL database, and display it using a Stock Chart.

I found a complete tutorial here:

http://www.amcharts.com/tutorials/your-first-stock-chart/

They use static data that they have created in the code, however I want to use my own data by extracting it from database in JSON format.

The PHP file to include: json_encode.php

<?php
 include("data.php");
 echo  json_encode($rows);
?>

The output of this file look like this:

[{"date":"2014-01-19 00:00:00","value":"15"},{"date":"2014-04-19 00:00:00","value":"8"},{"date":"2014-05-19 00:00:00","value":"54"},{"date":"2014-07-19 00:00:00","value":"5"},{"date":"2014-09-19 00:00:00","value":"24"},{"date":"2014-11-19 00:00:00","value":"18"},{"date":"2015-01-19 00:00:00","value":"36"},{"date":"2015-02-19 00:00:00","value":"10"},{"date":"2015-03-11 16:54:55","value":"7"},{"date":"2015-03-19 00:00:00","value":"45"},{"date":"2015-04-19 00:00:00","value":"17"},{"date":"2015-05-19 00:00:00","value":"4"},{"date":"2015-06-19 00:00:00","value":"27"}]

The complete code from the tutorial:

<script type="text/javascript">

        var chartData= [
            {date: new Date(2011, 5, 1, 0, 0, 0, 0), val:10},
            {date: new Date(2011, 5, 2, 0, 0, 0, 0), val:11},
            {date: new Date(2011, 5, 3, 0, 0, 0, 0), val:12},
            {date: new Date(2011, 5, 4, 0, 0, 0, 0), val:11},
            {date: new Date(2011, 5, 5, 0, 0, 0, 0), val:10},
            {date: new Date(2011, 5, 6, 0, 0, 0, 0), val:11},
            {date: new Date(2011, 5, 7, 0, 0, 0, 0), val:13},
            {date: new Date(2011, 5, 8, 0, 0, 0, 0), val:14},
            {date: new Date(2011, 5, 9, 0, 0, 0, 0), val:17},
            {date: new Date(2011, 5, 10, 0, 0, 0, 0), val:13}
        ];

        AmCharts.ready(function() {
            var chart = new AmCharts.AmStockChart();
            chart.pathToImages = "amcharts/images/";

            var dataSet = new AmCharts.DataSet();
            dataSet.dataProvider = chartData;
            dataSet.fieldMappings = [{fromField:"val", toField:"value"}];   
            dataSet.categoryField = "date";          
            chart.dataSets = [dataSet];

            var stockPanel = new AmCharts.StockPanel();
            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 = "value";
            graph.type = "column";
            graph.title = "MyGraph";
            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;

            var periodSelector = new AmCharts.PeriodSelector();
            periodSelector.periods = [{period:"DD", count:1, label:"1 day"},
                                      {period:"DD", selected:true, count:5, label:"5 days"},
                                      {period:"MM", count:1, label:"1 month"},
                                      {period:"YYYY", count:1, label:"1 year"},
                                      {period:"YTD", label:"YTD"},
                                      {period:"MAX", label:"MAX"}];                
            chart.periodSelector = periodSelector;

            chart.write("chartdiv");
        });        

So instead of this line:

dataSet.dataProvider = chartData;

I want to use dataLoader to load the data from PHP in JSON format:

dataSet.dataloader =  {
  "url": "json_encode.php"
},

Maybe the declaration of dataLoader is not correct because it doesn't work.

Any help will be appreciated :)

Answer 1

Although it's a bit late, just in case anyone comes across this question...

Follow the tutorial given by AmCharts for DataLoader, all steps are described clearly and there even is an example for Stock charts. https://www.amcharts.com/tutorials/using-data-loader-plugin/