amcharts - Graph not displaying values/Use ajax to plot amcharrt/How to plot amchart by querying database

Question

Here my HTML & javascript code to get amcharts plot going

I make a call to the database, retrieve the results by converting it to a json format in PHP & then pass it to a graph to display.

The chartData variable below has the output that the database query returns. when I statically assign the expected output to chartData variable, the graph plots. However, when I assign the variable "sql_resp" which the responseText value of the json retuned, the graph says "undefined" values.

I've used web tools such as firebug to be 100% sure that the json is indeed coming back in the result. This is the first time am using amcharts. Can someone please help me understand what I'm doing wrong.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="css/dashboard.css">
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/jsapi.js"></script>
        <script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
        <script src="http://www.amcharts.com/lib/3/serial.js"></script>
        <script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
        <script type="text/javascript">
            var db_query = <?php echo json_encode($$db_query_1) ?>;
            var sql_resp = $.ajax({
                type: 'POST',       
                url: "mySQL.php",
                data: {'db_q': db_query},
                dataType: 'html',
                context: document.body,
                global: false,
                async:false,
                success: function(data) {
                    return data;
                }
            }).responseText;

            alert(sql_resp);


var chartData = [{"OCCUR_DATE":"2015-06-01","FREQ":5296},{"OCCUR_DATE":"2015-06-02","FREQ":4880},{"OCCUR_DATE":"2015-06-03","FREQ":4721},{"OCCUR_DATE":"2015-06-04","FREQ":3322},{"OCCUR_DATE":"2015-06-05","FREQ":1909},{"OCCUR_DATE":"2015-06-06","FREQ":1422},{"OCCUR_DATE":"2015-06-07","FREQ":2722},{"OCCUR_DATE":"2015-06-08","FREQ":7505},{"OCCUR_DATE":"2015-06-09","FREQ":4920},{"OCCUR_DATE":"2015-06-10","FREQ":3434},{"OCCUR_DATE":"2015-06-11","FREQ":4637},{"OCCUR_DATE":"2015-06-12","FREQ":2025},{"OCCUR_DATE":"2015-06-13","FREQ":1597},{"OCCUR_DATE":"2015-06-14","FREQ":2241},{"OCCUR_DATE":"2015-06-15","FREQ":4606},{"OCCUR_DATE":"2015-06-16","FREQ":1980},{"OCCUR_DATE":"2015-06-17","FREQ":4266},{"OCCUR_DATE":"2015-06-18","FREQ":4222},{"OCCUR_DATE":"2015-06-19","FREQ":2162},{"OCCUR_DATE":"2015-06-20","FREQ":1555},{"OCCUR_DATE":"2015-06-21","FREQ":2694},{"OCCUR_DATE":"2015-06-22","FREQ":3098},{"OCCUR_DATE":"2015-06-23","FREQ":4529},{"OCCUR_DATE":"2015-06-24","FREQ":4726},{"OCCUR_DATE":"2015-06-25","FREQ":4923},{"OCCUR_DATE":"2015-06-26","FREQ":2278},{"OCCUR_DATE":"2015-06-27","FREQ":1671},{"OCCUR_DATE":"2015-06-28","FREQ":2530},{"OCCUR_DATE":"2015-06-29","FREQ":5875},{"OCCUR_DATE":"2015-06-30","FREQ":4769},{"OCCUR_DATE":"2015-07-01","FREQ":5310},{"OCCUR_DATE":"2015-07-02","FREQ":4728},{"OCCUR_DATE":"2015-07-03","FREQ":1553},{"OCCUR_DATE":"2015-07-04","FREQ":898},{"OCCUR_DATE":"2015-07-05","FREQ":3693},{"OCCUR_DATE":"2015-07-06","FREQ":5355},{"OCCUR_DATE":"2015-07-07","FREQ":4942},{"OCCUR_DATE":"2015-07-08","FREQ":4877},{"OCCUR_DATE":"2015-07-09","FREQ":4802},{"OCCUR_DATE":"2015-07-10","FREQ":2132},{"OCCUR_DATE":"2015-07-11","FREQ":879},{"OCCUR_DATE":"2015-07-12","FREQ":1783},{"OCCUR_DATE":"2015-07-13","FREQ":5787},{"OCCUR_DATE":"2015-07-14","FREQ":5355},{"OCCUR_DATE":"2015-07-15","FREQ":5208},{"OCCUR_DATE":"2015-07-16","FREQ":4969},{"OCCUR_DATE":"2015-07-17","FREQ":2260},{"OCCUR_DATE":"2015-07-18","FREQ":1668},{"OCCUR_DATE":"2015-07-19","FREQ":3116},{"OCCUR_DATE":"2015-07-20","FREQ":6058},{"OCCUR_DATE":"2015-07-21","FREQ":5144},{"OCCUR_DATE":"2015-07-22","FREQ":5906},{"OCCUR_DATE":"2015-07-23","FREQ":5953},{"OCCUR_DATE":"2015-07-24","FREQ":2807},{"OCCUR_DATE":"2015-07-25","FREQ":1703},{"OCCUR_DATE":"2015-07-26","FREQ":1996},{"OCCUR_DATE":"2015-07-27","FREQ":5646},{"OCCUR_DATE":"2015-07-28","FREQ":5283},{"OCCUR_DATE":"2015-07-29","FREQ":5955},{"OCCUR_DATE":"2015-07-30","FREQ":5867},{"OCCUR_DATE":"2015-07-31","FREQ":2774},{"OCCUR_DATE":"2015-08-01","FREQ":2192},{"OCCUR_DATE":"2015-08-02","FREQ":4069},{"OCCUR_DATE":"2015-08-03","FREQ":5712},{"OCCUR_DATE":"2015-08-04","FREQ":5774},{"OCCUR_DATE":"2015-08-05","FREQ":5058},{"OCCUR_DATE":"2015-08-06","FREQ":5746},{"OCCUR_DATE":"2015-08-07","FREQ":2884},{"OCCUR_DATE":"2015-08-08","FREQ":1494},{"OCCUR_DATE":"2015-08-09","FREQ":3931},{"OCCUR_DATE":"2015-08-10","FREQ":5834},{"OCCUR_DATE":"2015-08-11","FREQ":6811},{"OCCUR_DATE":"2015-08-12","FREQ":5076},{"OCCUR_DATE":"2015-08-13","FREQ":4542},{"OCCUR_DATE":"2015-08-14","FREQ":87},{"OCCUR_DATE":"2015-08-15","FREQ":1726},{"OCCUR_DATE":"2015-08-16","FREQ":1159},{"OCCUR_DATE":"2015-08-18","FREQ":3}];

    AmCharts.ready(function() {
            var chart = new AmCharts.AmSerialChart();
            chart.dataProvider = chartData;
            chart.categoryField = "OCCUR_DATE";

            var graph = new AmCharts.AmGraph();
            graph.valueField = "FREQ";
            graph.type = "smoothedLine";
            graph.theme = "light";
            chart.addGraph(graph);

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

        </script>          
    </head>
<body>
    <div> GRAPH HERE </div>
    <div id="chartdiv" style="width: 640px; height: 400px;"></div>
</body>
</html>

UPDATED CODE/WORKING SOLUTION

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/jsapi.js"></script>
        <script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
        <script src="http://www.amcharts.com/lib/3/serial.js"></script>
        <script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
        <script type="text/javascript">
            var db_query = <?php echo json_encode($db_query_1) ?>;
            var chart;
            var graph;

                /* chart initialization */
                var chart = AmCharts.makeChart("plot1", {
                    type: "serial",
                    categoryField: "OCCUR_DATE",
                    graphs: [{
                        type: "smoothedLine",
                        theme: "light",
                        valueField: "FREQ"
                    }]
                })

            $.ajax({
                type: 'POST',       
                url: "mySQL.php",
                data: {'db_que': db_query},
                dataType: 'json',
                context: document.body,
                global: false,
                async:true,
                success: function(data) {
                    //alert(data);
                    chart.dataProvider = data;
                    chart.validateNow();
                }
            });
        </script>          
    </head>
<body>
    <div> GRAPH HERE </div>
    <div id="plot1" style="width: 640px; height: 400px;"></div>
</body>
</html>

When Amcharts.ready() runs, your ajax response might not be available. You can test by doing an alert *inside* the ready() function — Dinesh, Aug 27 '15 at 18:07
Hello Dinesh - The alert inside ready function displays the result — User12345, Aug 27 '15 at 18:30
hmm, that makes it a more interesting problem. Sometimes there is an outer object wrapper around the array of objects. Also worth checking - are you getting a JSON object or a stringified JSON which you need to JSON.parse(). In alert they would tend to look the same but on console.log one can get better picture. Or, just `typeof xyz` — Dinesh, Aug 27 '15 at 21:58
Please consider using the JSON style to initialize your chart. It's far better write- and readable. [related](http://stackoverflow.com/questions/28598274/what-is-difference-between-amcharts-makechart-and-new-amcharts-amserialchart/28607107#28607107) — gerric, Aug 28 '15 at 07:24

gerric · Accepted Answer · 2015-08-29T01:53:40.520

5

You can create the chart first and assign the values after getting the results from an asynchronous request to your DB.

Try this:

/* chart initialization */
var chart = AmCharts.makeChart("chartdiv", {
    type: "serial",
    categoryField: "OCCUR_DATE",
    graphs: [{
        type: "smoothedLine",
        theme: "light",
        valueField: "FREQ"
    }]
})

/* Asynchronous request */
var db_query = <?php echo json_encode($$db_query_1) ?>;

$.ajax({
    type: 'POST',
    url: "mySQL.php",
    data: {'db_q': db_query},
    dataType: 'json',
    context: document.body,
    global: false,
    async: true,
    success: function(data) {
        chart.dataProvider = data;
        chart.validateNow();
    }
});

Edit: Changed the request datatype to JSON, so that you don't have to use eval()

edited Aug 29 '15 at 01:53

answered Aug 28 '15 at 07:37

gerric

2,297
1
14
32

Hello Gerric - Thank you. The graph still doesn't appear still. The data is coming back fine from the SQL. The alert(data) shows that the data is doming back fine. I've updated the question with the new code under "UPDATED CODE" section. Could you please help me? – User12345 Aug 28 '15 at 19:32
Hello Gerric - All that I had to do was change chart.dataProvider = data; to chart.dataProvider = eval(data); I've updated the question with he answer so that my answer doesn't get marked as an answer. Thank you very very much for the efforts & time. It's taken me about a week to figure this out now. Thank you again. – User12345 Aug 28 '15 at 20:12
@user5274065 check out the edit. should work without the `eval()` now. – gerric Aug 29 '15 at 01:54
Thankyou Gerrric. I have another question which I've posted afresh at http://stackoverflow.com/questions/32283480/amchart-pass-parameters-to-properties-reuse-properties-across-graphs. WOuld you be able to please help me if you can – User12345 Aug 29 '15 at 06:55
it was so much help ! Thank you. – MFARKAN Dec 07 '18 at 07:03

score 0 · Answer 2 · answered Jun 07 '21 at 06:45

0

chart.dataProvider = eval(data) is true

answered Jun 07 '21 at 06:45

ali mirzaei yazdi

29
7

Please add some explanation – Sfili_81 Jun 07 '21 at 07:13

amcharts - Graph not displaying values/Use ajax to plot amcharrt/How to plot amchart by querying database

UPDATED CODE/WORKING SOLUTION

2 Answers2

Linked