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
- Rails and Chart.js
- chart js bar chart not displaying array
- Typescript types for chartjs-adapter-date-fns
- Chartjs 3 ToolTip styling is not being picked up
- Chart.js V2. bar chart with a fixed y-axis
- Dynamic id with canvas on html and angular
- Is it possible to print a chart with vue-chartjs?
- Resize chart.js canvas for printing
- Chart.js Console JS Error while destroy the Chart on click event
- Jquery Bargraph not Loading properly
- Chart.JS Mixed Chart - Bars Not Showing
- Chartjs Graph is not showing in colorbox
- Chart.js chart in vue.js component does not update
- How to split a List into View in C#
- Why Primefaces donutChart is not working?
- chart.js datapoint offset multiple charts
- ChartJS - remove axis?
- How can I arrange according to month using chart Js?
- I have 10 points inn x-axis, ranging [-25,-20,,-15,-10,0,10,20,30,40,50]. But I want my line chart to start from -15 of x-axis. How we can achieve?
- chart.js adjust height in mobile view
- Charts in wicket
- Horizontal bar with multiple sections in ChartJs
- How to display multiple graphs in real time with chartjs
- chartjs table each making series not proceeding to next tr
- How do I add an image in the middle of Donut Chart?(Chart.js)
- vue-chartjs cannot display the labels and datasets
- How to draw a chart like below using chart js
- How to use ChartJS object in a click event handler?
- Populating a chartJS with data from API through axios (VueJS)
- How to stop chartjs zoom more than visible points?