Can't create chart on JSFiddle

Question

I'm trying to create chart by Javascript on JsFiddle. Here is my code.

 $(document).ready(function() { var dataPointsA = [] var dataPointsB = [] $.ajax({ type: 'GET', url: 'https://api.myjson.com/bins/12qook', dataType: 'json', success: function(field) { for (var i = 0; i < field.length; i++) { dataPointsA.push({ x: field[i].userId, y: field[i].numberOfusers }); } var chart = new CanvasJS.Chart("chartContainer", { title: { text: "User Count" }, data: [{ type: "line", name: "line1", dataPoints: dataPointsA }] }); chart.render(); } }); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <br><br> <div id="chartContainer" style="height: 360px; width: 100%;"></div> 

But when I press Run, it show only this:

I'm new to this so can you tell me what's wrong in my code? Thank you

Answer 1

If you want to render categorical data, use a bar chart instead of a line chart by changing type to column and x to label :

 $.ajax({ type: 'GET', url: 'https://api.myjson.com/bins/12qook', dataType: 'json', success(data) { new CanvasJS.Chart("chartContainer", { title: { text: "User Count" }, data: [{ type: "column", dataPoints: data.map( ({ userId, numberOfusers }) => ({ label: userId, y: numberOfusers }) ) }] }).render(); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <br><br> <div id="chartContainer" style="height: 360px; width: 100%;"></div>