Angular 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.

View Demo

See Also