CODEWITHSUNDEEP
jqueryjqplot
Chris Story
Chris Story

Reputation: 1197

JQplot with two different scales for same data (Meters and Feet)

I have a requirement to show data on a line jqPlot with two different scales (meters and feet). I have multiple lines/data sets on the same plot and also have a jQuery toggle which will switch the data sets displayed in the jqPlot.

I would like to have feet on one side and meters on the right side; however, the only way I can see to do this is to set the min, max, and numTicks for each y-axis and have the data associated with one scale (feet).

Is there a better way to have a set of data show with two separate scales?

data1 = [[0,1],[1,2],[2,3]]; --In feet

Need left axis to be feet showing data1 Need right axis to show each gridMark in meters.

I have been marking left y-axis as min: 0, max: 9, numTicks: 9.
And right y2axis as min:0, max: 2.74, numTicks: 9.

Upvotes: 0

Views: 879

Answers (1)

Pablo Claus
Pablo Claus

Reputation: 5920

If I understood..you could do this: (The trick is hide meters..)

$(document).ready(function(){
var feet=[2052, 2205, 1910, 2085, 2261,  1714,  3123];
//transform values to meters...(I put some examples values..)
var meters=[2121, 32323, 65656, 21212, 32323,  54544,  31230];



var plot1 = $.jqplot('chart1', [meters, feet], {
  title:'Meters and Feet',
 axes:{

      yaxis:{  
        autoscale:true,
        label: "feet"
      },  
      y2axis:{
        autoscale:true, 
        tickOptions:{showGridline:false},
        label: "meters"
      }

  },
    series:[{lineWidth:4, showLine: false, showMarker:false}, {yaxis:'y2axis'}]
});
});

http://jsfiddle.net/pabloker/aJnE3/1/

Upvotes: 1

Related Questions