How to create an empty charts and graphs in js
How to create empty charts and graphs in js?
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. These are points with no Y value. These are used in cases where values are not available for a specific X value.
Let’s see, how to create simple empty chart in js.
Step-1: Adding Script file
First, you should create html file like emptyChart.html and then include ej2.min.js script file in head tag. It contains all dependencies to render the chart.
emptyChart.html
<html>
<head>
// Adding ej2.min.js CDN link
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
</html>
Step-2: Creating Chart Container
Create a container for chart to get render.
emptyChart.html
<html>
<body>
// Chart container
<div id="container"></div>
</body>
</html>
Step-3: Creating the chart
Basic Empty Column Chart
Consider the following data to be rendered an empty column chart.
Annual Product-Wise Profit Analysis | |
x | y |
Rice | 80 |
Wheat | null |
Oil | 70 |
Corn | 60 |
Gram | null |
Milk | 70 |
Peas | 80 |
Fruit | 60 |
Butter | null |
Here are the steps for creating the chart:
- You should create js file like emptyChart.js and it is to be included in emprtyChart.html
- Create new chart instance by using new ej.charts.Chart().
- Assign the data using dataSource property in series.
- Bind the x and y values of data source with xName and yName properties
- You can select chart types (like line, column, area, bar etc..) using type property in series.
- Now append the chart instance to the container to render the chart.
// emptyChart.html
<html>
<head>
// Adding ej2.min.js CDN link
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
// Adding emptyChart.js script file
<script src="emptyChart.js" type="text/javascript"></script>
</head>
</html>
// emptyChart.js
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Product', valueType: 'Category', interval: 1
},
primaryYAxis: {
title: 'Profit', minimum: 0, maximum: 100, interval: 20,
labelFormat: '{value}%'
},
series: [
{
dataSource: [
{ x: 'Rice', y: 80 }, { x: 'Wheat', y: null },
{ x: 'Oil', y: 70 }, { x: 'Corn', y: 60 }, { x: 'Gram', y: null },
{ x: 'Milk', y: 70 }, { x: 'Peas', y: 80 },
{ x: 'Fruit', y: 60 }, { x: 'Butter', y: null }
],
type: 'Column', xName: 'x', yName: 'y'
},
],
title: 'Annual Product-Wise Profit Analysis',
});
chart.appendTo("#container")
Screenshot
Empty point Modes
There are four types of empty point modes available. There are,
- Zero
- Drop
- Average
Zero Mode
You can set value is zero for empty/null points. Set mode property is Zero in emptyPointSettings property.
var chart = new ej.charts.Chart({
//Initializing Chart Series
series: [
{
dataSource: [
{ x: 'Rice', y: 80 }, { x: 'Wheat', y: null },
{ x: 'Oil', y: 70 }, { x: 'Corn', y: 60 }, { x: 'Gram', y: null },
{ x: 'Milk', y: 70 }, { x: 'Peas', y: 80 },
{ x: 'Fruit', y: 60 }, { x: 'Butter', y: null }
],
type: 'Column', xName: 'x', yName: 'y',
emptyPointSettings: {
mode: 'Zero',
fill: 'red'
},
},
],
});
chart.appendTo("#container")
Drop Mode
You can ignore the empty/null points. Set mode property is Drop in emptyPointSettings property.
var chart = new ej.charts.Chart({
//Initializing Chart Series
series: [
{
dataSource: [
{ x: 'Rice', y: 80 }, { x: 'Wheat', y: null },
{ x: 'Oil', y: 70 }, { x: 'Corn', y: 60 }, { x: 'Gram', y: null },
{ x: 'Milk', y: 70 }, { x: 'Peas', y: 80 },
{ x: 'Fruit', y: 60 }, { x: 'Butter', y: null }
],
type: 'Column', xName: 'x', yName: 'y',
emptyPointSettings: {
mode: 'Drop',
fill: 'red'
},
},
],
});
chart.appendTo("#container")
Average Mode
You can set the average value for the empty/null points based on previous and next point values. Set mode property is Average in emptyPointSettings property.
var chart = new ej.charts.Chart({
//Initializing Chart Series
series: [
{
dataSource: [
{ x: 'Rice', y: 80 }, { x: 'Wheat', y: null },
{ x: 'Oil', y: 70 }, { x: 'Corn', y: 60 }, { x: 'Gram', y: null },
{ x: 'Milk', y: 70 }, { x: 'Peas', y: 80 },
{ x: 'Fruit', y: 60 }, { x: 'Butter', y: null }
],
type: 'Column', xName: 'x', yName: 'y',
emptyPointSettings: {
mode: 'Average',
fill: 'red'
},
},
],
});
chart.appendTo("#container")
How to change empty bar with text on chart js ?