Vue Chart - JSON Data
To bind the Chart to data in a JSON format, assign the data's URL to the dataSource property.
jQuery
index.js
$(function() { $("#chartContainer").dxChart({ dataSource: "http://www.example.com/dataservices/data.json", // ... }); });
Angular
app.component.html
app.module.ts
<dx-chart dataSource="http://www.example.com/dataservices/data.json"> <!-- ... --> </dx-chart>
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxChartModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxChartModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
App.vue
<template> <DxChart data-source="http://www.example.com/dataservices/data.json"> <!-- ... --> </DxChart> </template> <script> import DxChart from 'devextreme-vue/chart'; export default { components: { DxChart }, data() { return { // ... } } } </script>
React
App.js
import Chart from 'devextreme-react/chart'; export default function App() { return ( <Chart dataSource="http://www.example.com/dataservices/data.json"> {/* ... */} </Chart> ); }
Note that you can also use a JSONP callback parameter supported by jQuery.ajax().
jQuery
index.js
$(function() { $("#chartContainer").dxChart({ dataSource: "http://www.example.com/dataservices/jsonpdata?callback=?", // ... }); });
Angular
app.component.html
app.module.ts
<dx-chart dataSource="http://www.example.com/dataservices/jsonpdata?callback=?"> <!-- ... --> </dx-chart>
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxChartModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxChartModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
App.vue
<template> <DxChart data-source="http://www.example.com/dataservices/jsonpdata?callback=?"> <!-- ... --> </DxChart> </template> <script> import DxChart from 'devextreme-vue/chart'; export default { components: { DxChart }, data() { return { // ... } } } </script>
React
App.js
import Chart from 'devextreme-react/chart'; export default function App() { return ( <Chart dataSource="http://www.example.com/dataservices/jsonpdata?callback=?"> {/* ... */} </Chart> ); }
If you need to process data after obtaining it, implement the CustomStore. For details, see the Custom Sources topic.
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.