How to reverse an Axis in Sencha ExtJS Charts? - javascript

I have a line chart with x Axis being numeric and y axis being numeric as well. I want the y axis to be reversed so that higher values are at the bottom of the axis and lower values at the top. I looked at the API Docu and didnt find a config to reverse the axis or so. Any clues?

In ExtJS 3 there was a reverse config option to get this going. With ExtJS 4 you have to use workarounds.
For reverting the x axis values you could use the sorters property of the store connected to the chart.
But for reverting the y axis you have to convert your values. Here's a sample on how to achieve this: http://www.sencha.com/forum/showthread.php?132148-What-has-happen-to-quot-reverse-quot-config-on-chart-axes&p=949699&viewfull=1#post949699

Related

Extending highcharts line series to end of chart

I have a Highcharts line chart with multiple series. The X axis is a datetime axis. One series is a step line and the max data point for this can finish before the other series on the x axis, e.g. 5 days before the end.
Is there an easy way of extending this line to the end of the chart automatically without filling in the extra data points before the data is passed to Highcharts? The line should just carry on to the end of the chart at the same y coordinate as the last plotted point.
I have already tried setting minPadding and maxPadding to 0 along with start/endOnTick to false, but this had no effect.
Thanks!
See answer here:
continue the line drawing on dotnet highchart
The basic idea is to
1) retrieve the final y value of your data
2) retrieve the final x value that you want it to extend until
3) add a new point to the data with those x and y values.

How does C3js decide the y axis range

I'm working with C3.js to build graphs for my JSON data. However, I do not understand what decides the Y-axis ranges on the graph. I have a common code to generate 2 bar charts, out of which one comes as expected whereas the other one has high range for Y-axis causing my data bar being diminished. Please take a look at the image below.
The bar chart on the left has data value equal to 1, yet the axis ranges to 35. A similar graph on the right adjust well.
Does anyone know what could be the reason for this?
As yo can read in the doc there is a parameter to set the Y max and min. So you can set the max value dynamically. Or you can set de Y.padding to be 0, so the Y axis will be shorter.
C3.js calculate the Y axis hight dynamically, and I think that have a min default hight.

Changing x axis labels in Chart.js line chart

Is it possible to set custom x axis labels in Chart.js? Currently I'm using my array of indexes but is is hard to read anything on this chart, so I would like to scale it and show only specified indexes.
For example: instead [1,2,3,4,5,6,7,8,9,10], I would like to set [1,5,10]
With Chart.js you can't override the horizontal axis labels. Its a great library, sad it doesn't support this.
The easiest way to do it, without getting into the Chart.js code and without redrawing the canvas, is to leave the label cell with an empty string.
For example, if you just want to show the x axis label every 10 points, you can do something like this when generating the labels:
if (ix % 10 == 0) {
labels[ix]="Label";
} else {
labels[ix]="";
}

Plotting a line chart with four quadrants

I am trying to create a line chart in using graphael. Both my x and y data have both positive and negative values. The way I am able to plot it now, the x and y axis end up intersecting and the least values in the arrays. For example, they could intersect at (-12,-12).
I want to create the plot such that the axis intersect at (0,0) to make a quadrant plot. Is it possible to do this using graphael?
After searching all over the web, I figured out out there is no option of achieving this in the library itself. I ended up drawing two extra lines for the X and Y axes to create a four quadrant graph.

Why does Google chart not show the Axis data values?

If you visit the URL below you will see that the graph is being generated properly, but that there are not labels along the x and y axis to indicate the data values:
http://chart.apis.google.com/chart?chs=600x300&chtt=Release+Burndown&cht=lc&chdl=estimated|actual&chco=FF0000,00FF00&chxr=0,0,30,2|1,0,40,2&chds=0,45&chd=t:45,34,23,12,0|45,20,15,32,31,25,0
Can anyone figure out how to get the x and y axis data values to show up?
According to the API, you can do this through the chxX parameters:
http://code.google.com/apis/chart/image/docs/gallery/line_charts.html#gcharts_axis_styles_labels
chx1: make custom values as labels
chxs and chxtc: to specify color, size, alignment, and other properties of both custom and numeric axis labels
Let me know if you can't figure it out.

Categories