(MVC) Is this an efficient way of displaying chart data by date? - json

Question

I'm just wondering if anyone can tell me if I'm on the right track here.
I have a database that contains temperature values tracked by a device and sorted by datetime. My goal is to create a reporting chart (ex. line chart) via ChartJS. Now the thing is that this table contains thousands of rows and I've never worked with this much data before.
I'm thinking of prompting for a date range and using a date query similar here. I would then return it as JsonResult and have ChartJS make use of it. Is this good enough?

Answer 1

Below are the results from some naive tests I ran (code included too) with 1 chart and 1 dataset on IE11. You'd have to run your own tests specific to the type of chart you are using by adjusting each of the chart options available (read ahead before you start :-)).
Returning a subset of the data will definitely have a positive impact, but the question on whether this is noticeable to compensate for the compromise is very subjective and will need actual measurement (if justified) to figure out.
When you are considering end to end performance, there is no alternative to instrumentation, turning and more instrumentation with a production like environment and of course micro-optimization is the root of all evil (and many missed coffee breaks). A short (and by no means complete) list of other factors to consider would be serialization / deserialization performance, network time, server configuration (compression, et. al), etc.
The below tests are for the client side on a desktop and that too just for time. If mobile is a target environment, you definitely want to run some tests for the environment to look at memory / CPU usage as well.
Stupidly Simple Test
var POINTS = 5000;
var ANIMATION = false;
var BEZIERCURVE = false;
var SCALEOVERRIDE = false;
var ITERATIONS = 10;
// date generation
var data = [];
var labels = [];
for (var i = 0; i < POINTS; i++) {
labels.push("A")
data.push(Math.random() * 100)
}
var chartData = {
labels: labels,
datasets: [
{
data: data
}
]
};
// our charting function
function drawChart() {
var chart;
var startTime = (new Date()).getTime();
chart = new Chart(document.getElementById("myChart").getContext("2d")).Line(chartData, {
animation: ANIMATION,
scaleOverride: SCALEOVERRIDE,
scaleSteps: 10,
scaleStepWidth: 10,
scaleStartValue: 0,
bezierCurve: BEZIERCURVE,
onAnimationComplete: function () {
output.push((new Date()).getTime() - startTime);
if (chart !== undefined)
chart.destroy();
j++;
if (j < ITERATIONS)
setTimeout(drawChart, 0);
else
console.log(output);
}
});
}
var j = 0;
var output = [];
drawChart();
Results
To be taken with a pinch of salt, lime and tequila. Times are in ms and based on a 10 iterations.
----------------------------------------------------------------------------------------
| Type | Points | Animation | Bezier | Scale Override | Mean | Median |
----------------------------------------------------------------------------------------
| Bar | 10 | N | - | N | 2.7 | 3 |
| Bar | 100 | N | - | N | 14 | 13.5 |
| Bar | 1000 | N | - | N | 128.5 | 127.5 |
| Bar | 5000 | N | - | N | 637.4 | 626.5 |
| Bar | 10 | Y | - | N | 997.2 | 997 |
| Bar | 100 | Y | - | N | 1003.5 | 1006.5 |
| Bar | 1000 | Y | - | N | 3417.1 | 3418.5 |
| Bar | 5000 | Y | - | N | 17086.6 | 17085 |
| Bar | 10 | N | - | Y | 3.2 | 3 |
| Bar | 100 | N | - | Y | 14.5 | 14.5 |
| Bar | 1000 | N | - | Y | 127.2 | 125.5 |
| Bar | 5000 | N | - | Y | 638 | 632.5 |
| Bar | 10 | Y | - | Y | 996.6 | 997 |
| Bar | 100 | Y | - | Y | 999.4 | 999 |
| Bar | 1000 | Y | - | Y | 3441.9 | 3433.5 |
| Bar | 5000 | Y | - | Y | 16985.6 | 16959.5 |
| Line | 10 | N | Y | Y | 3.6 | 4 |
| Line | 100 | N | Y | Y | 16.4 | 16 |
| Line | 1000 | N | Y | Y | 146.7 | 145.5 |
| Line | 5000 | N | Y | Y | 821.5 | 820.5 |
| Line | 10 | N | N | Y | 2.9 | 3 |
| Line | 100 | N | N | Y | 14.3 | 14 |
| Line | 1000 | N | N | Y | 131 | 127 |
| Line | 5000 | N | N | Y | 643.9 | 635.5 |
| Line | 10 | N | N | N | 3.1 | 3 |
| Line | 100 | N | N | N | 15.6 | 15 |
| Line | 1000 | N | N | N | 131.9 | 133.5 |
| Line | 5000 | N | N | N | 666 | 660 |
As expected, scale overrides have an impact (but only a little), turning off Bezier curves has a noticeable impact, there not much difference between using a bar chart vs line chart (at least for the configurations I ran). Animation have a noticeable impact as the number of points go up (however I'd assume a simpler easing function will be faster)