Flot Multiple Axes Line Chart

If your chart needs two sets of data series, need more than one x or y axis,
you need to specify axis number manually like..
//this shows two y axes

{ 
  //this is first y axis
  data: data1, 
  label: "data set 1"
},
{ 
  //this is second y axis
  data: data2,
  label: "data set 2",
  yaxis: 2 //SET SECOND Y AXIS NUMBER TO 2
}

And to configure axis you need to use yaxes instead of yaxis
//this shows one x axis and two y axes

xaxis: {
    mode: "time",
    timeformat: "%0m/%0d %0H:%0M"
},
yaxes: [
    {
        //[First axis]
        //leave this empty, if there`s nothing to configure
    },{
        //[Second axis]
        position: "right"  //set this axis to appear on the right of chart
    }
]

Double Y Axes Line Chart
Exampledouble Y axes line chart
Source Code Expand
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://static.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>

<!-- CSS -->
<style type="text/css">
#flotcontainer {
    width: 600px;
    height: 200px;
    text-align: center;
    margin: 0 auto;
}
</style>


<!-- Javascript -->
<script type="text/javascript">
var data7_1 = [
    [1354586000000, 153], [1354587000000, 658], [1354588000000, 198],
    [1354589000000, 663], [1354590000000, 801], [1354591000000, 1080],
    [1354592000000, 353], [1354593000000, 749], [1354594000000, 523],
    [1354595000000, 258], [1354596000000, 688], [1354597000000, 364]
];

var data7_2 = [
    [1354586000000, 53], [1354587000000, 65], [1354588000000, 98],
    [1354589000000, 83], [1354590000000, 80], [1354591000000, 108],
    [1354592000000, 120], [1354593000000, 74], [1354594000000, 23],
    [1354595000000, 79], [1354596000000, 88], [1354597000000, 36]
];

$(function () {        
    $.plot($("#flotcontainer"),
        [
            {
              data: data7_1,
              label: "Page View",
              lines: { fill: true}

            },
            {
              data: data7_2,
              label: "Online User",
              points: { show: true },
              lines: { show: true},
              yaxis: 2
            }
        ],
        {            
            grid: {
                backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] }
            },
            xaxis: {
                mode: "time",
                timeformat: "%0m/%0d %0H:%0M"
            },
            yaxes: [
                {
                    /* First y axis */
                },
                {
                    /* Second y axis */
                    position: "right"  /* left or right */
                }
            ]      
        }
    );
});
</script>

<!-- HTML -->
<div id="flotcontainer"></div>



Double X Axes Line Chart
Exampledouble X axes line chart
Source Code Expand
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://static.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>

<!-- CSS -->
<style type="text/css">
#flotcontainer {
    width: 600px;
    height: 200px;
    text-align: center;
    margin: 0 auto;
}
</style>


<!-- Javascript -->
<script type="text/javascript">
var data8_1 = [
    [1354586000000, 153], [1354587000000, 658], [1354588000000, 198],
    [1354589000000, 663], [1354590000000, 801], [1354591000000, 1080],
    [1354592000000, 353], [1354593000000, 749], [1354594000000, 523],
    [1354595000000, 258], [1354596000000, 688], [1354597000000, 364]
];

var data8_2 = [
    [1354586000000, 53], [1354587000000, 65], [1354588000000, 98],
    [1354589000000, 83], [1354590000000, 80], [1354591000000, 108],
    [1354592000000, 120], [1354593000000, 74], [1354594000000, 23],
    [1354595000000, 79], [1354596000000, 88], [1354597000000, 36]
];

$(function () {        
    $.plot($("#flotcontainer"),
        [
            {
              data: data8_1,
              label: "Page View",
              lines: { fill: true}

            },
            {
              data: data8_2,
              label: "Online User",
              points: { show: true },
              lines: { show: true},
              xaxis: 2  /* set second x axis */
            }
        ],
        {            
            grid: {
                backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] }
            },
            xaxes: [
                {
                    /* First x axis */
                    mode: "time",
                    timeformat: "%0m/%0d %0H:%0M"
                },
                {
                    /* Second x axis */
                    mode: "time",
                    timeformat: "%0H:00",                    
                    position: "bottom"  /* top or bottom */
                }
            ],
            yaxis: {
                /* here you can configure y axis */
            }     
        }
    );
});
</script>

<!-- HTML -->
<div id="flotcontainer"></div>


comments powered by Disqus