You must be logged in to post your query.
Home › Forums › Chart Support › Line Chart Not is Displaying
Hi,
I am evaluating the canvasJS product. I am using a Web Service and AJAX to retrieve data from a database to use for the chart. Here is my client side code:
<style type=”text/css”>
.div-chart { margin: 0px auto; width: 1024px; height: 768px; }
</style> <script type=”text/javascript” src=”/Wisard/Scripts/jquery.min.js”></script> <script type=”text/javascript” src=”/Wisard/Scripts/canvasjs.min.js”></script> <script type=”text/javascript”>
function onLoad() { var queryString = “NumberIds=” + numberIds + “&PointIds=” + pointIds + “&Interval=” + interval + “&Hours=” + hours; $.ajax({ url: “RealtimeChartWebService.asmx/GetInitialData?” + queryString, type: “POST”, data: {}, contentType: “application/json”, datatype: “json”, success: OnSuccess, error: OnError }); }
function OnSuccess(result) { var resultData = JSON.parse(result.d); for (var i = 0; i < resultData.length; i++) { dataPoints = []; for (var j = 0; j < resultData[i].Results.length; j++) { dataPoints.push({ x: resultData[i].Results[j].Time, y: resultData[i].Results[j].Value }); } chart.options.data.push({ type: “line”, xValueType: “dateTime”, yValueFormatString: “0.###”, xValueFormatString: “HH:mm/nMM/DD”, showInLegend: true, name: resultData[i].Lengend, dataPoints: dataPoints }); } chart.render(); }
function OnError(error) { var err = eval(“(” + error.responseText + “)”); alert(err.Message); }
var dataPoints = [];
var numberIds; var pointIds; var interval; var hours;
numberIds = <%= NumberIds %> ; pointIds = “<%= PointIds %>”; interval = <%= Interval %> ; hours = <%= Hours %> ;
chart = new CanvasJS.Chart(“chartContainer”, { animationEnabled: true, theme: “light2”, title: { text: “Real-time WISARD Data Chart” }, toolTip: { shared: true }, legend: { cursor: “pointer”, verticalAlign: “top”, fontSize: 16, fontColor: “dimGrey”, }, axisY: { titleFontSize: 18, includeZero: false, crosshair: { enabled: true, valueFormatString: “0.###”, snapToDataPoint: true } }, axisX: { crosshair: { enabled: true, snapToDataPoint: true } }, data: [] });
document.addEventListener(“DOMContentLoaded”, onLoad);
</script> </head> <body> <div id=”chartContainer” class=”div-chart”> </div> </body>
The data is being returned, but no chart is displayed. I am using jquery v3.4.1.
Thank You, Tracy
@rabbitwolf,
Can you kindly share sample project reproducing the issue along with sample JSON over Google-Drive or Onedrive so that we can look into code, run it locally to understand the scenario better and help you resolve?
— Shashi Ranjan Team CanvasJS
Hi Shashi,
I was able to figure out the problem and got it working.
Glad you figured it out :)
You must be logged in to reply to this topic. Login/Register