score:10
Accepted answer
Using spanGaps you can control behavior of line chart between points with no or null data:
var timestamp = [],
speed = [10, 100, 20, 30, 40, null, null, null, 100, 40, 60],
target = [20, 30, 40, 10, null, null, null, null, 200, 60, 90];
for (var k = 10; k--; k > 0) {
timestamp.push(new Date().getTime() - 60 * 60 * 1000 * k);
}
var ctx = document.getElementById('chart').getContext("2d");
var data = {
labels: timestamp,
datasets: [{
data: speed,
backgroundColor: ['rgba(0, 9, 132, 0.2)'],
borderColor: ['rgba(0, 0, 192, 1)'],
borderWidth: 1,
spanGaps: false,
},
{
data: target,
borderColor: "rgba(255,0,0,1)",
backgroundColor: "rgba(255,0,0,0)",
borderWidth: 1,
spanGaps: false,
tooltips: {
enabled: false
}
}
]
};
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
min: 0,
max: 300
}
}],
xAxes: [{
type: 'time',
}]
},
elements: {
point: {
radius: 0,
hitRadius: 5,
hoverRadius: 5
},
line: {
tension: 0
}
},
legend: {
display: false
},
pan: {
enabled: true,
mode: 'xy',
rangeMin: {
x: null,
y: null
},
rangeMax: {
x: null,
y: null
}
},
zoom: {
enabled: true,
drag: true,
mode: 'xy',
rangeMin: {
x: null,
y: null
},
rangeMax: {
x: null,
y: null
}
},
};
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>
As alternative you can modify your data array and replace null
with zero
:
var timestamp = [],
speed = [10, 100, 20, 30, 40, null, null, null, 100, 40, 60],
target = [20, 30, 40, 10, null, null, null, null, 200, 60, 90];
for (var k = 10; k--; k>0) {
timestamp.push(new Date().getTime()-60*60*1000*k);
}
function nullToZero(array) {
return array.map(function(v) {
if (v==null) return 0; else return v;
});
}
var ctx = document.getElementById('chart').getContext("2d");
var data = {
labels: timestamp,
datasets: [{
data: nullToZero(speed),
backgroundColor: ['rgba(0, 9, 132, 0.2)'],
borderColor: ['rgba(0, 0, 192, 1)'],
borderWidth: 1,
},
{
data: nullToZero(target),
borderColor: "rgba(255,0,0,1)",
backgroundColor: "rgba(255,0,0,0)",
borderWidth: 1,
tooltips: {
enabled: false
}
}
]
};
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
min: 0,
max: 300
}
}],
xAxes: [{
type: 'time',
}]
},
elements: {
point: {
radius: 0,
hitRadius: 5,
hoverRadius: 5
},
line: {
tension: 0
}
},
legend: {
display: false
},
pan: {
enabled: true,
mode: 'xy',
rangeMin: {
x: null,
y: null
},
rangeMax: {
x: null,
y: null
}
},
zoom: {
enabled: true,
drag: true,
mode: 'xy',
rangeMin: {
x: null,
y: null
},
rangeMax: {
x: null,
y: null
}
},
};
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>
Source: stackoverflow.com
Related Query
- ChartJS show gaps in time data
- How to start the chart from specific time and offest hour and then show the data on chart from target datetime in chartjs
- Show data dynamically in line chart - ChartJS
- How to show data values or index labels in ChartJs (Latest Version)
- Show Data labels on Bar in ChartJS
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- ChartJS not displaying time data using Moment.js
- Chartjs does not show annotations when x axis is of type time
- Show dynamic data with dynamic colours in chartjs
- Chartjs show hidden data on tooltip
- How can i do so that my chartjs updates everytime data is inserted or by time interval?
- How to show the chartjs bar chart data values labels as text?
- ChartJS have xAxes labels match data source
- ChartJS not showing data for time series bar chart
- ChartJS - Show percentage base on data on hover (AngularJS)
- Two data sets with different time instances on the same ChartJs chart
- Calling data from outside of Chartjs code
- Chartjs to show more set of data of click of a button
- chartjs - don't show all x-axis data points, but show all in tooltips
- How to show data from views on chartjs in django?
- how to use chartJS to show breakdown of selected data
- Angular ChartJs does not show Data for multiple Charts
- ChartJS only show me data when I zoom-in or zoom-out
- ChartJS - Display one set of data at a time
- Chartjs - my old data show sometimes, bugs?
- Show and plot zero values on ChartJS line graph when no data
- Chartjs Bar Chart showing old data when hovering
- ChartJS - Different color per data point
- Chartjs random colors for each part of pie chart with data dynamically from database
More Query from same tag
- Gantt Chart Variation with Chart JS or other libraries
- Updating in chart.js
- How to add label in chart.js for polar chart area
- Cannot read property 'map' of undefined when looking at an array with no index
- Chart.Js pie chart click
- Chart.js v2 charts do not display inside angular 2 (but Chart.js v1 works perfectly)
- How can I give the automatically generated y-axis values on bar charts in Chart.JS commas?
- GWT Chart.js implementation throws 'unable to get property 'insertBefore' of undefined or null reference
- Dynamically change type with react-chartjs-2 React
- PhantomJS renders blurry Chart.js canvas
- Chart.js horizontal line chart or modified horizontal bar chart
- Javascript array not initialized
- Chartjs Line chart options display increase and decrease percentage between each datapoint
- chartjs: trying to rotate the y-Axis label
- set my chart min yaxis to 0
- Can't change labels' font color. Chartkick Ruby on rails
- Multiple charts not loading on the same page
- How to draw a chart like below using chart js
- ChartJS bar chart with legend which corresponds to each bar
- Want only line not area under it in chart js
- How can I create a long tail chart with chart.js
- Reanimate Data Values in CharJS
- Chart js Bar Time Chart
- How can I make my charts dynamic every time I choose an item from my dropdown?
- How to put images/ charts into table?
- How to set up a simple pie chart using React in ChartJS on codesandbox
- Chart.js - style legend: smaller circles
- Graph Chart.js dropdown menu - chart rendering
- Chart.js t.ticks.map is not a function
- Angular chart.js chart scale