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.

Javascript discontinuous stacked bar graph

I am trying to plot daily tasks in what i would describe as a discontinuous stacked bar graph. Another description would be a vertical gantt chart of past events.
If the description is lacking, the result i want is something like that shown in the image below (made in paint).
All task have a duration (from-to time) and can have different categories which results in different colours with belonging legends.
I have been playing around with two javascript plotting libraries; chart.js and plotly.js, and looking at others but i haven't found anything that can do what i want to achieve. Both chart.js and plotly have stacked bar graphs, but i see no way of getting spaces in between the bars and getting the legends right.
Do anyone have an idea if this is possible in any these two libraries? If not is there an alternative library where this can be done?
Regards

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!

how can i plot 2 dimensional bar chart with a jquery library?

I couldn't find any jquery library that can plot 2 dimensional bar charts (if i name it true). I want to plot a graph like this;
As you can see there are 2 variable for each bar. Width and height. But i can only change height of the bar charts in every library i tried.
I want to give 2 interval for each variable and plot a rectangle.
Can you help me to find a library that can plot it or share some information about it?
Thank you.

I found the answer with luck. It is called Marimekko graphs and you can plot it with this javascript library.
http://www.mekkographics.com/free-trial/ or
http://www.fusioncharts.com/charts/marimekko_2/
It solves many problems to know its name. You can search for marimekko charts. Also there are lots of free codes in internet like;
http://bl.ocks.org/mbostock/1005090
https://gist.github.com/mbostock/1005090
d3.js how do I add text to Marimekko chart
http://www.jqplot.com/deploy/dist/examples/mekkoCharts.html

How can I customize this Google Bar Chart?

Here is a google bar chart I am creating:
http://jsfiddle.net/nGvdB/
I read up on the Google Bar Chart documentation here but I just cannot figure out how to customize this chart. Specifically, I want this:
On the horizontal axis, I see numbers 0,1,2,3,4. I want the graph only to go from 0 to 3. I have hAxis.maxValue set to 3 but it still shows till 4. None of my data is greater than
Instead of the horizontal axis labels reading {0,1,2,3} I want it to read {'','Low','Med','High'}.
Any help would be greatly appreciated.

Using google charts API is quite difficult there is useful jquery library that simplifies the issue http://keith-wood.name/gChart.html