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
Related
I want to plot bars composed of a small but variable number of colored regions, with the same (three) colors appearing multiple times per bar. I'm aware of stacked bar charts in chart.js, but this uses the same number of colored regions (datasets) for each bar. Hacking it to plot a bunch of zero-length datasets to get the right number of colored regions in each bar feels wrong. That said, the tooltips, etc. in chart.js are nice, so if there's no more natural solution, maybe zero-length datasets are the way to go. Any thoughts?
So, instead of using chart.js, I think I'll use d3.js. Won't be hard to just plot the individual rectangles using d3.
For reference, an example that only has one bar per entry, but won't be hard to extend is the horizontal barplot shown here. (There's a simple intro to d3.js on the same site.)
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.
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
Creating Sparkline line graphs.
http://jsfiddle.net/gwatts/PfzXg/
// Draw a sparkline for the #sparkline element
$('.sparkline').sparkline(values, {
type: "line",
tooltipSuffix: " widgets"
});
The jFiddle example is not the best, but I think it illustrates the point.
The default behavior is to have the tooltips appear once the mouse hovers over the value. The "5 widgets" tooltip appears when you hover over the point.
Is it possible to have the tooltip always appear?
I wanted to make a graph that is bigger and has static data labels (tooltips), but I don't see any mention of it in the documentation.
https://omnipotent.net/jquery.sparkline/#s-docs
The answer to this question could be response to yours.
here the answer:
http://omnipotent.net/jquery.sparkline/#s-faq
Frequently Asked Questions
Why are there no axis labels/markers?
Sparklines are intended to be small enough to fit alongside a line of text, to give a quick impression of a trend or pattern and thus don't have the paraphernalia of full sized charts. As of version 2.0 you can mouse over the sparklines to see the underlying data.
It is necessary use Sparkline library in your project?, if you want a big chart and labels you have other option like http://www.chartjs.org/samples/latest/.
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