score:0
i would use a library like lodash (to make utility things quicker) to pre process the data into a flat list of all timestamps and then for each dataset a matching list of values recording null if that data set does not have a timestamp from the merged flat list of all timestamps.
i have also added an option to my fork of chart js which would be useful here which would be to then populate sparse data to the lines still connect and you are not left with floating points that can be hard to see.
var datasets = {
"default": {
"values": [
999,
799,
999
],
"timestamps": [
"2015-03-01t03:31:16+00:00",
"2015-03-01t07:21:43+00:00",
"2015-03-01t14:02:22+00:00"
]
},
"current": {
"values": [
399,
849
],
"timestamps": [
"2015-03-01t01:15:22+00:00",
"2015-03-01t21:30:43+00:00"
]
},
"currentpremium": {
"values": [
500,
345,
200,
500
],
"timestamps": [
"2015-02-01t14:24:00+00:00",
"2015-03-01t00:13:28+00:00",
"2015-03-01t09:56:43+00:00",
"2015-03-01t12:00:04+00:00"
]
}
};
//merge and sort all timestamps in to one array (used lodash here just to make things easy
var timestamps = _.chain(datasets).pluck("timestamps").reduce(function(previous, current, index) {
return previous.concat(current)
}).unique().sortby(function(timestamp) {
return new date(timestamp)
}).value();
//set up base chart data with colours
var chartdatasets = [{
fillcolor: "rgba(220,120,120,0.2)",
strokecolor: "rgba(220,120,120,1)",
pointcolor: "rgba(120,120,120,1)",
pointstrokecolor: "#fff",
pointhighlightfill: "#fff",
pointhighlightstroke: "rgba(220,220,220,1)",
}, {
fillcolor: "rgba(20,120,120,0.2)",
strokecolor: "rgba(20,120,120,1)",
pointcolor: "rgba(20,120,120,1)",
pointstrokecolor: "#fff",
pointhighlightfill: "#fff",
pointhighlightstroke: "rgba(220,220,220,1)",
}, {
fillcolor: "rgba(120,120,120,0.2)",
strokecolor: "rgba(120,120,120,1)",
pointcolor: "rgba(120,120,120,1)",
pointstrokecolor: "#fff",
pointhighlightfill: "#fff",
pointhighlightstroke: "rgba(220,220,220,1)",
}]
//go through each dataset from server,
//for each dataset go through it's time stamps,
//go through the merged timestamps and if the timestamp is prresent in the dataset record the value other wise record null so we
//end up with a flat list of data that matches the flat time stamps
var datasetsindex = 0;
_.foreach(datasets, function(dataset, key) {
var data = [];
_.foreach(timestamps, function(timestamp) {
var datatopush = null;
_.foreach(dataset.timestamps, function(datasettimestamp, datasettimestampindex) {
if (datasettimestamp === timestamp) {
datatopush = dataset.values[datasettimestampindex];
}
});
data.push(datatopush);
});
chartdatasets[datasetsindex].label = key;
chartdatasets[datasetsindex].data = data;
datasetsindex++;
});
var chartdata = {
labels: timestamps,
datasets: chartdatasets
};
var chart = new chart(document.getelementbyid("chart").getcontext("2d")).line(chartdata, {
populatesparsedata: true
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.3.1/lodash.js"></script>
<script src="http://quincewebdesign.com/cdn/chart.js"></script>
<canvas id="chart" width="400" height="400"></canvas>
Source: stackoverflow.com
Related Query
- Line chart: align x axis (timestamps) for multiple data sets
- Line chart plotting multiple points for duplicate data on x and y axis using chart.js
- react-chartjs-2 line chart with time on X-axes with multiple data sets plotted wrong
- Multiple axis line chart with Chart.js and JSON data from Google Sheet
- Chartjs v2 - format tooltip for multiple data sets (bar and line)
- show label in tooltip but not in x axis for chartjs line chart
- Chart JS show multiple data points for the same label
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Chart js: Update line chart having two data sets
- Multiple line labels for chart js
- ChartJS bar chart fixed width for dynamic data sets
- How to draw multiple line on y axis for same x axis in chartjs v2?
- Displaying line chart for multiple months using chart.js
- Chart.js two y axes line chart tooltip value incorrect for 2nd y axis
- How do you set x and y axis and Title for a line chart using charts.js?
- Fetch more data for line chart onZoom/onPan issues
- How to start Y Axis Line at 0 from right for negative values in chart js 2?
- Show label for every data point in line chart
- getting additional value fields from data source for dx.chartjs doughnut chart
- Multiple Axis Line Chart
- Chart.js how to create chart wirhout y-axis for two data sets
- Not all date data shows on x axis line chart
- Displaying line chart for multiple datasets using chart.js
- Using custom dataformat in chart.js for Multi Axis Line Chart
- Add data to line chart js dynamically with multiple lines
- Chart JS: Donut/Doughnut Chart: Tooltip to be shown always for all the data. All tooltip is not shown when multiple data are with 0 data
- Chart for Real time data with duplicate x axis
- Chart Js Change Label orientation on x-Axis for Line Charts
- Chartjs random colors for each part of pie chart with data dynamically from database
- line chart with {x, y} point data displays only 2 values
More Query from same tag
- How can I express this element?
- Can't find the chart.js v2 docs
- Put array in chart data
- space before and after data points in chart.js
- How to assign variables to data passed through a WEB API in Angular?
- Chart js how to toggle line without click
- Chart.js: Legend doesn't update on first call to chart.update()
- ng-chart.js - First data set always has color gray
- Add dynamically function to Chart.js
- Chart.js - how to disable everything on hover
- Chart JS Layered Vertical Bar Chart
- After form submit, function runs quickly and chart.js shows up for a second then goes away
- Add background text in ChartJS
- ChartJS with AngularJS
- Create multiple chart by Chart.js
- Using Chart.js in Web Worker
- Detect onHover being complete on a Chart.js doughnut chart
- How to use chart.js script to draw multiple pie Charts
- How to change the position of the tooltip for the Bar type chart in Chart.Js
- AJAX request not working unless alert() is used
- Chart.js - How to set animation speed?
- Where does chartjs document what is required in the myChartConfig to instantiate using myChart = new Chart(ctx, myChartConfig)
- Multi Line Chart.js with two Y-Axes
- how to filter year from datefield in django
- chartjs-plugin-streaming: onRefresh() callback isn't working
- Angular 5, Chart.js displaying multiple charts, one on each tab
- Chart.js how to display % on tooltip
- Usage of Chartjs in Angular2 App
- ChartJS doesn't draw the chart
- Displaying JSON data with Chartjs