Frage

I want draw multiple y axis as per legend. actually my requirement is that i want to display currency wise line chart so display multiple y axis. for e.g I have make USD and INR line chart so display two y axis one for USD and other for INR.

I have write below code for that but its display only one y axis instead of two so please help me.

var inr = {"2013-04-01":73681,"2013-05-01":90882,"2013-06-01":2042039,"2013-07-01":457605,"2013-08-01":543738,"2013-09-01":774479,"2013-10-01":247861,"2013-11-01":858875,"2013-12-01":219342,"2014-01-01":129519,"2014-02-01":789934,"2014-03-01":0};  
var usd = {"2013-04-05":392,"2013-05-05":19671,"2013-06-05":23952,"2013-07-05":11660,"2013-08-05":30234,"2013-09-05":1020,"2013-10-05":5995,"2013-11-05":15088,"2013-12-05":23432,"2014-01-05":1522,"2014-02-05":743,"2014-03-05":0};   


var render=function(){
    $.each(inr, function(key,value){
        data[0].push([key,value]);
    });

    $.each(usd, function(key,value){
        data[1].push([key,value]);
    });


    return data;
}

var plot1b = $.jqplot('chart1b', [], {
    dataRenderer:render,

    title:{
        text: 'Purchase Order Report',
        color: '#ccc'
    },
    legend:{show:true, renderer:$.jqplot.EnhancedLegendRenderer},
   series:[{breakOnNull: true}],    
   seriesDefaults: {
      rendererOptions: {
          smooth: true,
          animation: {
              show: true
         }
      }
  },  
  series:[{label:'<div style="padding:6px;">INR</div>'},{label:'<div style="padding:6px;">USD</div>'}],      
 axesDefaults: {
            labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
    },
    axes: {
         yaxis: {
              renderer: $.jqplot.LogAxisRenderer,
              autoscale:true,
              min: 0,
              numberTicks: "7",
              label: 'currency'
             },
             y2axis: {

                          autoscale:true,
                          min: 1000,
                          numberTicks: "7",
                          label: 'currency1'             
                    },
         xaxis: {
               renderer: $.jqplot.DateAxisRenderer,
               tickRenderer: $.jqplot.CanvasAxisTickRenderer,
               tickOptions: {
                            formatString: "%b",
                            angle: 0,
                            textColor: '#dddddd'
                        },
                  min:start_date,
                  max: end_date,
                  tickInterval: "1 month",

                  label: 'Month'

            }

        },
    legend: {
            renderer: $.jqplot.EnhancedLegendRenderer,
            show:true,
            location: 's',
            placement:'outside',
            marginTop : '10px',

            rendererOptions:{
                numberRows: 1
            }
        },

        highlighter: {
        show: true,
        sizeAdjust: 7.5
      }

    });
});
War es hilfreich?

Lösung

Replace your series option with below code, it would work out for you.

series : [
    {
        yaxis : 'yaxis',
        label : '<div style="padding:6px;">INR</div>'
    },
    {
        yaxis : 'y2axis',
        label : '<div style="padding:6px;">USD</div>'
    }
],

This tells the series to use which yaxis. I hope this helps

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top