Graphical charts + jqplot extender - rounded value along the y axis

Question

Background

I have a line chart diagram (date on x, integer> = 0 on y), extended with jqplot parameters:

function extender() { this.cfg.axes = { xaxis : { renderer : $.jqplot.DateAxisRenderer, rendererOptions : { tickRenderer:$.jqplot.CanvasAxisTickRenderer }, tickOptions : { fontSize:'10pt', fontFamily:'Tahoma', angle:-40, formatString:'%b-%y' }, tickInterval:'2592000000' }, yaxis : { min: 0, rendererOptions : { tickRenderer:$.jqplot.CanvasAxisTickRenderer, }, tickOptions: { fontSize:'10pt', fontFamily:'Tahoma', angle:0, formatString: '%d' } }, }; this.cfg.axes.xaxis.ticks = this.cfg.categories; } 

I use the jqplot extender to create a custom date range on the x axis and this works fine:

Problem

When I use the min: 0 option along the y axis, formatting numbers becomes really funny, especially when there are small values:

Note that the minY attribute does not work in grids (possibly because the expander overwrites it)

To fix this, I use formatString: %d . It works, but creates a problem with the number of ticks:

As you can see in the screenshot, there is a row several times for the value 1.

Question

How to make sure that I don't get the same y-axis value several times?

I cannot have a static number of ticks, because when the data grows large (say, about 100), I need several values ​​along the y axis (for example, 20, 40, etc.)

Answer 1

I managed to solve my problem using ideas from the Mehasse post.

Determining the max value proposed by Mehasse did not remove unnecessary tick lines, but helped me find the answer.

By default, in the / jqplot mounts, a 4 y-axis axis line is required. Thus, if the maximum value is lower than 4 , then when they round, duplication will be displayed on the y-axis label ( formatString: '%d' ).

Basically I want the tick interval to be either Max(y) \ 4 when Max(y) > 4 , or 1 otherwise:

 function actionPlanExtender() { var series_max =maxSeries(this.cfg.data); var numberOfTicks =4; var tickInterval = Math.max(1, Math.ceil(series_max/numberOfTicks)); this.cfg.axes = { xaxis : { renderer : $.jqplot.DateAxisRenderer, rendererOptions : { tickRenderer:$.jqplot.CanvasAxisTickRenderer }, tickOptions : { fontSize:'10pt', fontFamily:'Tahoma', angle:-40, formatString:'%b-%y' }, tickInterval:'2592000000' }, yaxis : { min: 0, rendererOptions : { tickRenderer:$.jqplot.CanvasAxisTickRenderer, }, tickOptions: { fontSize:'10pt', fontFamily:'Tahoma', angle:0, formatString: '%d', }, tickInterval: tickInterval }, }; this.cfg.axes.xaxis.ticks = this.cfg.categories; } 

To calculate the y-max value, I get the graph value using this.cfg.data , which has the form [series_1,..., series_n] with series_i = [[x_1, y_1],..., [x_m, y_m]]

The maxSeries function looks like this:

 function maxSeries(datas) { var maxY = null; var dataLength = datas.length; for ( var dataIdx = 0; dataIdx < dataLength; dataIdx++) { var data = datas[dataIdx]; var l = data.length; for ( var pointIdx = 0; pointIdx < l; pointIdx++) { var point = data[pointIdx]; var y = point[1]; if (maxY == null || maxY < y) { maxY = y; } } } return maxY; } 

Please note that in my case I know my business, I have no value below 0 . This code should be updated if it is not.

Answer 2

I was surprised when I first started using JQPlot so that it did not select reasonable axis labels from the box. This is really easy to fix.

I am going to assume that you want your y axis to start from zero. If this is not the case, you need to modify this code a bit.

 // This is YOUR data set var series = [882, 38, 66, 522, 123, 400, 777]; // Instead of letting JQPlot pick the scale on the y-axis, let figure out our own. var series_max = Math.max.apply(null, series); var digits = max.toString().length; var scale = Math.pow(10, max_digits - 1); var max = (Math.ceil(series_max / scale)) * scale; $.jqplot( 'foo', [series], { axes: { yaxis: { min: 0, max: max } } // Put your other config stuff here } ) 

The main idea here is that we want to round to some good round value near the maximum value in our series. In particular, we round to the nearest number, which has zeros in all digits except the leftmost one. Thus, max 882 will result in a maximum y axis of 1000.