So just like highcharts have the basic area graph i.e. one area graph behind the another I want to have multi column graphs in which one series will be exactly behind the other series and will be visible through some transparency.
Currently highcharts have stacked column graphs but in those one series is either on the top of other series or is beside them.
I hope there must be some configuration available for that.
Yes, you can do it by setting grouping: false in the plotOptions.
Updated fiddle:
http://jsfiddle.net/jlbriggs/r8vaL7p8/
However, this is - generally speaking - a really bad way to show data, that adds unnecessary complexity and obfuscation of the data for the user.
FWIW.
Related
I have a simple linechart with 2 lines. On hover, I would like to display both y-values in the tooltip that appears. I know I can accomplish this by writing a Javascript function that creates a custom tooltip for every x-value on the graph, but this seems so redundant to do, especially when the graph gets large. Since Google Chart is able to auto-generate the standard tooltip which contain both the x and y-value I feel like there should be an option to do this with built-in tools, is there?
Probably setting focusTarget to 'category' will do the trick.
See here for an example that uses it.
I am displaying some visualizations using Google Charts.
There is great variance in the data so some large numbers co-exist with small ones. In the case of a Column Chart this results in a scaling whereby some of the small values probably compute to less than one pixel of height and are thus invisible.
As a result there is no area to hover above, so I cannot show a tooltip.
Is anyone aware of a way to show a tooltip in this situation?
How about the white space above columns? Is there a way to include that as part of the hover region? I cannot find info about this in the Google Charts documentation so it is unlikely, but maybe someone is aware of a way...
By using the option focusTarget: 'category', you can achieve this. It's mainly used for displaying multiple values from the same "grouping" at the hAxis, but it fulfills your needs for this as well.
Example
I am using multiple series for scatter graph in kendo(each series represent one attribute). Since every series has multiple ranges, hence I am required to NOT use multiple series instead draw each graph separately and show in the same window. Is there any option provided for the same?
Ex:
Please see the below URL:
http://demos.telerik.com/kendo-ui/scatter-charts/scatter-line
I have the same requirement as above, except the 3 graphs '0.8C', 1.8C' and '3.1C' have to be drawn as separate graphs(separate X and Y axis) but should be displayed in the same window? Is it possible? Any response will be highly appreciated.
Edit: I found one image(via google) to represent what I intend to say:
luckily highcharts is been integrated to the application but the problem i am facing now is the rendering of the data..it works fine with the small amount of series but as the series goes on increasing the size of the graph displayed gets smaller n eventually nothing is visible..i am confused whether its a css problem or something else
here is how it looks:
any help I would be glad!!
That's not an issue with HighCharts but rather the way you are displaying your information. If your container/div has a certain size, HighCharts tries to figure out what would be the best way to display the information based on your parameters.
As you said, it looks fine with less data, so in that case, you just need to put in a scroll option in highcharts or a zoom in option, which allows you to display that information. Another option is to get rid of your legend, so you can see more of the chart (as long as your tooltip is being utilized), but after more data, the issue will reside again with that option.
Option 1 - Scrolling:
How to make highcharts scrollable horizontally when having big range in x-axis
Option 2 - Zooming:
chart: {
type: 'line',
zoomType: 'x'
}
Demo from Highcharts
I'm planning to use Highstocks.js after having used Highcharts in some other projects and I've noticed that the labels when moving the mouse over a series are not the same as in Highcharts.js making it more difficult to be read.
Instead of showing only the information of the selected series, it shows the information of all of them in the same label.
This might be a bit confusing when there's multiple series as you have to pay attention to the color to identify the series name.
It doesn't even highlight the series you are currently over or anything to simplify the viewing to the final user.
You can see what I'm talking about with this two examples:
Highcharts.js (How I would like it)
Highstocks.js (How it actually is)
I'm wondering if there's anything which can be done to emulate that behavior. I've been taking a look at the series options but I didn't find anything similar.
Thanks.
Sure you can, it is very easy, just add:
shared: false
for tooltip options object on chart initialization.
fiddle: http://jsfiddle.net/5RGaC/