À.¸ï&1|?"{}:+dª“Ät	»Þéö4BÔE…“³n!‚3Í_±È${íE³Ú6í|¤²èëTŸI³š]î¬æÌò
òZ½\U‘ÙÍ¡]ûSÿmwÉ%CåÏÝRJ‹hþJC«³<Måà® ¶ê¯ºh­ø*Y¨òDy,i^'
/Œ9¿®Žõõÿp–½_‰ÙÙK­#âØ¶¯þe%5^Ä´ÛM[:ù;,{ûÇ¥ÀÞíçª‹-	žÔFô
qæâ@30¼»bÎØÌl­ÀÛö¯KÔOBYá¿ÃL”<õXe)4)™ØM§.)¨fà”[Â7 ¨D¶@ïµ\+ Ê³DAÏ‘ëçQlß¡…“jJm2Yi€Pú˜Ã"#˜¨ö¤ø0„N!¼²'Çx:GrE¶zÙ¿p?Ž$±Xb41yqøß‰ôö‡‚úTÆcÞ£Ñ^Øã‹‚+È^­pCzû™…éäôC>õpLÇôÂ,]ýh¼2úÒL³¸@¿´iÇOAˆý’£Ÿ˜D&yãñ5çûE­Båß+Î½[ÿËH‘¯Ù<aD4aÌ³í3m‘ô'ø€BW±`™ò¡½\ËK+‘`[iÂSø¤H6&†àÎ$Çåm¾.ŠŸ›ñ± Õ¢»ðòˆ*µÈ6É¶T÷ $î‹÷txÄÚž1Xu¾¯nìã€57µ–)‚`NÈÆ{ê‰ÿ Ìƒîî÷ûòåD’-:­¿ðç9PÅ	_ÃmÁèYs±mr*ðÞ6½_‰ÙÙK­#âØ¶¯þe%Ú8~ßkyˆçzáLvpxæˆ¢I,;}GfrüõŠoc2mÁöPrŠ$Qz .û§ÙØ($<ÀTZäŽÊ6½lE‡[^æÁ)B›Š±þÕÆ¹áð)PR{à_±Ó¹ç>|ÕÄr’Ê/»™{_6†3§¦Åp–˜aºóHfý¹PU$Û8nnà&,ô‚`\Íf#œÄÖOjâÇƒ»áÉømÙõû—’6ö]sÖ„ïÃûðâ¾F¿¡™¬x<å?Œm€WAœ¢U-÷$3¸ÏÐ²•~«Ð—ˆ vi|A n/Rýé¼gˆ3¯ÔY›*Úk‰%ðO»Øæ¾ï½U?†“ÇùC³‹~œ ìÕ{âõŽë »þÞz¹Ï"˜ž]gtäžkÓÀÑ$º(çûåµájÞ6=”½°o¤ã»Ùü	€œ]ðG’¯7|ÚÿÜ6µ3Ö=6ß–ôñ•íß@—I1”qÈÑlYÍÒFéù£úFSÿ¹Ê\04HC>œÛ¦âÑMàÄwCžA»”ŠÃu¤"-ÐØcFC™Ä¶ôêÝÐ!"vbX'mÚùv­ÍçæñvIöcd¥T“¿y{ÞËn½µë^³5:MžP9”øêµêôT€¡\hìc“Þ"fÛ8nnà&,ô‚`\Ífl?ÚÝ~ú±ÕÎ­ð³LÇÛ8nnà&,ô‚`\Íf¯§ÅW‚Ø<^J‹Ãmh¦ežætÓx1>^¸ujru}ù|Qç©VœŸK $žíœ¥/{º;œ–T¢Éí_úXgÖÊã%ŠÜG±¬åÆ#iá¿H-[ziiœÿ—Ï¨+/ølÜþ ÅQ]—³šŠ¬üœýÔF2Vp%Ø=‹¥8<bÚö¾ý1À˜TRE	vMYtïîÕç»~Áõ^¤–4Ëæ¿TKŠ¾&AH9ƒ;ž9 èŽF­4­ÇáË^çHŠ ÚC„s7°Dlk:í}:a}ÒÜ$:t©s1ÝÛ8nnà&,ô‚`\ÍfŸn<ÓTùAèÏý`é6æ~ð‚ÿÌ·'psOH\kÛ8nnà&,ô‚`\Íf7ò¤¨êïš¬OÏiÕ¾F^¤–4Ëæ¿TKŠ¾&AH9°œæûåÍÆãƒÁ±üdQ fè.‚/tÆý0lÌÇÅ`µˆÊ¾Õš!ƒJâ¥DQP‡^®N½Î†*h4§ºO§Ô£KÏÿÙ·ÓWåšÛ8nnà&,ô‚`\Íf÷{WS¢‰ìÓ¤CŽ‹~ä_ÙáÁ7Ü<ÄØå¥µ*kÄBy¥Æ	(¼÷Ýá|Ð‡:LÛ9ÞŠÀGPå’Fªjtä–Šöüá28æ'0s–£š¤"-ÐØcFC™Ä¶ôêW'ƒ|·Ûm5aÆÌH§{Mø¢kfdx"WJts!ëOÙ‹`r ðóþØcÎzÛ8nnà&,ô‚`\ÍfrÎOOz¬.åµÿÜµL´1t;ÌÀ³ÞÊp±A9XE™ø¾h£ß«žìVß²Bý©ð.ðBiì™ú„%ìžÂUÓêÚŽ+å(€AqßŠÀ6F;ÚŸ©SÓ•ëß·@£ç¥þ‡–˜Û8nnà&,ô‚`\ÍfÐ¦¹-ûtê.ry-zÛ8nnà&,ô‚`\Íf²nºˆ¥³Ç_F=¾IÛ¥é½¥yÏ`˜.M&^ìÀ´Í«‡*B“å=ðáÒð x
ý´ŽM©ß¶>[³3 A‡õ€Qìx†H£ï=‹ÔÓ°Vú^ÈjÖwÏŒÒžÄ¬Tý×¢Èú_
Ì*ªLt=Ó´VËWãÏÉ,|Øj¦ð6#hFñÚlÛ8nnà&,ô‚`\ÍfÛ8nnà&,ô‚`\ÍfÛ8nnà&,ô‚`\ÍfÛ8nnà&,ô‚`\ÍfZ-*à ÎÊÕ»ôT´ÑQ¡1Lv¸cI‘³Øñéó+ÉÏ wør3€¯êÚLÁ ÁßÜ·ÅŒR<†<ïâÛpu¥Íþy?xá³
•ØL'è›€¤œŽQ‰â;øÏÈp¢«õ÷[ã™ÍoUÍr«³DhÒ.´Î)G‚ÒØzæB‹ƒcˆ¯o¶eoÞQ4éçÎš— Û8nnà&,ô‚`\Íf¼þ‹o.G@RÍ7ÿžÛ8nnà&,ô‚`\Ífk`“ø‹1	p‚áÑdrQŸÈº‰ì¬YPºd·W œ¯S•“F‚Ã«mŠ:øB­0gÛ8nnà&,ô‚`\ÍfÛ8nnà&,ô‚`\ÍfÛ8nnà&,ô‚`\ÍfÛ8nnà&,ô‚`\Íf‰úâ|à:€?55nëÝ,öm(/er-âcj©à8.$åïWRÊKŽá&YOWÓ)¨ÖÏ’›)ÐtTZŒŽ((—.q³ãÞ"8Çàÿ³6<÷ÐÝ¢vàvœse4¼vIâRàÙm¸bXHöóÈÝì‰þ’±cü28Í`oµá/^Û8nnà&,ô‚`\ÍfXr'öŠá» ‰¸RÀIÙ_9IjÊ·â§ ™\q!¹¢¾c\5W ˆ	ÿ«yÛ8nnà&,ô‚`\Íf^¤–4Ëæ¿TKŠ¾&AH9¢Zñe"ìÛö…<º!]E ”­¯šwÍ,Ÿ<Ö­rÅÒbßƒ¬nsv+¼ã¥ÔfµÌQ2ù´œÞßjTü¶éÂ@HÈl2†%³¢Ôsú •:~4³öçz¯È ¨{ˆ^­æêº=¹%²3¬ÞDàdyÓ"•“F‚Ã«mŠ:øB­0g^¤–4Ëæ¿TKŠ¾&AH9(‘#·6dY>â/^¤–4Ëæ¿TKŠ¾&AH9(‘#·6dY>â/q*Ù“oÔS–ðÈœÜÍDQP‡^®N½Î†*h4§ñ‹÷È«|õ¿ßFÄoÝî _?¸&È>Éµ1®™rL„]SjíÇþ~Q,–5#aý#æ;¹ª_üWB£ãCdmUû~EšÇg@[Ît¸e4¶mìÝÚ9Ïh˜7fVé8{ºÄ+ 's^9å9ÁmÊnÆwû”ë”“Î±ÙYuP+€!ôæÐ¹ jáNÇ6…oÍúCwv¹kl˜7X~<^.,$\û®Dùvèð†µ’sK±(?!íû×qÖ'ÿÜ6µ3Ö=6ß–ôñ•íß@—I1”qÈÑlYÍÒFéù£úFSÿ•“F‚Ã«mŠ:øB­0g=5€­ÑyŠÃý¤˜%í8Î€mh¦ežætÓx1>^¸¿ß¿¯¿k6yÌr¶D8Dóo´wÓsfMÓEè¬DQP‡^®N½Î†*h4§`§w!'­´GŸ_ï?èÈùPÚñ$ýËâ”›ibàµêôT€¡\hìc“Þ"fÛ8nnà&,ô‚`\Íf:Ôw"K…O;;µˆ^¤–4Ëæ¿TKŠ¾&AH9tËðÇïå}ž“’6§ˆ—go¶$$Ñ¦(ZªøÐ¨nð×
pc¶£M`D…=:QF¬l©ÒiþR_²u{|Þ½}L«0[ªH0ÖÝ±¸÷Öé"B§yà8Pr•Pv†žæ€äqÚK<Œ¡*½#Œ…£;e*Ží@ÏgV¦…/€{ºÄ+ 's^9å9ÁmÊnÆwû”ë”“Î±ÙYuP+€&¬?„YîŽnÕýèõ×>	ã¦§Â–ùmaô† ¶xiRzÝä¤»gBØDûÃÏ˜úy×*ýªÛ1š6Öä4ètY¹P‰pz‡½aÇŒk0\
³.Ôíqˆ‹Ž»k·FÐ
ËC'<õÎ­Ž‰Y"ÝƒØãƒ»ã}¬±ê^¤–4Ëæ¿TKŠ¾&AH9¤U<!Ç™€‡Žœ	F.el;7ù€S„Ç³•Îy:‚õ&L–{Òu0"fJG÷Ò÷yÚ©Ò¬Api
ìÛ8nnà&,ô‚`\Ífý³†}¥FÄõºßAÎ‘c7¤"-ÐØcFC™Ä¶ôêIºš½(öòw‹kU›Û8nnà&,ô‚`\Íf=Wu÷«eÊP‡Ûº_DQP‡^®N½Î†*h4§_L¸§¦€ùujj2±áÁ7Ü<ÄØå¥µ*kÄB›Ù~	É‡ é}!ÛÝ„#Ûá‡ú×ÎS*JÂ¹Ô¯•“F‚Ã«mŠ:øB­0g=5€­ÑyŠÃý¤˜%í8Î€¾Sº'-´)JÏð¬ÌPV€·FÐ
ËC'<õÎ­Ž¹ûŒ8H¤x>ÚBÔjù,° ÁóÊ;Ž·nä|´r­NÛ8nnà&,ô‚`\ÍfyÖµnn'E‚Žà¢¾Ž jï½¶“|9†*V•«i#DQP‡^®N½Î†*h4§ºO§Ô£KÏÿÙ·ÓWåšÛ8nnà&,ô‚`\ÍfîEær‚Õr‚*ùÿ´ÿøÓ^¤–4Ëæ¿TKŠ¾&AH9—ºêâÞÛM¼gÅAœ¥†=,þüGu÷HGŠR,åï¤"-ÐØcFC™Ä¶ôêø¸/AÁâ`º’°8ÈíËÛ8nnà&,ô‚`\Ífƒ{'3H¦ÞôŒxq              </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets attributes of an element<br />
                                <br />
                            <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>element</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>         
                                        <tr>
                                            <td><em>attributes(optional)</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>                                   
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>Object</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#container').jqxDraw();
    var renderer = $('#container').jqxDraw('getInstance');
    
    // create a circle
    // params: cx, cy, radius, params
    var circleElement = renderer.circle(250, 150, 50, {});
    // set the fill color and border color of the circle
    // params: element, attributes
    renderer.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
