Skip to content

Instantly share code, notes, and snippets.

@msdzero
Created March 3, 2017 01:08
Show Gist options
  • Save msdzero/d663077bf3fa9d35d133b5dc49942373 to your computer and use it in GitHub Desktop.
Save msdzero/d663077bf3fa9d35d133b5dc49942373 to your computer and use it in GitHub Desktop.
Chart.js example using Jquery Ajax to populate labels and data
<canvas id="myChart" width="400" height="100"></canvas>
<script src="/js/Chart.min.js"></script>
<script>
$(function () {
var ctx = document.getElementById("myChart").getContext("2d");
// examine example_data.json for expected response data
var json_url = "example_data.json";
// draw empty chart
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [],
spanGaps: false,
}
]
},
options: {
tooltips: {
mode: 'index',
intersect: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
ajax_chart(myChart, json_url);
// function to update our chart
function ajax_chart(chart, url, data) {
var data = data || {};
$.getJSON(url, data).done(function(response) {
chart.data.labels = response.labels;
chart.data.datasets[0].data = response.data.quantity; // or you can iterate for multiple datasets
chart.update(); // finally update our chart
});
}
});
</script>
{
"labels": ["January", "February", "March", "April", "May", "June", "July"],
"data": {
"quantity": [65, 59, 80, 81, 56, 55, 40]
}
}
@unluckychild
Copy link

unluckychild commented Dec 10, 2021

How to add onchange select? Im trying to add

select id="pies" onchange="ajax_chart()

and then pass data
var x = document.getElementById("pies").value;

var json_url = "url.php?q=" + x;

But it works only on first change.

@msdzero
Copy link
Author

msdzero commented Dec 11, 2021

remove onchange="ajax_chart()" from your select tag
then try this, assuming your chart var is myChart:

document.getElementById('pies').onchange = e => {
    var x = e.target.value;
    var json_url = "url.php?q=" + x;

    fetch(json_url)
        .then(response => response.json())
        .then(result => {
            myChart.data.labels = result.labels;
            myChart.data.datasets[0].data = result.data.quantity; // or you can iterate for multiple datasets
            myChart.update(); 
        }
}

@unluckychild
Copy link

unluckychild commented Dec 11, 2021

Thank you for quick responding. I tried to add your code there but that makes the page blank.

Heres fulls script:

select id="pies"
options

$(function () {
    var ctx = document.getElementById("myChart").getContext("2d");
        
    var json_url = "url.php";

    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [],
            datasets: [
                {
                    label: "My First dataset",
                    data: [],
                }
            ]
        },
    });

    ajax_chart(myChart, json_url);


    function ajax_chart(chart, url, data) {
        var data = data || {};

        $.getJSON(url, data).done(function(response) {
            chart.data.labels = response.labels;
            chart.data.datasets[0].data = response.data.quantity; // or you can iterate for multiple datasets
            chart.update(); // finally update our chart
        });
    }
   
document.getElementById('pies').onchange = e => {
    var x = e.target.value;
    var json_url = "url.php?q=" + x;

    fetch(json_url)
        .then(response => response.json())
        .then(result => {
            myChart.data.labels = result.labels;
            myChart.data.datasets[0].data = result.data.quantity; // or you can iterate for multiple datasets
            myChart.update(); 
        }
}    
    
});

@unluckychild
Copy link

unluckychild commented Dec 11, 2021

finally got it:

select onchange myFunction()

function myFunction() {
  var x = document.getElementById("pies").value;
 
    var json_url = "url.php?q=" + x;
    var data = data || {};

        $.getJSON(json_url, data).done(function(response) {
            bar.data.labels = response.labels;
            bar.data.datasets[0].data = response.data.quantity; // or you can iterate for multiple datasets
            bar.update(); // finally update our chart
        });        
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment