How to use multiple charts in one page

GoogleCodeExporter commented 9 years ago

How do you use multiple charts in one page. make sure you name your functions 
different names. They didn't in the example but it is a must. Here is a quick 
example. Please don't delete. I saw more than a few people looking for this 
answer.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<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">
    <!--[if lte IE 8]><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>

    <div id="placeholder2" style="width:600px;height:300px;"></div>
<script type="text/javascript">
$(function version1 () {
    var d1 = [];
    for (var i = 0; i < 14; i += 0.5)
        d1.push([i, Math.sin(i)]);

    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

    // a null signifies separate line segments
    var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];

    $.plot($("#placeholder"), [ d1, d2, d3 ]);
});
</script>

<script type="text/javascript">
$(function version2 () {
    var d1 = [];
    for (var i = 0; i < 14; i += 0.5)
        d1.push([i, Math.sin(i)]);

    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

    // a null signifies separate line segments
    var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];

    $.plot($("#placeholder2"), [ d1, d2, d3 ]);
});
</script>

 </body>
</html>

Original issue reported on code.google.com by AlexWill...@gmail.com on 14 Dec 2011 at 9:58

GoogleCodeExporter commented 9 years ago

Separate functions aren't necessary to include two plots on the same page, and 
naming jQuery ready handler functions has no effect.  If you were instead 
referring to the name of the placeholder, then yes, each plot does require its 
own placeholder, but that's fairly self-evident.

The 'zooming with overview' and 'visitors per day with zooming and weekends' 
examples demonstrate multiple plots on the same page.

If I'm misunderstanding you, please let me know; otherwise I'm closing this 
issue.

Original comment by dnsch...@gmail.com on 1 May 2012 at 8:22

Changed state: Invalid

GoogleCodeExporter commented 9 years ago

Have a proble with ticks:10 not working on second chart on the same page

Original comment by kelticsu...@gmail.com on 23 May 2013 at 3:09

GoogleCodeExporter commented 9 years ago

Same problem. Second chart not showing ticks. Anyone can help?

Original comment by raffaell...@gmail.com on 11 Aug 2013 at 9:40

GoogleCodeExporter commented 9 years ago

you can create function for Second chart :
function plot() {
    var a = [[12,7.3]],
    b = [[13.7,11]];
....
...
}
plot();

Original comment by irpanram...@gmail.com on 13 Oct 2014 at 1:19

Letractively / flot

How to use multiple charts in one page #652