</code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/m9mzY/">invoke the 'attr' method</a>
                            </div>
                        </div>

                    </td>
                </tr>
                <!-- circle -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span1'>circle</span>
                    </td>
                    <td>
                        <span>cx, cy, r, {optional attributes}</span>
                    </td>
                    <td>element object
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Creates a circle element<br />
                                <br />
                            <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>cy</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>         
                                        <tr>
                                            <td><em>r</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>         
                                        <tr>
                                            <td><em>attributes</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>                                                                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>Object</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#container').jqxDraw();
    var renderer = $('#container').jqxDraw('getInstance');
    
    // create a circle
    // params: cx, cy, radius, attributes
    var circleElement = renderer.circle(250, 150, 50, {});
</code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/xv5u8/">invoke the 'circle' method</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <!-- clear -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span2'>clear</span>
                    </td>
                    <td>
                        <span>None</span>
                    </td>
                    <td>None
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Clears the content of the jqxDraw widget.<br />
                                <br />
                            <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#container').jqxDraw('clear');
</code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/raMw9/">invoke the 'clear' method</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <!-- getAttr -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span3'>getAttr</span>
                    </td>
                    <td>
                        <span>element, attribute name</span>
                    </td>
                    <td>string
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Gets element's attribute<br />
                                <br />
                            <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>element</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>  
                                       <tr>
                                            <td><em>attributes(optional)</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>                                     
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>String</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#container').jqxDraw();
    var renderer = $('#container').jqxDraw('getInstance');
    
    // create a circle
    // params: cx, cy, radius, params
    var circleElement = renderer.circle(250, 150, 50, {fill: 'lightblue'}});
    // get the fill color of the circle
    // params: element, attribute name
    var fillColor = renderer.getAttr(circleElement, 'fill');
