Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery flot dual axis

Tags:

jquery

flot

Im using jquery flot for displaying chart .... i want to show dual x-axis..... both have same values.. how can i show this? Please help

Regards Nisanth

like image 951
Nisanth Kumar Avatar asked Feb 27 '23 15:02

Nisanth Kumar


1 Answers

please check the code this is source of an example by plugin check the link tooo http://people.iola.dk/olau/flot/examples/multiple-axes.html - Thank you @Mads Skjern for correcting the link

this is a sample part of the example by the jflot dev team

<html> 
 <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Flot Examples</title> 
    <link href="layout.css" rel="stylesheet" type="text/css"></link> 
    <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]--> 
    <script language="javascript" type="text/javascript" src="../jquery.js"></script> 
    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> 
 </head> 
    <body> 
    <h1>Flot Examples</h1> 

    <div id="placeholder" style="width:600px;height:300px;"></div> 

    <p>Dual axis support showing the raw oil price in US $/barrel of
    crude oil (left axis) vs. the exchange rate from US $ to € (right
    axis).</p> 

    <p>As illustrated, you can put in secondary y and x axes if you
    need to. For each data series, simply specify the axis number.</p> 

<script id="source" language="javascript" type="text/javascript"> 
$(function () {
    var oilprices = [[1167692400000,61.05], [1167778800000,58.32], [1167865200000,57.35], [1167951600000,56.31], .... some data..... [1219874400000,115.59], [1219960800000,115.46], [1220306400000,109.71], [1220392800000,109.35], [1220565600000,106.23], [1220824800000,106.34]];
    var exchangerates = [[1167606000000,0.7580], [1167692400000,0.7580], [1167778800000,0.75470], ... some data..[1220738400000,0.70120], [1220824800000,0.7010], [1220911200000,0.70050]];

    $.plot($("#placeholder"),
           [ { data: oilprices, label: "Oil price ($)" },
             { data: exchangerates, label: "USD/EUR exchange rate", yaxis: 2 }],
           { 
             xaxis: { mode: 'time' },
             yaxis: { min: 0 },
             y2axis: { tickFormatter: function (v, axis) { return v.toFixed(axis.tickDecimals) +"€" }},
             legend: { position: 'sw' } });
});
</script> 
 </body> 
</html> 
like image 169
Jaison Justus Avatar answered Mar 08 '23 06:03

Jaison Justus