I am trying to draw a timeline chart using Google Charts, something similar to this image
The thing is I need the chart to be drawn from right to left such that the y-axis becomes on the right side and the labeling of the x-axis is reversed. Any ideas? I have searched the API documentation but could not find anything useful. Is there any any other library that can do it ?
Related
I attached the graph I want to achieve.. can you recommend any library/ how to do this kind of graph?
I looked at libraries such as charts.js, anycharts,canvasJs, High Charts (has payment client wouldn't like that) One interesting I found is Google Charts' Combo chart but have no idea how to do it.
https://i.stack.imgur.com/hm5uf.png
I used d3 Line chart and append it on top of the progress bar chart. since it's an svg the background is transparent. hope that helps someone
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
Is it possible to get the X-axis left aligned when using Google Charts?
The chart will look better as there are more data points available (weekly updates), but it looks like crap when it's centered like it is by default.
I've been searching around without results.
Edit:
I guess this question is basically the same: How to get google charts X-Axis points starting at the left most point, but the accepted solution isn't worth it in my case. Anyone who knows of a better solution?
Turns out it's not possible without faking data points.
Looking through the documentation for Highstocks, I found this example:
Shown here is two series on the same chart, therefore with a linked range selector - this is really really useful, but I wish to display something different which is proving to be very difficult.
What I'm looking for is a normal line graph on the top series, representing data plotted onto time (almost like in this example), but a bar chart or horizontal candle chart in the lower graph, representing one or more timelines.
I've drawn an image of what I'm looking for:
I apologise for the crude drawing, but hopefully it shows what I am aiming to achieve: standard graph on top, bar/candle on bottom.
I have attempted various techniques to render this, but I can't find a way to have both series drawn on the same timescale, linked with the same range selector.
In case it helps, here's a starting point on JSFiddle, with all the unnecessary code removed: http://jsfiddle.net/g105b/8JhXv/
and a link to the original demo: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/
Answer taken from official Highcharts forum
it is possible, but with some limitations. In the fact you want to show gantt chart. Bar charts aren't possible in your case - bar chart = inverted whole chart (yAxis becames xAxis, etc). Instead take a look at example for gantt chart: http://jsfiddle.net/highcharts/r6emu/
You can combine them into one, ane effect: http://jsfiddle.net/8JhXv/1/
About limits:
tooltip fo bottom chart is availabe only when you mouseover start and end date
bars are on lines, not between them
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