</code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/bd64X/">invoke the 'getAttr' method</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <!-- line -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span4'>line</span>
                    </td>
                    <td>
                        <span>x1, y1, x2, y2, {optional attributes}</span>
                    </td>
                    <td>element object
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Creates a line element<br />
                                <br />
                               <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>x1</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>y1</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>    
                                         <tr>
                                            <td><em>x2</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>
                                          <tr>
                                            <td><em>y2</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>                                   
                                        <tr>
                                            <td><em>attributes(optional)</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>   
                                    </tbody>

                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>Object</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#container').jqxDraw();
    var renderer = $('#container').jqxDraw('getInstance');
    
    // params: x1, y1, x2, y2, attributes
    renderer.line(600, 100, 600, 200, { stroke: 'blue', 'stroke-width': 6 });
</code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/N2PHz/">invoke the 'line' method</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <!-- measureText -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span5'>measureText</span>
                    </td>
                    <td>
                        <span>text, angle, {optional attributes}</span>
                    </td>
                    <td>{width, height}
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Estimates the size of a text element<br />
                                <br />
                               <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>text</em></td>
                                            <td>String</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>angle</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>    
                                         <tr>
                                            <td><em>attributes(optional)</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>                                 
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>Object</em> - object.width and object.height Number properties.
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#container').jqxDraw();
    var renderer = $('#container').jqxDraw('getInstance');
    // params: text, angle, attributes
    var textSize = renderer.measureText('My text', 45,  { 'class': 'smallText' }); 
    </code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/7Vvj8/">invoke the 'measureText' method</a>
                            </div>
                        </div>

                    </td>
                </tr>
                <!-- on -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span10'>on</span>
                    </td>
                    <td>
                        <span>element, event, function</span>
                    </td>
                    <td>none
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Adds an event handler to an element<br />
                                <br />
                               <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>element</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>event</em></td>
                                            <td>String</td>
                                            <td></td>
                                        </tr>    
                                         <tr>
                                            <td><em>function</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>                                 
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#container').jqxDraw();
    var renderer = $('#container').jqxDraw('getInstance');
    
    // create a circle
    // params: cx, cy, radius, params
    var circleElement = renderer.circle(250, 150, 50, {fill: 'lightblue'});
    renderer.on(circleElement, 'click', function () 
        { 
            // get the Y coordinate of the circle's center
            var circleY = parseInt(renderer.getAttr(circleElement, 'cy'));
            
            // move the circle 10 pixels down
            renderer.attr(circleElement, { cy: circleY + 10; });
        });
