4
Answers

Chart using jquery Chart.js

Shiv Kumar Yadav

Shiv Kumar Yadav
7y
4.3k
1
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
  1. $(document).ready(function () {  
  2.     var lbl = [];  
  3.     var dat = [];  
  4.     $.ajax({  
  5.         url: "../Home/getData",  
  6.         type: "Post",  
  7.         dataType: "json",  
  8.         success: function (data) {  
  9.             $.each(data, function (key, value) {  
  10.                 lbl.push(value.Item);  
  11.                 dat.push(value.Price);  
  12.                 //alert("Item" + lbl + " Price" + dat);  
  13.             })  
  14.             var myJSON = JSON.stringify(lbl);  
  15.             var xyz = [lbl];  
  16.             var dat1 = [dat];  
  17.             var ctx = document.getElementById("lineChart1");  
  18.             var lineChart = new Chart(ctx, {  
  19.                 type: 'line',  
  20.                 data: {  
  21.                     labels: xyz,  
  22.                     //["January", "February", "March", "April", "May", "June", "July"],  
  23.                     //$.parseJSON(lbl),  
  24.                     datasets: [{  
  25.                         label: "My First dataset",  
  26.                         backgroundColor: "rgba(38, 185, 154, 0.31)",  
  27.                         borderColor: "rgba(38, 185, 154, 0.7)",  
  28.                         pointBorderColor: "rgba(38, 185, 154, 0.7)",  
  29.                         pointBackgroundColor: "rgba(38, 185, 154, 0.7)",  
  30.                         pointHoverBackgroundColor: "#fff",  
  31.                         pointHoverBorderColor: "rgba(220,220,220,1)",  
  32.                         pointBorderWidth: 1,  
  33.                         data: [dat1]  
  34.                     }, {  
  35.                         label: "My Second dataset",  
  36.                         backgroundColor: "rgba(3, 88, 106, 0.3)",  
  37.                         borderColor: "rgba(3, 88, 106, 0.70)",  
  38.                         pointBorderColor: "rgba(3, 88, 106, 0.70)",  
  39.                         pointBackgroundColor: "rgba(3, 88, 106, 0.70)",  
  40.                         pointHoverBackgroundColor: "#fff",  
  41.                         pointHoverBorderColor: "rgba(151,187,205,1)",  
  42.                         pointBorderWidth: 1,  
  43.                         data: [dat1]  
  44.                     }]  
  45.                 },  
  46.             });  
  47.   
  48.         }  
  49.     });  
  50.   
  51. });  
Answers (4)
Next Recommended Forum