How to make Flot multiple axes chart

In the previous chapters, most of them only have a single data series, so in this chapter, we will show you how to make multiple data seires chart, that is multiple axes chart. Regardless of it`s multiple axes in y-axis or multiple axes in x-axis, the principal of making multiple axes chart  is the same, you need to specify serial number to axis while creating data, and in the options, you need to create options according to the serial number. This chapter will show you how to make y-axis multiple axes chart.

Multiple axes chart

Required files

All the required files are listed below. jquery.flot.axislabels.js is an axis label plugin for Flot. jquery.flot.symbol.js is a data point symbol plugin. In addition, in order to make IE8 or below to show Flot chart properly, we included excanvas.min.js plugin. 
 
<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>      
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/js/flot/excanvas.min.js"></script><![endif]-->   
<script type="text/javascript" src="/js/flot/jquery.flot.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.time.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.axislabels.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.symbol.js"></script>

Creating data

In this example we use Sin、Cos and PI(π) to produce our three data groups, data format is like [x, y], in the x-axis, we use serial number, and in the y-axis, we use the data produced by Sin、Cos and PI. 
 
//Sin(x)
var data1 = [
    [0, 0.09983], [1, 0.19867], [2, 0.29552], [3, 0.38942], [4, 0.47943], [5, 0.56464], [6, 0.64422], [7, 0.71736], [8, 0.78333], [9, 0.84147], [10, 0.89121], [11, 0.93204], [12, 0.96356], [13, 0.98545], [14, 0.99749], [15, 0.99957], [16, 0.99166], [17, 0.97385], [18, 0.9463], [19, 0.9093], [20, 0.86321], [21, 0.8085], [22, 0.74571], [23, 0.67546], [24, 0.59847], [25, 0.5155], [26, 0.42738], [27, 0.33499], [28, 0.23925], [29, 0.14112], [30, 0.04158], [31, -0.05837], [32, -0.15775], [33, -0.25554], [34, -0.35078], [35, -0.44252], [36, -0.52984], [37, -0.61186], [38, -0.68777], [39, -0.7568], [40, -0.81828], [41, -0.87158], [42, -0.91617], [43, -0.9516], [44, -0.97753], [45, -0.99369], [46, -0.99992], [47, -0.99616], [48, -0.98245], [49, -0.95892], [50, -0.92581]
];
//Cos(x)
var data2 = [
    [0, 0.995], [1, 0.98007], [2, 0.95534], [3, 0.92106], [4, 0.87758], [5, 0.82534], [6, 0.76484], [7, 0.69671], [8, 0.62161], [9, 0.5403], [10, 0.4536], [11, 0.36236], [12, 0.2675], [13, 0.16997], [14, 0.07074], [15, -0.0292], [16, -0.12884], [17, -0.2272], [18, -0.32329], [19, -0.41615], [20, -0.50485], [21, -0.5885], [22, -0.66628], [23, -0.73739], [24, -0.80114], [25, -0.85689], [26, -0.90407], [27, -0.94222], [28, -0.97096], [29, -0.98999], [30, -0.99914], [31, -0.99829], [32, -0.98748], [33, -0.9668], [34, -0.93646], [35, -0.89676], [36, -0.8481], [37, -0.79097], [38, -0.72593], [39, -0.65364], [40, -0.57482], [41, -0.49026], [42, -0.4008], [43, -0.30733], [44, -0.2108], [45, -0.11215], [46, -0.01239], [47, 0.0875], [48, 0.18651], [49, 0.28366], [50, 0.37798]
];
//PI * x
var data3 = [
    [0, 0.31416], [1, 0.62832], [2, 0.94248], [3, 1.25664], [4, 1.5708], [5, 1.88496], [6, 2.19911], [7, 2.51327], [8, 2.82743], [9, 3.14159], [10, 3.45575], [11, 3.76991], [12, 4.08407], [13, 4.39823], [14, 4.71239], [15, 5.02655], [16, 5.34071], [17, 5.65487], [18, 5.96903], [19, 6.28319], [20, 6.59734], [21, 6.9115], [22, 7.22566], [23, 7.53982], [24, 7.85398], [25, 8.16814], [26, 8.4823], [27, 8.79646], [28, 9.11062], [29, 9.42478], [30, 9.73894], [31, 10.0531], [32, 10.36726], [33, 10.68142], [34, 10.99557], [35, 11.30973], [36, 11.62389], [37, 11.93805], [38, 12.25221], [39, 12.56637], [40, 12.88053], [41, 13.19469], [42, 13.50885], [43, 13.82301], [44, 14.13717], [45, 14.45133], [46, 14.76549], [47, 15.07964], [48, 15.3938], [49, 15.70796], [50, 16.02212]    
];
And next, we create an array call dataset, in this array, the label attribute is the text that will be used in the legend, and the data attribute is where you specify your data, the color attribute is where you can specify the line color, and you can specify data point symbol by setting points.symbol, points.fillColor means that what kind of color you want to use to fill data point shape, lines.show means that whether you want the line to show or not.

The yaxis attribute, we set it with value 1、2 and 3, this attribute will be used later in the chart options. 
 
var dataset = [
    {
        label: "Sin(x)",
        data: data1,
        yaxis: 2,
        color: "#FF0000",
        points: { symbol: "circle", fillColor: "#FF0000", show: true },
        lines: { show: true }
    }, {
        label: "Cos(x)",
        data: data2,
        yaxis: 1,
        color: "#0062FF",
        points: { symbol: "triangle", fillColor: "#0062FF", show: true },
        lines: {show:true, fill:true}
    }, {
        label: "PI * x",
        data: data3,
        yaxis: 3,
        color: "#319400",
        points: { symbol: "diamond", fillColor: "#319400", show: true },
        lines: { show: true }
    }
];

Creating chart options

In this example we used serial number as data for x-axis, it`s meaningless to show them in tick labels, so we set xaxis.ticks with an empty array, the tick labels in x-axis will show nothing. 
 
    xaxis: {
        ticks: []
    }