</code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5yRPa/">invoke the 'on' method</a>
                            </div>
                        </div>

                    </td>
                </tr>

                <!-- off -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span11'>off</span>
                    </td>
                    <td>
                        <span>element, event, function</span>
                    </td>
                    <td>none
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Removes an event handler from an element<br />
                                <br />
                                  <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>element</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>event</em></td>
                                            <td>String</td>
                                            <td></td>
                                        </tr>    
                                         <tr>
                                            <td><em>function</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>                                 
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#container').jqxDraw();
    var renderer = $('#container').jqxDraw('getInstance');
    
    // create a circle
    // params: cx, cy, radius, params
    var circleElement = renderer.circle(250, 150, 50, {fill: 'lightblue'});
    var moveCircle = function() {
        var circleY = parseInt(renderer.getAttr(circleElement, 'cy'));
        renderer.attr(circleElement, { cy: circleY + 10 });
    }
    // add event handler
    renderer.on(circleElement, 'click', moveCircle);
    // remove event handler
    renderer.off(circleElement, 'click', moveCircle);
 
    </code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3LXyU/">invoke the 'off' method</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <!-- path -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span6'>path</span>
                    </td>
                    <td>
                        <span>line command , {optional attributes}</span>
                    </td>
                    <td>element object
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Creates a path element<br />
                                <br />
                                  <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>path</em></td>
                                            <td>String</td>
                                            <td></td>
                                        </tr>    
                                         <tr>
                                            <td><em>attributes(optional)</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>                                 
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>Object</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#container').jqxDraw();
    var renderer = $('#container').jqxDraw('getInstance');
    
    // draw a path
    // params: line command ('d'), attributes
    var path = renderer.path("M 100,100 L 150,130 C 130,130 180,190 150,150", { stroke: '#777777', fill: 'red' });
    
    /* Supported line commands:
    MoveTo: M x,y
    LineTo: L x,y
    Cubic curve: C x1,y1,x2,y2,x,y
    Close path: Z
    */
