Docs

Creating Charts from External JSON Data

Here is a tutorial on creating Charts using JSON Data from an external source. Generally it’s a good idea to fetch data via ajax rather than embedding in the web page. JSON data is easy to parse and generate the chart accordingly.

If you haven’t already, please refer to this tutorial for step by step instruction of adding charts to your ASP.Net MVC Application. We recommend that you download the Sample Visual Studio Project and try it on your own to understand the API better.

Here is the code for creating Charts using JSON Data. We will get and parse the JSON Data using jQuery and convert the data to CanvasJS supported format if not already formatted (Please refer to Working with Data). Then we will initialize a chart and pass the dataPoints to the chart. In this example, JSON Data is already formatted according to CanvasJS, please refer to JavaScript Charts Using JSON & AJAX for example with different JSON format.