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.
Related
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
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 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 trying to draw more than one chart inside a single page, each charts aligned to the center of the page, one below the other. I have given fixed with for graph canvas. Since tick values have different ranges, for example, one graph has y axis range [0-10], another has [0 - 10000], the width of y axis ticks are different for each graph. That somehow brings a bad user experience, as the starting point of x axis of each graph differs.
Is it possible to provide x axis width separately in flot chart, or is there any other solution to get all the graphs aligned, starting from same point.
I am attaching a sample sketch for better understanding of the issue.
From the flot API:
"labelWidth" and "labelHeight" specifies a fixed size of the tick
labels in pixels. They're useful in case you need to align several
plots. "reserveSpace" means that even if an axis isn't shown, Flot
should reserve space for it - it is useful in combination with
labelWidth and labelHeight for aligning multi-axis charts.
I have tried using all sorts of combinations of tickInterval, tickPixelInterval label formatter and tickPositioner and I haven't been able to solve this issue.
I have a chart builder that pulls in different feeds and allows the user to modify the date range of those feeds before shooting this data into highcharts and spitting out the chart.
The problem is that some of the time, the first and/or last dates get cut off. Here is an example:
Without adjusting the margins of the chart (which causes the chart to take up less space), how do I prevent this from happening?
If I was able to determine the pixel location of the ticks and their labels, I could in theory, hide the specific ticks and their corresponding labels which were located outside the graph / cut off. Thoughts?
Without looking at your code - there are a few things you can do.
Rotate your labels
Play around with the x/y axis labels
Align them to the right
Hopefully one of these would help your cause.