JSON Data

To bind the Chart to data in a JSON format, assign the URL referring to data to the dataSource option.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        dataSource: "http://www.example.com/dataservices/data.json",
        series: {
            // ...
        }
    });
});
Angular
HTML
<dx-chart dataSource="http://www.example.com/dataservices/data.json">
    <dxi-series ... ></dxi-series>
</dx-chart>

Note that you can also use a JSONP callback parameter supported by jQuery.ajax().

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        dataSource: "http://www.example.com/dataservices/jsonpdata?callback=?",
        series: {
            // ...
        }
    });
});
Angular
HTML
<dx-chart dataSource="http://www.example.com/dataservices/jsonpdata?callback=?">
    <dxi-series ... ></dxi-series>
</dx-chart>

If you need to process data after obtaining it, implement the CustomStore. For details, see the Custom Sources topic.

View Demo

See Also