Chart using jquery Chart.js

Shiv Kumar Yadav

8y4.6k

Hi,

I am using chart.js for creating chart in asp.net whit the help of ajax method i am got value through ajax.

i have tried everything but it can not create chart can any one help me

this my code in jquery

$(document).ready(function () {
var lbl = [];
var dat = [];
$.ajax({
url: "../Home/getData",
type: "Post",
dataType: "json",
success: function (data) {
$.each(data, function (key, value) {
lbl.push(value.Item);
dat.push(value.Price);
//alert("Item" + lbl + " Price" + dat);
})
var myJSON = JSON.stringify(lbl);
var xyz = [lbl];
var dat1 = [dat];
var ctx = document.getElementById("lineChart1");
var lineChart = new Chart(ctx, {
type: 'line',
data: {
labels: xyz,
//["January", "February", "March", "April", "May", "June", "July"],
//$.parseJSON(lbl),
datasets: [{
label: "My First dataset",
backgroundColor: "rgba(38, 185, 154, 0.31)",
borderColor: "rgba(38, 185, 154, 0.7)",
pointBorderColor: "rgba(38, 185, 154, 0.7)",
pointBackgroundColor: "rgba(38, 185, 154, 0.7)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointBorderWidth: 1,
data: [dat1]
}, {
label: "My Second dataset",
backgroundColor: "rgba(3, 88, 106, 0.3)",
borderColor: "rgba(3, 88, 106, 0.70)",
pointBorderColor: "rgba(3, 88, 106, 0.70)",
pointBackgroundColor: "rgba(3, 88, 106, 0.70)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(151,187,205,1)",
pointBorderWidth: 1,
data: [dat1]
}]
},
});
}
});
});

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Naveen Kumar8y ago
Accepted answer
There is some issue in your code. pelase try the below code
$(document).ready(function () {
var lbl = [];
var dat = [];
$.ajax({
url: "../Home/getData",
type: "Post",
dataType: "json",
success: function (data) {
$.each(data, function (key, value) {
lbl.push(value.Item);
dat.push(value.Price);
//alert("Item" + lbl + " Price" + dat);
})
var myJSON = JSON.stringify(lbl);
var xyz = lbl;
var dat1 = dat;
var ctx = document.getElementById("lineChart1");
var lineChart = new Chart(ctx, {
type: 'line',
data: {
labels: xyz,
//["January", "February", "March", "April", "May", "June", "July"],
//$.parseJSON(lbl),
datasets: [{
label: "My First dataset",
backgroundColor: "rgba(38, 185, 154, 0.31)",
borderColor: "rgba(38, 185, 154, 0.7)",
pointBorderColor: "rgba(38, 185, 154, 0.7)",
pointBackgroundColor: "rgba(38, 185, 154, 0.7)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointBorderWidth: 1,
data: dat1
}, {
label: "My Second dataset",
backgroundColor: "rgba(3, 88, 106, 0.3)",
borderColor: "rgba(3, 88, 106, 0.70)",
pointBorderColor: "rgba(3, 88, 106, 0.70)",
pointBackgroundColor: "rgba(3, 88, 106, 0.70)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(151,187,205,1)",
pointBorderWidth: 1,
data: dat1
}]
},
});
}
});
});
Msa Man6y ago
please help in this ,

the bar is move over one and flip i want it fixed ,
see my video on youtube with title
any one help me in chart js to stop these actions movement on hover

please

https://www.youtube.com/watch?v=xj8GHDDMNBs
Srikant Maruwada8y ago
After changing it to " labels: ["XYZ"]," it started working. Please find attached demo html.
Srikant Maruwada8y ago
Hi Shiv,

Labels is expecting array. Based on the number labels try specifying like

labels:["Items", "Price"],

labels: xyz,
//["January", "February", "March", "April", "May", "June", "July"],
//$.parseJSON(lbl),

Also check if you have referenced the Chart js.

http://www.chartjs.org/dist/2.7.1/Chart.bundle.js