Labeling and Data (ChartJS)

by

👍:0

$.get does not evaluate to a return value like a normal function call.

When the data is received from http://velocity.data.wpengine.com:3000/tickets/, your callback function gets called. In your case that is 

 function(data){ alert(JSON.stringify(data));}

You have access to the returned data inside this callback function. And you’re just alerting it. Which is why you simply get an alert alone. You need to move your chart drawing code into this call back function. Something like

 window.onload = function () {
     $.get("http://velocity.data.wpengine.com:3000/tickets/list/", function(data){
        var lineChartData = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [{
                label: "My First dataset",
                fillColor: "rgba(100,200,244,0.2)",
                strokeColor: "rgba(100,200,244,1)",
                pointColor: "rgba(200,255,255,.7)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: data,
            },
            {
                label: "My Second dataset",
                fillColor: "rgba(100,200,244,0)",
                strokeColor: "rgba(100,200,244,0)",
                pointColor: "rgba(200,255,255,0)",
                pointStrokeColor: "rgba(255,255,255,0)",
                pointHighlightFill: "#rgba(255,255,255,0)",
                pointHighlightStroke: "rgba(220,220,220,0)",
                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
            }]
        };

        var ctx1 = document.getElementById("chart1").getContext("2d");
        window.myLine = new Chart(ctx1).Line(lineChartData, {
            showScale: false,
            pointDot: true,
            responsive: true

        });

        var ctx2 = document.getElementById("chart2").getContext("2d");
        window.myLine = new Chart(ctx2).Line(lineChartData, {
            responsive: true
        });

        ....

Leave a comment