7

Does anyone know how to make "y-axis" values start from 0 in Jqplot....by default it starts with negative values for eg: -500, 0, 500, 1000 and so on....Please help

soniaP
  • 71
  • 1
  • 1
  • 3

6 Answers6

19

Set min: object (minimum) to 0 within axes: object

$(document).ready(function(){
 // your code here... //
 axes:{
  yaxis: {min:0}
 }
})

As rsapru suggested, a max: object (maximum) value is recommended to bound the graph to your preferred range. For example, if you wanted the minimum to be 0 and maximum to be 7500

 axes:{
  yaxis: {min:0, max: 7500}
 }

If you want to specify the graduations of the ticks you can do so manually by specifying ticks with the ticks: object or have jqPlot calculate tick spacing automatically (nothing other than min and max objects would be needed in that case) or by your specific number of ticks (using numberTicks: object)

Example: For tick 100 units apart, from 0 to 1000, using 11 ticks (0,100,200,300,400,500,600,700,800,900,1000) jqPlot automatic calculation:

 axes:{
  yaxis: {min:0, max: 1000, numberTicks: 11}
 }

Example: For tick 100 units apart, from 0 to 1000, using 11 ticks (0,100,200,300,400,500,600,700,800,900,1000) manual specification:

 axes:{
  yaxis: {min:0, max: 1000, Ticks: [[0],[100],[200],[300],[400],[500],[600],[700],[800],[900],[1000]]}
 }
Nerds of Technology
  • 266
  • 1
  • 3
  • can you tell any ways to calculate no of ticks without explicitely setting it , i meant if the chart is created normally , then can we get the no of ticks showed in the graph – Hussain Akhtar Wahid 'Ghouri' May 27 '13 at 13:24
  • you may have to combine Nerds of Technology's answer with PackedUp's answer to force a zero y axis "for realsies", like this: `axes : { yaxis: {min:0, pad: 0}}` – Tim Cull Feb 03 '14 at 20:16
8
                var plot2 = $.jqplot ('chartdiv', getRequestStats(), {
                // Give the plot a title.
                title: 'Daily Request Status',
                // You can specify options for all axes on the plot at once with
                // the axesDefaults object.  Here, we're using a canvas renderer
                // to draw the axis label which allows rotated text.
                axesDefaults: {
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                },
                // An axes object holds options for all axes.
                // Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ...
                // Up to 9 y axes are supported.
                axes: {
                    // options for each axis are specified in seperate option objects.
                    xaxis: {
                        label: "Hour",
                        // Turn off "padding".  This will allow data point to lie on the
                        // edges of the grid.  Default padding is 1.2 and will keep all
                        // points inside the bounds of the grid.
                        pad: 0
                    },
                    yaxis: {
                        label: "Count",
                        pad: 0
                    }
                }
            });

pad: 0 will star the Y axis to start from 0.

PackedUp
  • 369
  • 5
  • 16
3

Refer to http://www.jqplot.com/docs/files/jqPlotOptions-txt.html

set yaxis: {min: 0, max: 500, numberTicks:5}

rsapru
  • 688
  • 14
  • 30
1

add yaxis: {min:0} in your yaxis

john
  • 567
  • 8
  • 23
0

The following solution work for me.

-> Add zero value in array also.

-> set the data render to $.jqplot.CanvasAxisLabelRenderer

yaxis: { renderer: $.jqplot.CanvasAxisLabelRenderer .....

                    }

Thanks Adnan

Muhammad Adnan
  • 231
  • 3
  • 4
0

Add the following to the script:

yaxis: {
    minimum:0
}

in your yaxis. I tried it and it works.

hon2a
  • 7,006
  • 5
  • 41
  • 55
Alekhya
  • 41
  • 5