0

Problem in include chart file

asked 2010-08-25 05:44:48 +0800

shainaztamboli gravatar image shainaztamboli
120 1 1 3
Hello all, I need to include chart files on each tab. But the chart file only included/displayed on 1st tab not in remaining tabs? I used the flot chart and included that html file in zul file but its not working. See the following code:

//main.zul

<?page id="chk" title="Check" contentType="text/html;charset=UTF-8"?>
<zk>
<window id="winmember" border="normal" width="100%" height="100%" apply="">
	<tabbox height="100%">
	<tabs id="tabs">
		<tab id="tabinfo" label="Tab1" />
		<tab id="tabregister" label="Tab2" />
	</tabs>
	<tabpanels id="tabpanel1">
		<tabpanel>
			<include src="navigate.html"/>
		</tabpanel>
		<tabpanel id="tabpanel2" >
			<include src="navigate.html"/>
		</tabpanel>
	</tabpanels>
</tabbox>
</window>
</zk>

//navigate.html


<!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"></link>
    <!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><!-->
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.flot.navigate.js"></script>
    <style>
    #placeholder .button {
        position: absolute;
        cursor: pointer;
    }
    #placeholder div.button {
        font-size: smaller;
        color: #999;
        background-color: #eee;
        padding: 2px;
    }
    .message {
        padding-left: 50px;
        font-size: smaller;
    }
    </style>
 </head>
 <body>
   <div id="placeholder" style="width:600px;height:300px;"></div>

    <p class="message"></p>

   
<script id="source" language="javascript" type="text/javascript">
$(function () {
    // generate data set from a parametric function with a fractal
    // look
    function sumf(f, t, m) {
        var res = 0;
        for (var i = 1; i < m; ++i)
            res += f(i * i * t) / (i * i);
        return res;
    }
    
    var d1 = [];
    for (var t = 0; t <= 2 * Math.PI; t += 0.01)
        d1.push([sumf(Math.cos, t, 10), sumf(Math.sin, t, 10)]);
    var data = [ d1 ];

    
    var placeholder = $("#placeholder");
    var options = {
        series: { lines: { show: true }, shadowSize: 0 },
        xaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] },
        yaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] },
        zoom: {
            interactive: true
        },
        pan: {
            interactive: true
        }
    };

    var plot = $.plot(placeholder, data, options);

    // show pan/zoom messages to illustrate events 
    placeholder.bind('plotpan', function (event, plot) {
        var axes = plot.getAxes();
        $(".message").html("Panning to x: "  + axes.xaxis.min.toFixed(2)
                           + " – " + axes.xaxis.max.toFixed(2)
                           + " and y: " + axes.yaxis.min.toFixed(2)
                           + " – " + axes.yaxis.max.toFixed(2));
    });

    placeholder.bind('plotzoom', function (event, plot) {
        var axes = plot.getAxes();
        $(".message").html("Zooming to x: "  + axes.xaxis.min.toFixed(2)
                           + " – " + axes.xaxis.max.toFixed(2)
                           + " and y: " + axes.yaxis.min.toFixed(2)
                           + " – " + axes.yaxis.max.toFixed(2));
    });

    // add zoom out button 
    $('<div class="button" style="right:20px;top:20px">zoom out</div>').appendTo(placeholder).click(function (e) {
        e.preventDefault();
        plot.zoomOut();
    });

    // and add panning buttons
    
    // little helper for taking the repetitive work out of placing
    // panning arrows
    function addArrow(dir, right, top, offset) {
        $('<img class="button" src="arrow-' + dir + '.gif" style="right:' + right + 'px;top:' + top + 'px">').appendTo(placeholder).click(function (e) {
            e.preventDefault();
            plot.pan(offset);
        });
    }

    addArrow('left', 55, 60, { left: -100 });
    addArrow('right', 25, 60, { left: 100 });
    addArrow('up', 40, 45, { top: -100 });
    addArrow('down', 40, 75, { top: 100 });
});
</script>

 </body>
</html>


I am currently working on 3.6.3 version. Please tell me where I am wrong? Thanks in advance, Shainaz
delete flag offensive retag edit

4 Replies

Sort by ยป oldest newest

answered 2010-08-25 07:10:34 +0800

SimonPai gravatar image SimonPai
1696 1

Hi Shainaz,

I have tested including a same html file (not the one you provided, as I don't have the javascript files) in two tabpanels in 3.6.4, but it works for me.
Try to include two simple html files in the tabbox, and see if it's the problem of ZK. If not, try to cut down your html file to narrow down the cause.
Maybe it's something about the initialization mechanism of the flot chart: since you include the same file twice, you have two elements with the same id. But I'm not sure whether it will cause a problem.
You can also copy the body of the html twice in a single html file to see what would happen.

Regards,
Simon

link publish delete flag offensive edit

answered 2010-08-25 07:53:41 +0800

shainaztamboli gravatar image shainaztamboli
120 1 1 3

Hi simon,
Thanks for the reply...
I also tried with same HTML files in tabs and its working fine.
I also tried to include one file(Flot chart) twice in same file but it shows only once.

I cant attached that js file to this forum as no option for attachment.
can u give me ur mail ID so I can send u that files.

link publish delete flag offensive edit

answered 2010-08-25 22:51:53 +0800

SimonPai gravatar image SimonPai
1696 1

Shainaz,

Unfortunately I am not familiar with this Flot chart, so I probably won't know more than you do about the flot chart. Maybe you can ask in their forum?

Regards,
Simon

link publish delete flag offensive edit

answered 2010-08-25 22:55:42 +0800

shainaztamboli gravatar image shainaztamboli
120 1 1 3

updated 2010-08-25 23:56:08 +0800

Hi simon,
Ya its flot chart problem because same problem with JSP also.
and Thanks for the reply.

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2010-08-25 05:44:48 +0800

Seen: 852 times

Last updated: Aug 25 '10

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More