I am using Rgraph and I want to show average at the top of each stacked bar graph.
How can we do that?
First StackOverflow question in ages - take a chocolate!
For this you can use the labelsAbove option - like these examples:
[UPDATE: See below]
These are stacked Bar charts:
[UPDATE: See below]
This one is slightly different in that it adds the labels when the wave animation effect is finished:
[UPDATE: See below]
Or this one shows the labels at the top of the chart:
[UPDATE: See below]
Update: All the demos are available in the download archive:
https://www.rgraph.net/download.html#stable
Related
I'm trying to setup a graph that looks somewhat like this:
The graph consists of two data series, one for the stacked and another for the averages. Pay attention that is has two x-axis (multiaxis).
Looking at the ChartJS documentation, mixed graph types are possible, but not for stacked horizontal bars. Other articles seem to outline this as well, like this one on Alligator.io. I've yet to see any chart library to showcase such an example even.
Question is therefore if this is even possible, or if I should look into alternate approaches instead.
Currently it's not possible (only proof I could find right now).
The next version of chart.js will be 3.0 which has many major impovements, including changes to the horizontal bar chart, verbatim "Remove horizontalBar and make all charts capable of being horizontal". I think it will be possible with this version. But unfortunately not now.
I am fairly new to JavaScript, let alone charting. I'd appreciate any help in accomplishing the following. I have browsed many JavaScript charting libraries and examples but have not seen any that solve my problem:
I need to create dynamic stacked bar charts as shown in the attached picture. Horizontal axis is time axis. The chart should scroll to left with time along with time-markings on x-axis. Each horizontal stacked bar is for a different item on Y-axis. There will be many items on y axis. Each section of bar will have text as shown. The information about each section and its text is received dynamically.
Thank you!
See the desired end result in this image
I have found the Google Charts to be very, very easy to use (https://developers.google.com/chart/?hl=en)
However, in order to have dynamic content, you'll need to have some data source to read from so that you can use something like ajax to constantly ping it for updated data. The Google Charts library will give you a good starting point but it won't be dynamic. You'll have to program that portion but Google Charts is very great in providing you with the basic pie, graph, bar, etc.. 'chart templates' so switching between a bar and a pie chart is super easy.
Currently I am facing issue while rendering chart for large data in EXT JS. Chart gets cut or overlapped.
For example, I have 500 names on x-axis to plot then chart displays only 15 to 20 of them and others get cut. According to my view there should be scroll bar to view whole chart rather cutting the legends. I have tried to found solution for having scroll bars for such large charts but I am not able to find it.
Any other way for viewing whole chart is also accepted.
One workaround I can think about is 'panzoom' interaction.
Please visit link given below to see an official example with 'panzoom'.
http://dev.sencha.com/extjs/5.1.0/examples/kitchensink/?charts=true#line-markers
With 'panzoom', you can zoom in to the chart and then scroll/pan. Zooming in to the chart would make the hidden coordinates visible.
It may look like this because you might have smaller space to render the chart as your data is too big. So you can try with 'pan zoom'. But I don't think so you will get a useful chart. It will still get junked.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
JavaScript Chart Library
We are looking for a javascript charting component with following features:
mixed line graphs and column graphs
line graphs have to be stepped (no interpolation)
column charts must grow downwards from the top of the chart
multiple value axis
zooming and sliding
thanks!
Check - http://www.jqchart.com/
All these features are supported by amcharts.com:
1) mixed line graphs and column graphs:
http://amcharts.com/javascript/column-and-line-chart-mix/
2) Stepped line graph:
http://amcharts.com/javascript/step-line-chart/
3) I have no example of columns from top, but amcharts supports reversed value axes too, so you can simply have this example by changing graph type to "column" in this example:
http://amcharts.com/javascript/line-chart-with-reversed-value-axis/
4) multiple value axes:
http://amcharts.com/javascript/line-chart-with-multiple-value-axes/
5) zooming and sliding:
http://amcharts.com/javascript/line-chart-with-scroll-and-zoom/
All the features you mentioned can be combined in one chart, of course.
Take a look at TeeChart Javascript too.
Download it here: http://www.steema.com/download/html5
Find the online demos here:
http://www.steema.com/files/public/teechart/html5/v2012.06.1.1/demos/
mixed line graphs and column graphs
Supported. Just add the series and some values.
line graphs have to be stepped (no interpolation)
Supported. The Line series can be smoothed, but it isn't by default:
http://www.steema.com/files/public/teechart/html5/v2012.06.1.1/demos/series/line/linepoint.htm
column charts must grow downwards from the top of the chart
Supported. You can just invert the left axis. In the following example there's a checkbox for it:
http://www.steema.com/files/public/teechart/html5/v2012.06.1.1/demos/series/bar/bar.htm
multiple value axis
Supported. Find here an example:
http://www.steema.com/files/public/teechart/html5/v2012.06.1.1/demos/axes/multiple_axes.htm
zooming and sliding
Supported. Draw the rectangle with the left mouse button (from top-left to bottom-right) to zoom in the drawn area. Draw the rectangle on the other direction to zoom out (from bottom-right to top-left). Scroll dragging with the right mouse button.
If you find a problem with any of them, don't hesitate to let us know.
I'd like to replicate how StackOverflow has built their reputation column charts.
Specifically, I'm interested in the behavior of zooming in on the bottom chart to resize the top chart. I'm wondering if there is an option in Highcharts.js for this or whether this was a homemade extension made by SO.
It looks a lot like this demo, except that this is a line chart and not a column chart: http://www.highcharts.com/demo/dynamic-master-detail
Also available for testing on jsfiddle: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/dynamic-master-detail/
Here's a jsfiddle of Stackoverflow's actual code which is minimized but you get the idea:
http://jsfiddle.net/abex2/1/