In the y-axis, if you only have one data series, it would like this in the options - yaxis:{}, but in here, we have multiple data series, so we use yaxes instead, the difference between a single data series and multiple data series in the options is like the codes below. 
 
        //single data
        yaxis:{
            //options
        }

        //multiple datas
        yaxes: [
            { 
                //data1 options
            },{ 
                //data2 options
            },{ 
                //...
            }
        ]
There are three data series in this example, therefor we use yaxes:[] in the options, the first object in the array represents the first axis, so we set axisLabel with value "Sin(x)", and set position with value "left", this means that the tick labels of data series "Sin(x)" will be placed in the left of the chart. And color attribute is used for setting font size of tick labels. In the third object, we set alignTicksWithAxis:2, this attribute will only be used in the multiple axes chart, it means that the ticks of this axis are aligned with the ticks of the second axis, this may imporve the looks.

Below is the codes of y-axis in the options. 
 
    yaxes: [{
            position: "left",
            color: "black",
            axisLabel: "Sin(x)",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 3
        }, {
            position: "right",           
            color: "black",
            axisLabel: "Cos(x)",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 3
        }, {
            alignTicksWithAxis: 2,
            position: "right",
            color: "black",
            axisLabel: "PI * x",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 3
        }
    ]
We set legend.noColumns with value zero, it makes the legned to show in a single row, and legend.labelFormatter allows you to format labels in anyway you want, backgroundColor attribute can change the background color, backgroundOpacity can change the background opacity.

In the grid options, we set grid.hoverable to true, it must be set to true if you`re using tooltip. and grid.borderWidth is to set the width of the border around the plot, we also set grid.mouseActiveRadius with value 50, it specifies how far the mouse can be from an item and still activate it, grid.axisMargin is the space in pixels between axes when there are two next to each other(this only works if you have multiple axes on the same side). 
 
    legend: {
        noColumns: 0,
        labelFormatter: function (label, series) {
            return "<font color=\"white\">" + label + "</font>";
        },            
        backgroundColor: "#000",
        backgroundOpacity: 0.9,
        labelBoxBorderColor: "#000000",
        position: "nw"
    }

    grid: {
        hoverable: true,
        borderWidth: 3,
        mouseActiveRadius: 50,
        backgroundColor: { colors: ["#ffffff", "#EDF5FF"] },
        axisMargin: 20
    }

The final step

In the end we call $.plot function and pass dataset and options into it, then call UseTootip(), the chart is completed.
 
    $(document).ready(function () {
        $.plot($("#flot-placeholder"), dataset, options);
        $("#flot-placeholder").UseTooltip();
    });

Practice

You can find the source code of this example and test it online! Go to Example Tester