I basically want to have an area range chart similar to what Highcharts is capable of: https://www.highcharts.com/demo/arearange
I looked at the examples and documentation but i am still not sure if area range charts are possible.
This is about grouping multiple data points into one. If you are zoomed in you see an ordinary line chart. If you zoom out and the chart no longer can show each data point separately, it basically shows a range of min/max values for a date range per horizontal pixel.
Is this possible with vega and how would the spec look like?
Edit
Made a first working prototype
Edit 2
Found an example in the documentation of vega-lite
Edit 3
Combination of area range with master/detail
Related
I've been playing around with the Timeline chart from Google Charts. It's great because it's very easy to use. However, I stumbled upon quite some limitations:
It's not possible to adjust the height of the bars, or the amount of margin around them.
I cant format the labels of the hAxis. No fonts can be applied, or textcolor, or font-size. And for some reason, two of the labels are in bold. (see image below)
It's not possible to add a text column on the right containing an extra set of information (for example, the sum of all hours in this row)
I can't move the hAxis to be displayed above the graph instead of below
etc...
Here's a link to the image:
For this reason, I was hoping some of you could introduce me to an alternative tool or api that I can use. It needs to be easy to use, and free/opensource. I've Googled for numerous chart tools, but almost no tools provide this SIMPLE timeline type of chart (note that it's not a Gantt chart, but it looks like one).
There are a few Gantt chart Javascript libraries, but none seem to be close to the Google Timelines chart.
The only chart I could find that is similar is Visavail.js. It builds upon D3.js and is open source, so you can modify it to your liking. Check out the "Custom Category Data" example. It's a lot like a Google Timelines chart.
For your convenience, I've added a screenshot of the example below:
If you are familiar with d3.js, here is a d3js based example: http://bl.ocks.org/bunkat/1962173
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 have many signals recorded and i want to show them on a Chart using Google Charts. These signals share the same x-axis (time) but have very wide data range for y-axis (value). Some of them go from 0 to 10, while some others go from 1000 to 20000. Therefore, it's impossible to display them in the same chart.
Yes, You can use the vAxes property, to show them in the same chart but it limits the graph to 2 signals. And I have more than 2.
Therefore i thought about something like this:
Many charts sharing the same X axis, but with dedicated Y axis. Also, the crosshair is only one for all the charts.
I've searched the Google Chart documentation, but i couldn't find anything like that.
The question is, is it possible to do it with Google Chart? Is there a function or option to do that?
We are working on object oriented solution for charts and we are thinking to make it open source. You can have a look and you can use chart skelton to fulfill your needs. Here is the link
(click on the first chart)
http://grafitome.github.io/advanced-charts.html#
I'm not biased here, but want to recommend plottable.js. Have a look at their examples section for the Synchronized Charts and Finance, as well as their tutorials section, specifically "Building flexible layouts". Their API provides a high degree of customization.
I have a simple dashboard with six div's each containing a highstocks chart. Each of them currently has a zoom picker (1m, 3m, 6m, YTD etc.) and a range picker below it.
Is it possible to have a single, separate range and zoom picker that will affect all charts?
Is it possible to synchronise zoom/range across all charts? I.e. keep the zoom/range pickers on each chart but once one is changed, all other ones are changed too.
yes it is possible,
It is achievable with highcharts itself. Render navigator chart and other charts in different divs. There is an example given here in highcharts demos called master-detail chart for your ref.
you an have your own date range selector and apply the selected dates using the setExtremes method.
In this way you can have a look and feel near to a highstock while using highcharts. But the total number of points per chart may effect the performance.
--EDIT--
you can do that with highstocks as well use afterSetExtremes method and manually set the extremes of all other charts when the extremes of one chart(the one with navigator and rangeSelctor) is changed.
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.