Develop Reference

How can I make a chart with dates on the y axis Chart.js

I have a collection of projects, each of which have a completion date. I am trying to display it on a horizontal bar graph such that the label is on the y-axis and the completion date is on the x-axis, as in this image:
Target axis. I am currently using Chart.js
The problem I am encountering is that Chart.js seems to be incapable of interpreting my data as dates - instead it evaluates it (for example, 2017-02-10 is interpreted as 2005). Based on the documentation at chartjs.org/docs/#scales-time-scale, I have tried to use Moment.js to parse my date strings into moments, but it can't render it.
My best guess is that, since it's a horizontal bar graph, my x-axis values are being treated like y-axis values, and the documentation states that the time scale is only supported on the x-axis.
Is there some workaround that would allow me to use dates as the data, so that it looks like this image, but with the axes from the first image? If not, is there another library I could use that does support this? I haven't found any examples of people using time scales on a horizontal graph, so I don't know if other libraries like CanvasJS can do it either.
Goal data, but wrong x-axis
Thanks.

Linear regression with time series data

I am trying to draw a visualization showing some trend over time.
In my line plot, I have date as the X variable, some other number as the Y variable. I used d3.time scale for x and d3.linear scale for Y. The line plot is fine.
Then I tried to draw a linear regression line, but I failed, because the data for x is not numerical. I searched and searched. This post has a nice adaptable regression code, but that's for numerical data; this post has a graph similar to what I'm shooting, but it uses ordinal scale. I am wondering if there is any simpler way to make the linear regression code reusable for my time series data (e.g., "09-Mar-2016"). Any advice?

I don't know anything about javascript, but I am quite familiar with this problem. One solution: convert those date-times into units from a known date-time, whether seconds, or hours, or days.
If your dataset supports it, take the max and min of your date-times, and subtract the min from each. If you are just stuck with text, you may have to parse the values and do your own calendar math. However, there must be a library to handle this.

How to handle HighCharts zooming with large data sets

I have a HighCharts chart and am displaying a trend that has a value every minute. So in a given day I will have 1440 data points, because 24 hours = 1440 minutes.
This is fine when I am displaying one or two days of data. But if I am displaying 4 weeks I will have 40,000 data points. I can read this data from the server very quickly, but HighCharts takes several minutes to build the graph.
My proposed solution is to interpolate data on the server side so we will have 1000 points over a 4 week period, or one value every 43 minutes. Then, when the user zooms, use AJAX to read data from the server again.
Am I making a mess of this or is this what normally happens? Is there a way to make HighCharts do something like this for me (and quickly)? I have tried the HighCharts DownSample Plugin but the initial slowness (2-3 minutes to build the graph) remains.

In fact, you want to use Highstock, with dataGrouping. Demo here.
In case you can't use Highstock, then it may be hard. However, check this ticket - it's experimental plugin for Highcharts to use canvas for rendering huge amount of points. Of course IE6/7/8 is out of the discussion.
And regarding loading data on demand, check lazy loading article. Yes, it refers to Highstock, but should be possible to use the same solution in Highcharts. Demo here.

Reduce the size of a large data set by sampling/interpolation to improve chart performance

I have a large set (>2000) of time series data that I'd like to display using d3 in the browser. D3 is working great for displaying a subset of the data (~100 points) to the user, but I also want a "context" view (like this) to show the entire data set and allow users to select as subregion to view in detail.
However, performance is abysmal when trying to display that many points in d3. I feel like a good solution would be to select a sample of the data and then use some kind of interpolation (spline, polynomial, etc., this is the part I know how to do) to draw a curve that is reasonably similar to the actual data.
However, it's not clear to me how I ought to go about selecting the subset. The data (shown below) has rather flat regions where fewer samples would be needed for a decent interpolation, and other regions where the absolute derivative is quite high, where more frequent sampling is needed.
To further complicate matters, the data has gaps (where the sensor generating it was failing or out of range), and I'd like to keep these gaps in the chart rather than interpolating through them. Detection of the gaps is fairly simple though, and simply clipping them out after drawing the entire data set with the interpolation seems like a reasonable solution.
I'm doing this in JavaScript, but a solution in any language or a mathematical answer to the problem would do.

You could use the d3fc-sample module, which provides a number of different algorithms for sampling data. Here's what the API looks like:
// Create the sampler
var sampler = fc_sample.largestTriangleThreeBucket();
// Configure the x / y value accessors
sampler.x(function (d) { return d.x; })
.y(function (d) { return d.y; });
// Configure the size of the buckets used to downsample the data.
sampler.bucketSize(10);
// Run the sampler
var sampledData = sampler(data);
You can see an example of it running on the website:
https://d3fc.io/examples/sample/
The largest-triangle three-buckets algorithm works quite well on data that is 'patchy'. It doesn't vary the bucket size, but does ensure that peaks / troughs are included, which results in a good representation of the sampled data.

I know this doesn't answer your question entirely, but this library might help you to simplify your line during rendering. Not sure if they handle data gaps though.
http://mourner.github.io/simplify-js/

My advice is to average (not subsample) over longer or shorter time intervals and plot those average values as horizontal bars. I think that's very comprehensible to the user -- if you try something fancier, you might give up the ability to explain exactly what's going on. I'm assuming you can let the user choose to zoom in or out so as to show more or less detail.
You might be able to get the database engine to compute averages over intervals for you, so that's a potential speed-up too.
As to the time intervals to pick, you could try either (1) fixed intervals such as 1 second, 15 seconds, 1 minute, 15 minutes, hours, days, or whatever; that might be easier for the user to understand, or (2) choose the interval to make a fixed number of units across the whole time range, e.g. if you decide to display 7 hours of data in 100 units, then each unit = 252 seconds.

Is there a Javascript chart API with date object (labeling) support?

Does anybody know of a Javascript chart API that will handle scaling and labeling for date values on both axes? It looks like I'll have to do manual client-side calculations for labels if I want to use Google Chart API.
My data set is potentially sparse in the dates on either axis, so intelligent labeling calculations would save me a bunch of hassle. Thanks in advance!

You may wish to look into flot for a JavaScript chart API. (I do not know if it will handle your specific labeling issue.)

Take a look at Google Chart API. I've never used it but I've seen people use it. According to the examples in the docs, you can put date labels on the axes.