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.
Related
Is it possible with amcharts 4 to put a scrollbar only on a single value axis of the chart.
I have a chart with one X axis as Date axis, and several Y axes as Value axes. My plan was to make only one of the Y axes with a scrollbar in the chart zoombar.
My problem is that the scrollbar always only changes the entire chart, not just my particular axis.
I tried to set the minZoomCount of the AChsen which should be fixed to a quite large number. This had the desired effect, but unfortunately only while scrolling, so after releasing the mouse the axis jumped back to its default values.
I am using amcharts4 in a react frontend written with typescript.
I'm using chart.js in one of my project and I love it, but it cannot find a setting for forcing the same distance between all vertical grid lines. The case is when the last value on X is distant from the previous more than the average. Is there an option to change that so all the lines are at the same distance from another?
I want to create chart only using d3 library. My chart will have different number of vertical bars depending on data and x-axis for this. My question is how to set chart dynamically and set x-axis ticks under every bar. It will be better if width of bars will be constant.
I tried to use ranges and scale but i dont actually understand how they works. Even with some topics)
I think you should use "Grouped Bar Chart".
Refer this block from Mike Bostock.
https://bl.ocks.org/mbostock/3887051
After going through all of the Chart.js documentation, it seems like there isn't a way to add any kind of offset to a bubble chart on either the left or right side of the chart.
Any min/max X value is just automatically placed at the extremes of the chart and short of adding superfluous data, it seems like there isn't a great option. Therefor, if a point is large enough (or just not tiny), it overlaps on the left axis or goes off the canvas on the right.
Is there not a way to control this?
View of offending chart
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.