How to plot line chart using chart.js with ajax?

Question

I am trying to plot a line chart using chart.js with AJAX but not successful yet. The chart is plotting very fine on normal form submission and window onload event but when I use AJAX I am not able to plot it. Actually I don't know how to achieve it when the data comes from server after ajax call.

HTML:

<form method="post" action="" id="order_form">
<label for="selogtype">Graph Type:</label>
<select name="selogtype" id="selogtype">
<option value="total_order_value">Total Order Value</option>
<option value="total_order_qty">Total Order Quantity</option>
<option value="avg_order_value">Average Order Value</option>
<option value="avg_order_qty">Average Order Quantity</option>
</select>
<br /><br />
<label for="radodays">Duration:</label>
<input type="radio" name="radoduration" id="radodays" value="days" checked='checked' /><label for="radodays">Days</label>
<input type="radio" name="radoduration" id="radodates" value="dates" /><label for="radodates">Date Range</label>
<div id="div_odays">
<select name="seloduration">
<option value="week">Last 7 Days</option>
<option value="month">Last 30 Days</option>
<option value="curweek">Current Week</option>
<option value="curmonth">Current Month</option>
</select>
</div>
<div id="div_odate">
<span class="spanodate">Start Date:</span> <input type="text" name="txtosdate" id="txtosdate" value="" />&nbsp;&nbsp;&nbsp;
<span class="spanodate">End Date:</span> <input type="text" name="txtoedate" id="txtoedate" value="" />
</div>
<input type="submit" name="btnorderchart" id="btnorderchart" value="Draw Chart" />
</form>
<div id="outer_ocanvas" style="margin-top:25px;">
<canvas id="ocanvas" height="400" width="800"></canvas>
</div>

JS:

// ajax part of chart //
// order //
$("#order_form").submit(function(){
var btnorderchart = $("#btnorderchart").attr("name") + "=" + $("#btnorderchart").val();
    $.ajax({
        beforeSend: function(){ sendRequest("outer_ocanvas"); },
        cache: false,
        type: "POST",
        dataType: "json",
        url: "ajax/chart.php",
        data: $(this).serialize() + "&" + btnorderchart,
        success: function(data){
            //alert(data.labels);
            //alert(data.points);

        var lineChartData = {
            labels : "[" +  data.labels + "]",
            datasets : [
                {
                    label: "Recent Orders",
                    fillColor : "rgba(150,150,245,0.2)",
                    strokeColor : "rgba(0,0,255,1)",
                    pointColor : "rgba(220,220,220,1)",
                    pointStrokeColor : "#fff",
                    pointHighlightFill : "#fff",
                    pointHighlightStroke : "rgba(220,220,220,1)",
                    data : "[" +  data.points + "]",
                }
            ]

        }

        var ctx = document.getElementById("ocanvas").getContext("2d");
        window.myLine = new Chart(ctx).Line(lineChartData, {
            responsive: false
        });
        },
    });
return false;
});

In AJAX file chart.php (remote server file), I am sending the data through

    echo json_encode(array('labels' => $labels, 'points' => $points));

The data comes in correct format what we require in chart.js but I guess the below is the part which have something wrong:

        var ctx = document.getElementById("ocanvas").getContext("2d");
        window.myLine = new Chart(ctx).Line(lineChartData, {
            responsive: false
        });
        },

Because in normal way on page loading after form submission, we usually draw the chart by

window.onload = function(){
        var ctx = document.getElementById("ocanvas").getContext("2d");
        window.myLine = new Chart(ctx).Line(lineChartData, {
            responsive: false
        });

}

But in AJAX, i don't know how to do it after successful response from server.

EDIT:

After applying some solution given by some users on this website, my latest updated code in a standalone file is:

index.html:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>AJAX JSON Chart</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript">
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var lineChartData = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            label: "My First dataset",
            fillColor : "rgba(220,220,220,0.2)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(220,220,220,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        }
    ]

}

window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
    responsive: false
});
}

// ajax part of chart //
$(document).ready(function(e) {
    $("#frm1").submit(function(){
var canvas = document.getElementById('canvas');
   ctx = canvas.getContext('2d');

 //  ctx = $('#canvas').get(0).getContext("2d");

    var btnchart = $("#btnchart").attr("name") + "=" + $("#btnchart").val();
        $.ajax({
            //beforeSend: function(){ sendRequest("canvas"); },
            cache: false,
            type: "POST",
            dataType: "json",
            url: "ajax/chart.php",
            data: $(this).serialize() + "&" + btnchart,
            success: function(data){
                //alert(data.labels);
                //alert(data.points);
                renderGraph(data.labels, data.points, ctx);
            },
        });
    return false;
    });
});

