javascript - amcharts - Graph not displaying valuesUse ajax to plot amcharrtHow to plot amchart by querying database - Stack Ove

admin•2025-04-19 10:06:04•questions•阅读1

Here my HTML & javascript code to get amcharts plot goingI make a call to the database, retrieve th

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 ing 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=".js"></script>
        <script src=".js"></script>
        <script src=".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=".js"></script>
        <script src=".js"></script>
        <script src=".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>

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.

<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./lib/3/amcharts.js"></script>
        <script src="http://www.amcharts./lib/3/serial.js"></script>
        <script src="http://www.amcharts./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./lib/3/amcharts.js"></script>
        <script src="http://www.amcharts./lib/3/serial.js"></script>
        <script src="http://www.amcharts./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>

Share Improve this question edited Aug 29, 2015 at 18:46 asked Aug 27, 2015 at 18:01 User12345 3251 gold badge7 silver badges20 bronze badges

When Amcharts.ready() runs, your ajax response might not be available. You can test by doing an alert inside the ready() function – Dinesh Commented Aug 27, 2015 at 18:07
Hello Dinesh - The alert inside ready function displays the result – 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 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 Commented Aug 28, 2015 at 7:24

Add a ment |

2 Answers 2

Sorted by: Reset to default 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()

chart.dataProvider = eval(data) is true

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744836678a4596304.html

admin

questions
plugin development - How to use PanelColorSettings in custom Gutenberg block?
I'm working on a custom Gutenberg block. I have used <PanelBody> <BaseControl> and <ColorPalette>
admin
24分钟前
10
questions
javascript - Kendo UI kendo is undefined - Stack Overflow
I'm just starting to use Kendo UI and I'm having trouble getting one of the demos to work. I
admin
24分钟前
00
questions
Using a PHP form, get the page title or any other element in the sent e-mail
I am using a PHP form which I add in a page as a shortcode. I would like the user that receives the e-mail to also recei
admin
23分钟前
10
questions
Add Conditions to Password Validation JavaScript - Stack Overflow
I need to add some further validation to this password code. I created a if statement where if any of t
admin
21分钟前
20
questions
javascript - Rotate object around world axis - Stack Overflow
I am trying to rotate an object around the world axis. I've found this question: How to rotate a o
admin
21分钟前
10
questions
Where does WordPress store a list of Super Admins?
I had to switch around my Super Admins. I did it through the MySQL tables directly.I now have 1 official Super Admin for
admin
20分钟前
20
questions
javascript - Mapbox GL JS refresh layer - Stack Overflow
I'm using Chroma.js to style a Mapbox choropleth map. I do this by storing in a variable dataStyle
admin
18分钟前
00
questions
plugins - a weird attribute on every html tag
me and my friend working on a Wordpress site but we see it differently on our machines,He sees a weird attribute wfd-id=
admin
17分钟前
00
questions
javascript - How can I detect AJAX node insertion without using DOM mutation events? - Stack Overflow
I'm trying to write a Greasemonkey script that alters keywords in Twitter posts. Trouble is, the c
admin
15分钟前
00
questions
javascript - How to write a configuration file for chrome extension using a local script - Stack Overflow
I have a chrome extension (intended to be used by panies internally) that needs to have user specific c
admin
11分钟前
00
questions
javascript - How to make a Redis (Bull) queue in a Node.js environment that's deployed to Heroku? - Stack Overflow
I've looked through all of the documentation, and I'm having some trouble finding examples of
admin
10分钟前
00
questions
wp query - Max Posts and Memory Limit
So I have a custom post type which uses ACF Metaboxes that contains over 750 posts and grwoing.I got the infamous whit
admin
9分钟前
10
questions
javascript - How to validate Date in form onblur - Stack Overflow
function validatedate(inputText) { var thsid = $(inputText).attr('id');var dateformat = ^(0?[
admin
8分钟前
00
questions
Order Admin sub-menu items?
I am adding items to a CPT Admin menu using add_submenu_page which works great,but they are added to the bottom of the
admin
7分钟前
10
questions
jquery - javascript - dynamic variables - Stack Overflow
Hi I am trying to make dynamic variables but it is saying `variable v0 (through to v5) is not defined.t
admin
6分钟前
10
questions
wp query - WP_Query paginate with one term per page?
We have a site with an online newslettermagazine using a custom post type (newsletter).What we're trying to do is
admin
4分钟前
10
questions
javascript - Client Side Form Validation. - Stack Overflow
So I have been trying to do client side Form Validation. I am trying to validate the first name and the
admin
4分钟前
10
questions
php - Check the database for a postmeta field
So I'm trying to use the metadata exists call to check the WordPress database and see if some metadata exists.For s
admin
3分钟前
10
questions
javascript - jQuery validation success show gif loader - Stack Overflow
I have using jQuery validation plug in for one of my forms. The validation rules are working fine.But m
admin
43秒前
00
questions
metabox - custom meta box data not saved
After two day of reasearch and questions without answer, today someone has suggested me a way to add a custom metabox fi
admin
30秒前
00

发表回复

评论列表（0条）

暂无评论

javascript - amcharts - Graph not displaying valuesUse ajax to plot amcharrtHow to plot amchart by querying database - Stack Ove

UPDATED CODE/WORKING SOLUTION

UPDATED CODE/WORKING SOLUTION

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - amcharts - Graph not displaying valuesUse ajax to plot amcharrtHow to plot amchart by querying database - Stack Ove

UPDATED CODE/WORKING SOLUTION

UPDATED CODE/WORKING SOLUTION

2 Answers 2

相关推荐

发表回复

评论列表（0条）

联系我们

400-800-8888