We Keep Coding

Properly scaling xAxis with time in chart.js

Using chart.js, I have a bar chart with datapoints spread across many years:
If you look closely near the x-axis, you can see some grey bars. Here's a line chart with the same data for reference:
While using a line chart for this example could make sense, it makes the charts with less data a bit awkward:
and with bars instead of lines
Is there an option that could be used on bar charts to improve the readability when large x-axis are involved? I am representing occurrences of events over-time, another adapted kind of chart could be acceptable too.
Thanks.

I am not sure there will be an option on chart.js.
One way to deal with it is to render line charts initially and then switch the type to 'bar' when zoomed into certain date ranges.
Depending on the type of data, you could also group up the data by summing (or averaging) the data by day (or week or month). Then pass it into the chart and the time series option should be able to display the x axis dates in a more sensible manner.
Otherwise you will have to look into more power charting libraries that can handle and manipulate bigger datasets like amCharts: https://www.amcharts.com/demos/stock-chart-candlesticks/
Or look into using D3 that is highly customisable, but a bit more complex to work with.

Merge two or more graphs using library

I am trying to make a dynamic graph something like as below:
Y-axis gives no. of users and x axis date range(For continuous graph )
x axis gives release of an algo on that date.(For discontinued graph)
I tried combined charts of highchart this and looked in google charts library.
Is there any way by how i can either directly generate a similar chart or merge two chart types in to one? Preferably using high charts or google graphs.
I guess we can merge two highcharts in to one but I am not very sure about it, also if we can Iam not sure how to do that.
Any help is appreciated.
Thanks

I am aware that you said "Preferably using high charts or google graphs", but I want to point out that this can be done very easily in C3.js using the "types" parameter to specify the graph type for each data item.
Demo: http://c3js.org/samples/chart_combination.html

I would suggest using plot bands to indicate release dates and types. You can dynamically add them using the addPlotBand() method (see http://api.highcharts.com/highcharts#Axis.addPlotBand). They would then overlay your "run of the mill" line chart showing number of users over time.
Assuming you have data that can distinguish between the release types, you could write code that adds a plot band of the desired color at the specific points on the x-axis.
I'd suggest making the plot bands have a from and to value thin enough (say, one interval or one date's worth) so it shows up as the thin stripes in your example.
You'd need to add a manual legend to show users what those colors mean, since plot bands wouldn't automatically show up in a Highcharts legend.
I hope this helps!

D3.js custom axis labels and converging tick mark spacing

I currently have two separate x-axis set up so that I can display two sets of data while sharing the same y-axis. This is what I have:
http://i.stack.imgur.com/A6ulv.jpg
Is there a way I can customize the spacing and also converge 1-6 into one area, so that I can focus mostly on 7.1-7.4? I've taken a look at ordinal scales, but not sure if that's the right approach since my data is still linear/numerical. This is what I would like to have:
http://i.stack.imgur.com/WiiaC.jpg

Draggable date range using Highcharts.js

does anyone know of any drag events that can be used on a column chart created using Highcharts.js or even how to potentially mimic that event over the chart?
We have a split column chart. The smaller lower chart controls the date range on the master chart above. Currently the only way to adjust the range is to click and select segments of the smaller chart. Image below is what we have so far:
We would like to be able to make a draggable interface with handles to stretch and adjust the segment either way.
There is identical functionality in Highstock.js (screenshot below):

In highcharts you can use only master-details type of chart http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/dynamic-master-detail/
But you have ability to use highstock.js and use column chart in navigator / serie. Take look at example
http://jsfiddle.net/UNBP7/
navigator:{
series:{
type:'column'
}
},
http://api.highcharts.com/highstock#navigator.series

Different colour bars in a flot bar graph, is this possible?

I have looked through the documentation and the only reference I can find is for different colour series. However I have only one data series and would like points/bars on that series different colours.
I could use multiple series and make points set to zero, which would have the same effect.
Is there a supported mechanism for having different colour bars in a bar graph using flot ?

There isn't built in support for using multiple colors in a single series.
Flot only allows specifying colors of the dots at the dataseries level, meaning each color must be its own dataseries. With this in mind, the solution is to make a single dataseries for each color.

There is a Flot plugin that allows you to set the color based on threshold values that you set. You can get the plugin code here: https://github.com/subhrajitroy/Flot-plugin/blob/master/jquery.flot.threshold.multiple.js

Flot is now shipped with a plugin that does just that.
Internally it splits a series into several series and assign a different color to each.
The plugin is in flot's github page here:
https://github.com/flot/flot/blob/master/jquery.flot.threshold.js