var renderGraph = function (labels, points, ctx) {
       // var ctx = $("#canvas")[0].getContext("2d");

        var lineChartData = {
                        labels: "[" +  labels + "]",
                        datasets: [
                            {
                                label: "Recent Orders",
                                fillColor: "rgba(220,220,220,0.2)",
                                strokeColor: "rgba(220,220,220,1)",
                                pointColor: "rgba(220,220,220,1)",
                                pointStrokeColor: "#fff",
                                pointHighlightFill: "#fff",
                                pointHighlightStroke: "rgba(220,220,220,1)",
                                data: "[" +  points + "]", 
                            }
                        ]
                    };


        var myChart = new Chart(ctx)
                                .Line(lineChartData, {
                                        responsive: false,
                                        animation: false
                                        });
                                        //myChart.update(lineChartData);

    }

function sendRequest(id)
{
    $("#"+id).html('<div style="width:100px; margin:0 auto;"><img id="loader-img" alt="" src="images/preloader.gif" width="100" height="100" /></div>');
}


</script>
</head>
<body>
<div style="width:30%">
    <div>
        <canvas id="canvas" height="450" width="960"></canvas>
    </div>
</div>
<form id="frm1" name="frm1" method="post" action="">
<input type="submit" name="btnchart" id="btnchart" value="Draw Chart" />
</form>
</body>
</html>

chart.php:

<?php
$labels = array('29 April 2015', '30 April 2015', '1 May 2015', '2 May 2015', '3 May 2015', '4 May 2015', '5 May 2015');
$points = array('100', '250', '10', '35', '73', '0', '25');
echo json_encode(array('labels' => $labels, 'points' => $points));
?>

On first time page loads, the output is:

enter image description here

After clicking button "Draw Chart", the output comes through AJAX is:

enter image description here

But when i hover my mouse over the image, it automatically converts into first image. Strange!!!

this will help you. stackoverflow.com/questions/17354163/… — Noman
– Noman, Commented May 4, 2015 at 7:32
change window.myLine = new Chart(ctx).Line(lineChartData, { responsive: false }); to var myLineChart = new Chart(ctx).Line(data); myLineChart.update(); — Noman
– Noman, Commented May 4, 2015 at 7:35
sorry @Noman, not working - i'm getting this TypeError: document.getElementById(...) is null var ctx = document.getElementById("ocanvas").getContext("2d"); — Sachin
– Sachin, Commented May 4, 2015 at 7:47

Dejan · Accepted Answer · 2016-02-04 07:14:19Z

2

I know this is old, but i had the same problem with my ajax implementation and i found the solution.

adding:

dataType: 'json'

will fix this problem. example request

$.ajax({url: "chartData.php",
    async: false,
    dataType: 'json',
    success: function(result){
        //...
}});

answered Feb 4, 2016 at 7:14

Dejan

597 bronze badges

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

Comments

Zaw Myo Htet · Accepted Answer · 2015-05-04 11:23:28Z

0

You should use return instead of echo in your php script. Assume your php script will return right data.

In your html.

<canvas id="request" width="450" height="200"></canvas>

In jquery,

$(document).ready(function(){
    $.ajax({
               type: "POST",
                dataType: "json",
                url: "ajax/chart.php",
                data: //data to send,
                beforeSend: function(){ 
                    // Do staff before send
                },
                success: function(data){
                    renderGraph(data.labels, data.points);
                }
            });
});

var renderGraph = function (labels, points) {

        var canvas = $("#request")[0].getContext("2d");

        var data = {
                        labels: labels,
                        datasets: [
                            {
                                label: "Recent Orders",
                                fillColor: "rgba(220,220,220,0.2)",
                                strokeColor: "rgba(220,220,220,1)",
                                pointColor: "rgba(220,220,220,1)",
                                pointStrokeColor: "#fff",
                                pointHighlightFill: "#fff",
                                pointHighlightStroke: "rgba(220,220,220,1)",
                                data: points 
                            }
                        ]
                    };

        var myChart = new Chart(canvas)
                                .Line(data, {
                                        responsive: true,
                                        animation: true
                                        });

    }

Hope it will help!

answered May 4, 2015 at 11:23

Zaw Myo Htet

5402 gold badges7 silver badges23 bronze badges

6 Comments

Sachin Over a year ago

oh still not working. doing with your way, i got TypeError: $(...)[0] is undefined var canvas = $("#ocanvas")[0].getContext("2d"); Moreover nothing returned from server if return statement is used. we need echo.

Zaw Myo Htet Over a year ago

Did you load jquery properly?

Sachin Over a year ago

yes sure. other things relying on jQuery are working.

Zaw Myo Htet Over a year ago

Actually, the above script working properly in my app. I have no other way. Please check your html, jquery and other third party library agian.

Sachin Over a year ago

apart from the project, something has started to work in standalone file. But the image drawn is blank with no line graph and changes to original graph when hovering over.

|

Collectives™ on Stack Overflow

How to plot line chart using chart.js with ajax?

2 Answers 2

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related