JQuery and flot in a Windows Sidebar Gadget_问答_开发者

I'm trying to create a Windows sidebar gadget with JQuery and flot.

When I run the gadget in FF the graph is plotted fine. But when I run it from the gadget, it doesn't work. I know the JQuery code is working cause I can use it to change the html, style, etc.

So the problem is in the flot part.

Any ideas? thoughts?

Basically I'm trying to create a sidebar bar gadget with a graph, I you have a better solution I`ll be glad to hear them.

The html code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script language="javascript" type="text/javascript" src="js/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery.flot.js"></script>
    <sc开发者_StackOverflow中文版ript language="javascript" type="text/javascript" src="js/Docked.js" ></script>
    <link href="css/Docked.css" rel="stylesheet" type="text/css" />
</head>
<body onload="CheckDockState();">
    <g:background id="imgBackground">
    <div id="gadgetContent">
    </div>
    </g:background>
</body>
</html>

The JavaScript code:

// Gadget width and height.
var gadgetWidth = 800;
var gadgetHeight = 800;

// Amount to scale gadget when docked or undocked.
var scaleDocked = 1;
var scaleUndocked = 2;

// Amount of time desired to perform transition (in seconds).
var timeTransition = 2;

// Declare the dock and undock event handlers.
try
{
    System.Gadget.onDock = CheckDockState;
    System.Gadget.onUndock = CheckDockState;
}
catch(err){}

// --------------------------------------------------------------------
// Check the gadget dock state; set the gadget style.
// --------------------------------------------------------------------
function CheckDockState()
{
    try
    {
        var oBackground = document.getElementById("imgBackground");
        System.Gadget.beginTransition();

        var oBody = document.body.style;
        if (System.Gadget.docked)
        {
            oBody.width = gadgetWidth*scaleDocked;
            oBody.height = gadgetHeight*scaleDocked;

            oBackground.src = "../images/bg_docked.png";

            //txtDocked.innerText = 'Docked';
            gadgetContent.innerHTML = 'Docked <button onclick="ShowChart();">press me</button>';
            gadgetContent.className = 'gadgetDocked';
        }
        else
        {
            oBody.width = gadgetWidth*scaleUndocked;
            oBody.height = gadgetHeight*scaleUndocked;  

            oBackground.src = "../images/bg_undocked.png";

            //txtDocked.innerText = 'Undocked';
            gadgetContent.innerHTML = 'Docked <button onclick="ShowChart();">press me</button>';
            gadgetContent.className = 'gadgetUndocked';
        }
        System.Gadget.endTransition(System.Gadget.TransitionType.morph, timeTransition);
    }
    catch(err)
    {
        // in a browser, some variables are different/missing then in the gadget, so i'm using this
        gadgetContent.innerHTML = 'Docked <button onclick="ShowChart();">press me</button>';
    }
}

function ShowChart()
{
    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]];

    // just to see the jquery works
    $("#gadgetContent").width(200);
    $("#gadgetContent").height(200);

    jQuery.plot($("#gadgetContent"), [ d1, d2, d3 ]);
}

IE doesn't support the <canvas> element, but flot supports excanvas which emulates it using VML. Download excanvas, and add it to your script tags e.g.

<script language="javascript" type="text/javascript" 
    src="js/excanvas.min.js"></script>

Also, don't wrap your g:background tag around the rest of the gadget's body. It's unnecessary and although it works you might have problems with DOM traversal at some point. Just open it and close it right away:

<g:background id="imgBackground"></g:background>
<div id="gadgetContent"> 
</div>

Additional note, as an FYI - beginTransition() and endTransition() are deprecated and will not do anything in Windows 7. That's because morphing generally looks a bit rubbishy. You can leave it in for Vista users but I just thought I'd let you know.

I have used Google's image based charts API in sidebar gadgets without any problems.

http://code.google.com/apis/chart/image_charts.html

I don't know how their interactive charts API behaves with Windows gadgets.