</code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/j4d2Q/">invoke the 'path' method</a>
                            </div>
                        </div>

                    </td>
                </tr>
                <!-- pieslice -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span7'>pieslice</span>
                    </td>
                    <td>
                        <span>cx, cy, innerRadius, outerRadius, fromAngle, endAngle, centerOffset, {optional attributes}</span>
                    </td>
                    <td>element object
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Creates a pie slice element<br />
                                <br />
                            <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>cx</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>      
                                        <tr>
                                            <td><em>cy</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>  
                                        <tr>
                                            <td><em>innerRadius</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>  
                                        <tr>
                                            <td><em>fromAngle</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>  
                                        <tr>
                                            <td><em>endAngle</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>  
                                        <tr>
                                            <td><em>centerOffset</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>  
                                        <tr>
                                            <td><em>attributes(optional)</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>                                                                                                              
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>Object</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#container').jqxDraw();
    var renderer = $('#container').jqxDraw('getInstance');
    
    // create a pie slice
    // params: cx, cy, innerRadius, outerRadius, fromAngle, endAngle, centerOffset, {optional attributes}
    var piesliceElement = renderer.pieslice(250, 150, 50, 100, 15, 95, 0, {fill: 'yellow'});
</code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/N4fLM/">invoke the 'pieslice' method</a>
                            </div>
                        </div>

                    </td>
                </tr>
                <!-- refresh -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span8'>refresh</span>
                    </td>
                    <td>
                        <span>None</span>
                    </td>
                    <td>None
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Refreshes / re-draws the content of the jqxDraw widget.<br />
                                <br />
                            <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#container').jqxDraw('refresh');
