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
– Dinesh, Commented Aug 27, 2015 at 18:07
Hello Dinesh - The alert inside ready function displays the result — User12345
– User12345, Commented Aug 27, 2015 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
– Dinesh, Commented Aug 27, 2015 at 21:58
Please consider using the JSON style to initialize your chart. It's far better write- and readable. related — gerric
– gerric, Commented Aug 28, 2015 at 7:24

gerric · Accepted Answer · 2015-08-29 01:53:40Z

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, 2015 at 1:53

answered Aug 28, 2015 at 7:37

gerric

2,2971 gold badge16 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

User12345 Over a year ago

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 Over a year ago

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.

gerric Over a year ago

@user5274065 check out the edit. should work without the eval() now.

User12345 Over a year ago

Thankyou Gerrric. I have another question which I've posted afresh at stackoverflow.com/questions/32283480/…. WOuld you be able to please help me if you can

ali mirzaei yazdi · Accepted Answer · 2021-06-07 06:45:19Z

0

chart.dataProvider = eval(data) is true

answered Jun 7, 2021 at 6:45

ali mirzaei yazdi

298 bronze badges

1 Comment

law_81 Over a year ago

Please add some explanation

Collectives™ on Stack Overflow

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

UPDATED CODE/WORKING SOLUTION

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

UPDATED CODE/WORKING SOLUTION

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related