Databases
StackOverflow2013
Postsdbo
POJQuery and flot in a Windows Sidebar Gadget
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery and flot in a Windows Sidebar Gadget
    text
    copied!<p>I'm trying to create a Windows sidebar gadget with JQuery and <a href="http://code.google.com/p/flot/" rel="nofollow noreferrer">flot</a>.</p> <p>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.</p> <p>So the problem is in the flot part.</p> <p>Any ideas? thoughts?</p> <p>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.</p> <hr> <p><strong>The html code:</strong></p> <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;script language="javascript" type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt; &lt;script language="javascript" type="text/javascript" src="js/jquery.flot.js"&gt;&lt;/script&gt; &lt;script language="javascript" type="text/javascript" src="js/Docked.js" &gt;&lt;/script&gt; &lt;link href="css/Docked.css" rel="stylesheet" type="text/css" /&gt; &lt;/head&gt; &lt;body onload="CheckDockState();"&gt; &lt;g:background id="imgBackground"&gt; &lt;div id="gadgetContent"&gt; &lt;/div&gt; &lt;/g:background&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>The JavaScript code:</strong></p> <pre><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 &lt;button onclick="ShowChart();"&gt;press me&lt;/button&gt;'; gadgetContent.className = 'gadgetDocked'; } else { oBody.width = gadgetWidth*scaleUndocked; oBody.height = gadgetHeight*scaleUndocked; oBackground.src = "../images/bg_undocked.png"; //txtDocked.innerText = 'Undocked'; gadgetContent.innerHTML = 'Docked &lt;button onclick="ShowChart();"&gt;press me&lt;/button&gt;'; 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 &lt;button onclick="ShowChart();"&gt;press me&lt;/button&gt;'; } } function ShowChart() { var d1 = []; for (var i = 0; i &lt; 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 ]); } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload