CODEWITHSUNDEEP
javascriptjqueryflot
user525146
user525146

Reputation: 4008

Change x-axis unit for flot graph

I am able to plot the graph with 30 datapoints and all the points show in the graph. And the graph looks cramped. I was thinking like show datapoints in the multiple of 5. Say I have 30 points, my graph should have like [0, 5, 10, 15, 20, 25, 30] as axis points. Mathematically when we plot graph say 1 unit = 5points. I am not sure of how to do it. Can someone point me in a right direction atleast from documentation when method to look at.

var options = {
        series: {           
            lines: {
                show: true,
                lineWidth: 1,                   
                fillColor: {colors:[{opacity: 1},{opacity: 1}]}, 
                align: "right" 
            }           
       },
       grid: {
            show: true,
            markings: [{xaxis: {from: 0, to: 5}}]
       },      
       xaxis:{
            tickFormatter:timeTickFormatter,
            tickSize : 1
       },
       yaxis: { 
            max:24
       }
    };

function timeTickFormatter(val,axis) {

        var returnDate =new Array();    
        <% for (String dateValue: pasDays) { %>

            returnDate.push("<%= dateValue %>");

        <% } %>

        return returnDate[val];
    }

$(document).ready(function () {
        $.plot($("#HoursChart"), [ { label : "Work Hours", data: <%= workHrsDaily %>  },
                                                                  { label : "Idle Hours", data: <%= idleHrsDaily %> } ], options);

    });

UPDATE: I change the tickSize to 5 and it shows 5 datapoints :)!!

Upvotes: 0

Views: 3011

Answers (1)

Chase
Chase

Reputation: 29559

Pretty sure you can do something like: ticks: [0, 5, 10, 15, 20, 25, 30]

From the Flot API Documentation:

If you want to completely override the tick algorithm, you can specify an array for "ticks", either like this:

ticks: [0, 1.2, 2.4]

You may need to take away the tickSize: 1 property, because this is setting the interval of the ticks to one. If you set the tickSize to something like 6 (for a length of 30), this would give you an interval at 5, 10, 15, 20, 25, 30

Upvotes: 2

Related Questions