cr1zz
cr1zz

Reputation: 577

jQuery flot - don't display -1 on yaxis when there are no value

is it possible to prevent flot to show -1 on the yaxis, when there are no values?

enter image description here

Thanks in advance.


// Edit: I'm creating stats graphs for some servers (Accesses per hour). There are some server with no accesses a day, so the flot chart is filled with no data.

Javascript for creating my flot chart:

function onOutboundReceived(data) {
    var length = data.length;
    var finalData = data;
    var options = {
        series: {
             lines: {
                 show: true,
                 lineWidth: 2, 
                 fill: true,
                 fillColor: {
                 colors: [{
                     opacity: 0.2
                 },{
                     opacity: 0.01
                 }]
             } 
        },
        points: {
            show: true
        },
            shadowSize: 2
                },
                legend:{
                  show: false
                },
                grid: {
                    labelMargin: 10,
                    axisMargin: 500,
                    hoverable: true,
                    clickable: true,
                    tickColor: "rgba(255,255,255,0.22)",
                    borderWidth: 0
                },
                yaxis: {
                    ticks: 5,
                    tickDecimals: 0
                },
                xaxis: {
                    ticks: 24,
                    tickDecimals: 0
                }
            };
            $.plot($("#stats-"+HSIDarr[i]), finalData, options);

Upvotes: 3

Views: 1016

Answers (2)

Brandon DeRosier
Brandon DeRosier

Reputation: 911

As per the API doc, you can specify min and max attributes for an axis:

The options "min"/"max" are the precise minimum/maximum value on the scale. If you don't specify either of them, a value will automatically be chosen based on the minimum/maximum data values.

The example for doing so is in plot initialization:

$.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } });

And here's snippet demonstrating the min and max values.

$.plot($("#graph"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1, min: 1 } });
#graph {
  width: 600px;
  height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script>

<div id="graph" style="width:600px;height:300px"></div>

Upvotes: 4

Raidri
Raidri

Reputation: 17550

You can specify the min and max values for the y axis in your plot options, see the documentation.

Upvotes: 1

Related Questions