Working with data in Vue Chart component
26 Sep 202317 minutes to read
Chart can visualise data bound from local or remote data.
Local Data
You can bind a simple JSON data to the chart using dataSource
property in series. Now map the fields in JSON to xName
and yName
properties.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='month' yName='sales' name='Sales'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData: [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
],
primaryXAxis: {
valueType: 'Category'
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Common Datasource
You can also bind a JSON data common to all series using dataSource
property in chart.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :dataSource='seriesData'>
<e-series-collection>
<e-series type='Column' xName='month' yName='sales' > </e-series>
<e-series type='Column' xName='month' yName='sales1' > </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData: [
{ month: 'Jan', sales: 35, sales1: 28 }, { month: 'Feb', sales: 28, sales1: 35 },
{ month: 'Mar', sales: 34, sales1: 32 }, { month: 'Apr', sales: 32, sales1: 34 },
{ month: 'May', sales: 40, sales1: 32 }, { month: 'Jun', sales: 32, sales1: 40 },
{ month: 'Jul', sales: 35, sales1: 55 }, { month: 'Aug', sales: 55, sales1: 35 },
{ month: 'Sep', sales: 38, sales1: 30 }, { month: 'Oct', sales: 30, sales1: 38 },
{ month: 'Nov', sales: 25, sales1: 32 }, { month: 'Dec', sales: 32, sales1: 25 }
],
primaryXAxis: {
valueType: 'Category'
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Remote Data
You can also bind remote data to the chart using DataManager
. The DataManager requires minimal information
like webservice URL, adaptor and crossDomain to interact with service endpoint properly. Assign the instance
of DataManager to the dataSource
property in series and map the fields of data to xName
and yName
properties. You can also use the query
property of the series to filter the data.
<template>
<div id="app">
<ejs-chart id="container" :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='Assignee' yName='Estimate' :query='queries' name='Story Point'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
import { DataManager, Query } from '@syncfusion/ej2-data';
Vue.use(ChartPlugin);
let dataManager = new DataManager({
url: 'https://mvc.syncfusion.com/Services/Northwnd.svc/Tasks/'
});
let query = new Query().take(5).where('Estimate', 'lessThan', 3, false);
export default {
data() {
return {
seriesData: dataManager,
queries: query,
primaryXAxis: {
rangePadding: 'Additional',
valueType: 'Category',
title: 'Assignee'
},
primaryYAxis: {
title: 'Estimate',
minimum: 0,
maximum: 3,
interval: 1
}
};
},
provide: {
chart: [ColumnSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Empty points
The Data points that uses the null
or undefined
as value are considered as empty points. Empty data points are ignored and not plotted in the Chart. When the data is provided by using the points property, By using emptyPointSettings
property in series, you can customize the empty point. Default mode
of the empty point is Gap
.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='month' yName='sales' name='Sales' :emptyPointSettings='emptyPointSettings1'></e-series>
<e-series :dataSource='seriesData' type='Line' xName='month' yName='sales' name='Sales Compare' :emptyPointSettings='emptyPointSettings2'></e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, ColumnSeries, LineSeries, Category } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData: [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: null },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: undefined }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
],
primaryXAxis: {
valueType: 'Category'
},
emptyPointSettings1: {
mode: "Average",
fill:'grey'
},
emptyPointSettings2: {
mode: "Gap"
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, LineSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
- Customizing empty point
Specific color for empty point can be set by fill
property in emptyPointSettings
. Border for a empty point can be set by border
property.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='month' yName='sales' name='Sales' :emptyPointSettings='emptyPointSettings'></e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, ColumnSeries, LineSeries, Category } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData: [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: null },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: undefined }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
],
primaryXAxis: {
valueType: 'Category'
},
emptyPointSettings: {
mode: "Average",
fill: 'red',
border: { width: 2, color: 'violet'}
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, LineSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>