I am working on ordering and displaying users with most activities . received from server, i want to display all data as a graph using charts.js. The server data i.e. "clara , 4 activities" , "joe, 7 activities". etc...
1 Answer
Hope this helps
var ctx = document.getElementById("myChart").getContext('2d');
var data = [4, 7];
var labels = ["clara", "joe"]
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Activities',
data: data,
}]
},
});
Using ajax
$.ajax({
url: "Your url",
success: function (result) {
var data = [];
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: result.labels,
datasets: [{
label: 'Activities',
data: result.data,
}]
},
});
}
});
You have to pass a dataset like this from backend,
{
"chartData": {
"labels": [
"clara",
"joe"
],
"data": [
4,
7
]
}
}
Also here is a nice Tutorial about this.
5 Comments
Kris
thank you but i try what you send abd it works , but now the "var data = [4,7] " : is what i want dynamically from server
vimuth
For that you may have to call
$.ajax and call var myChart = new Chart(ctx,.. inside success method.Kris
send me a screen please, one of how you transform data in JSON and another to show me how you call it in the chart
vimuth
The tutorial I linked have a complete description on how to do that. Think it will more descriptive and helpful
vimuth
Sorry I was busy earlier. Added a solution. Please add desired url instead of Your url