</code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/XN8Xw/">invoke the 'refresh' method</a>
                            </div>
                        </div>
                    </td>
                </tr>

                <!-- rect -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span9'>rect</span>
                    </td>
                    <td>
                        <span>x, y, width, height, {optional attributes}</span>
                    </td>
                    <td>element object
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Creates a rectangle element<br />
                                <br />
                            <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>x</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>y</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>   
                                        <tr>
                                            <td><em>width</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>            
                                        <tr>
                                            <td><em>height</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>attributes(optional)</em></td>
                                            <td>Object</td>
                                            <td></td>
                                        </tr>                       
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>Object</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#container').jqxDraw();
    var renderer = $('#container').jqxDraw('getInstance');
    
    // params: x, y, width, height, attributes
    var rectElement = renderer.rect(0, 0, 200, 100, { stroke: '#777777', fill: 'transparent' });
</code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tXQrf/">invoke the 'rect' method</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <!-- saveAsJPEG -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span30'>saveAsJPEG</span>
                    </td>
                    <td>
                        <span>fileName, exportServer</span>
                    </td>
                    <td>boolean
                    </td>
                </tr>

                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Exports the content as JPEG image.<br />
                                The browser must support HTML5 Canvas and the device must be able to connect to the export server.
                                                                                    If you don't setup your own export server the default server is jqwidgets.com.<br />
                                <br />
                            <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>image</em></td>
                                            <td>String</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>url</em></td>
                                            <td>String</td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>    
    $('#jqxDraw').jqxDraw('saveAsJPEG', 'myImage.jpeg', 'http://&lt;my domain&gt;/export_server/server.php');
</code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/y4DzZ/">invoke the 'saveAsJPEG' method</a>
                            </div>
                        </div>
                    </td>
                </tr>

                <!-- saveAsPNG -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span31'>saveAsPNG</span>
                    </td>
                    <td>
                        <span>fileName, exportServer</span>
                    </td>
                    <td>boolean
                    </td>
                </tr>

                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Exports the chart's content as PNG image.<br />
                                The browser must support HTML5 Canvas and the device must be able to connect to the export server.
                                                                                    If you don't setup your own export server the default server is jqwidgets.com.<br />
                                <br />
                            <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>image</em></td>
                                            <td>String</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>url</em></td>
                                            <td>String</td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#jqxDraw').jqxDraw('saveAsPNG', 'myImage.png', 'http://&lt;my domain&gt;/export_server/server.php');
</code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Mx2s7/">invoke the 'saveAsPNG' method</a>
                            </div>
                        </div>

                    </td>
                </tr>
                <!-- text -->
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span12'>text</span>
                    </td>
                    <td>
                        <span>text, x, y, width, height, angle, attributes, clip, halign, valign, rotateAround</span>
                    </td>
                    <td>element object
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Creates a text element<br />
                                <br />
                            <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>x</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>y</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>width</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>height</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>angle</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>attributes</em></td>
                                            <td>Array</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>clip</em></td>
                                            <td>Boolean</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>halign</em></td>
                                            <td>String</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>valign</em></td>
                                            <td>String</td>
                                            <td></td>
                                        </tr>    
                                        <tr>
                                            <td><em>rotateAround</em></td>
                                            <td>String</td>
                                            <td></td>
                                        </tr>                                                                          
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>Object</em>
                            </div>
                                <h4>Code examples</h4>
                            </p>
                            <pre>
<code>
    $('#container').jqxDraw();
    var renderer = $('#container').jqxDraw('getInstance');
    // params: text, x, y, width, height, angle, attributes, clip, horizontal alignment('center', 'left', 'right'), vertical alignment('middle', 'top', 'bottom'), rotate around point
    renderer.text(
        "Drawing shapes", // text
        50, // x
        20, // y 
        undefined, // width
        undefined, // height
        0, // angle
        { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, // attributes
        false, // clip
        'center', // horizontal alignment
        'center', // vertical alignment
        'centermiddle'); // rotate around point
    </code>
</pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/KGbwb/">invoke the 'text' method</a>
                            </div>
                        </div>
                    </td>
                </tr>


            </table>
            <br />
        </div>
</body>
</html>