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. http://stackoverflow.com/questions/17354163/dynamically-update-values-of-a-chartjs-chart — Noman, May 04 '15 at 07:32
change `window.myLine = new Chart(ctx).Line(lineChartData, { responsive: false });` to `var myLineChart = new Chart(ctx).Line(data); myLineChart.update();` — Noman, May 04 '15 at 07:35
sorry @Noman, not working - i'm getting this `TypeError: document.getElementById(...) is null var ctx = document.getElementById("ocanvas").getContext("2d");` — Sachin, May 04 '15 at 07:47
nothing happens - no benefit. However my PHP stops working. Many mysql errors arose. — Sachin, May 04 '15 at 07:59
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/76861/discussion-between-noman-and-user3779493). — Noman, May 04 '15 at 08:00

score 2 · Answer 1 · answered Feb 04 '16 at 07:14

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){
        //...
}});

score 0 · Answer 2 · answered May 04 '15 at 11:23

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!

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. — Sachin, May 05 '15 at 04:31
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. — Zaw Myo Htet, May 05 '15 at 06:30
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. — Sachin, May 05 '15 at 06:50
It will be helpful if you update your question with current standalone file. — Zaw Myo Htet, May 05 '15 at 07:43

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

2 Answers2