score:6
i had the same problem and i've modified this version like this:
var lastpoint = null;
helpers.each(dataset.points, function (point, index) {
if (!point.ignore && dataset.skipnullvalues && lastpoint) {
ctx.beginpath();
ctx.moveto(lastpoint.x, lastpoint.y);
if (this.options.beziercurve) {
ctx.beziercurveto(
lastpoint.controlpoints.outer.x,
lastpoint.controlpoints.outer.y,
point.controlpoints.inner.x,
point.controlpoints.inner.y,
point.x,
point.y
);
} else {
ctx.lineto(point.x, point.y);
}
ctx.stroke();
}
if (index > 0 && !dataset.points[index - 1].ignore && !point.ignore) {
if (this.options.beziercurve) {
ctx.beziercurveto(
dataset.points[index - 1].controlpoints.outer.x,
dataset.points[index - 1].controlpoints.outer.y,
point.controlpoints.inner.x,
point.controlpoints.inner.y,
point.x,
point.y
);
}
else {
ctx.lineto(point.x, point.y);
}
lastpoint = point;
}
else if (index === 0 || !point.ignore) {
ctx.moveto(point.x, point.y);
if (!point.ignore) {
lastpoint = point;
}
}
}, this);
for a better structure i have set a property for the dataset called "skipnullvalues":
var datasetobject = {
label: dataset.label || null,
fillcolor: dataset.fillcolor,
strokecolor: dataset.strokecolor,
pointcolor: dataset.pointcolor,
pointstrokecolor: dataset.pointstrokecolor,
tooltip: dataset.tooltip,
line: dataset.line,
fill: dataset.fill,
points: [],
skipnullvalues: dataset.skipnullvalues
};
here is the full working version!
maybe there is a better solution, but for my uses it works.
let me know if it is working for you!
score:2
for charts.js v2
use the plugin hooks. the following seems to work pretty well for data returning null. it will draw the line with out the point. it connect points though null values.
chart.pluginservice.register({
beforedatasetsdraw: function(chart) {
for (dataset of chart.config.data.datasets) {
for(data of dataset._meta[chart.id].data) {
data._model.skip = false;
data._model.tension = 0;
}
}
}
});
i am not too exited about a double for loop. this can possibly be more efficient. perhaps there is also more proper hooks to use. however, this should do what you need.
see https://github.com/chartjs/chart.js/blob/master/docs/09-advanced.md
score:12
for charts.js v2, you just define it in the dataset:
var data = {
labels: labels,
datasets: [ {
backgroundcolor: "#94b5c244",
bordercolor: "#94b5c2",
data: data,
label: "aapl",
spangaps: true
}]
};
score:65
new version supports skipping missing data. you can set spangaps: true in the options. then if you have null or nan for missing data, it will skip it and connect to the next point.
.....
showtooltips: true,
options: {
spangaps: true,
.....
}
.....
Source: stackoverflow.com
Related Query
- Connecting points between missing data in chart.js
- Chart.js Timeseries chart - formatting and missing data values
- Chart JS show multiple data points for the same label
- ChartJs line chart - display permanent icon above some data points with text on hover
- ChartJs: Different Fill Colour Between Data Points
- Missing Tooltip for some data points using chartjs
- How can I achieve displaying data points on chart but Dotted? Chart.js V3.7.0
- How to get chart from data points (arrays) with inconsistent time intervals and chart.js?
- Chart JS pass in custom data for points
- How to set the gap between data items in a chartjs chart
- Chart.js combined line and bar chart with differing data points
- Chart Js - Limit points on graph without limiting data
- ChartJS: Draw line between two data points on hover
- Limit data points with chart js
- How do I destroy/update Chart Data in this chart.js code example?
- getting additional value fields from data source for dx.chartjs doughnut chart
- How to adjust spaces between points in chart js?
- How can I add new data points to an existing chart with chart.js?
- Chart JS - Title missing when clearing canvas if no data is available
- Line chart plotting multiple points for duplicate data on x and y axis using chart.js
- Chart.js scatter chart plot data joins start and finish points together
- How to chart missing data in chartjs
- Position of the x-axis labels is not in sync with the line chart data points
- chart.js mixed chart with different data points
- Limit data points with chart js in React
- Chart.js: Is it able to connect two points of data where there are no data between them?
- Chartjs Bar Chart showing old data when hovering
- Chart.js - Increase spacing between legend and chart
- Chartjs random colors for each part of pie chart with data dynamically from database
- Chart.js - Hover labels to display data for all data points on x-axis
More Query from same tag
- Updating chart.js chart with dataset of different size
- Chart.js: hiding series by clicking on legend
- Sql Server query that returns prices from each shop on each date and adds a 0 if no data is present for the shopId on a particular date
- How to change points/line based on value?
- Hiden Gridline in chart JS
- ChartJS - format datetime X axis when displaying data from MySql table
- Why is only a single chart of three updated with react-chartjs-2?
- Chart.JS Get Json data for chart and return dataset where a type equals a certain type
- Use Google Spreadsheet as data source for Chart.js
- Select missing dates from a table in MySQL
- Change font size and font color in Chartjs Angular 5
- Chartjs - keeping 2 graphs aligned side by side
- Chartjs Tooltip Line Breaks
- Horizontal 'limit' line in Chart.js
- Vue JS setting data collection in component
- My chart is not shown on browser screen using chart.js in meteor
- How to reduce spaces between grids for graph in chart.js
- Age pyramid chart using chart.js
- Chart: Two bipolar bars below each other
- Passing data from Express to HTML (Pug) to display Chart.js
- Cannot change the color of column chart according to its value
- Why does chart update fail when its container has ng-show on it?
- Chart.JS not working in Xpages, chart not defined errror
- How to get the X position at a specified chart item index?
- How to display laravel variables in JSON in laravel view- Charts.js
- Passing SQL results from controller to chart.js
- How can I increase the size of the pie (Chart.JS)?
- Angular 4: Different color for bar in bar chart dynamically using ChartJS
- Changing size of the canvas makes it blurry
- Code for Chartjs Typescript definition file