Click here to Skip to main content
15,892,005 members
Articles / Web Development / HTML

Dynamic JQPlot

Rate me:
Please Sign up or sign in to vote.
5.00/5 (5 votes)
12 Feb 2013CPOL8 min read 40.5K   1K   9  
How to dynamically build a JQPlot graph through the code behind.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

<html><head><title>$.jqplot.LogAxisRenderer</title><link rel="stylesheet" type="text/css" href="../../styles/main.css"><script language=JavaScript src="../../javascript/main.js"></script><script language=JavaScript src="../../javascript/searchdata.js"></script></head><body class="ContentPage" onLoad="NDOnLoad()"><script language=JavaScript><!--
if (browserType) {document.write("<div class=" + browserType + ">");if (browserVer) {document.write("<div class=" + browserVer + ">"); }}// --></script>

<!--  Generated by Natural Docs, version 1.4 -->
<!--  http://www.naturaldocs.org  -->

<!-- saved from url=(0026)http://www.naturaldocs.org -->




<div id=Content><div class="CClass"><div class=CTopic id=MainTopic><div class="CTitle logo"><div class="nav"><a class="nav" href="../../../index.php"><span>&gt;</span>Home</a><a class="nav"  href="../../../tests/"><span>&gt;</span>Examples</a><a class="nav"  href="../../../docs/"><span>&gt;</span>Docs</a><a class="nav"  href="http://bitbucket.org/cleonello/jqplot/downloads/"><span>&gt;</span>Download</a><a class="nav" href="../../../info.php"><span>&gt;</span>Info</a><a class="nav"  href="../../../donate.php"><span>&gt;</span>Donate</a></div><a name="$.jqplot.LogAxisRenderer"></a>$.jqplot.<wbr>LogAxisRenderer</div><div class=CBody><p>A plugin for a jqPlot to render a logarithmic axis.</p><p>To use this renderer, include the plugin in your source</p><blockquote><pre>&lt;script type=&quot;text/javascript&quot; language=&quot;javascript&quot; src=&quot;plugins/jqplot.logAxisRenderer.js&quot;&gt;&lt;/script&gt;</pre></blockquote><p>and supply the appropriate options to your plot</p><blockquote><pre>{axes:{xaxis:{renderer:$.jqplot.LogAxisRenderer}}}</pre></blockquote><!--START_ND_SUMMARY--><div class=Summary><div class=STitle>Summary</div><div class=SBorder><table border=0 cellspacing=0 cellpadding=0 class=STable><tr class="SMain"><td class=SEntry><a href="#$.jqplot.LogAxisRenderer" >$.jqplot.<wbr>LogAxisRenderer</a></td><td class=SDescription>A plugin for a jqPlot to render a logarithmic axis.</td></tr><tr class="SProperty SIndent1 SMarked"><td class=SEntry><a href="#$.jqplot.LogAxisRenderer.axisDefaults" >axisDefaults</a></td><td class=SDescription>Default properties which will be applied directly to the series.</td></tr><tr class="SGroup SIndent1"><td class=SEntry><a href="#$.jqplot.LogAxisRenderer.Properties" >Properties</a></td><td class=SDescription>Properties</td></tr><tr class="SProperty SIndent2 SMarked"><td class=SEntry><a href="#$.jqplot.LogAxisRenderer.drawBaseline" id=link1 onMouseOver="ShowTip(event, 'tt1', 'link1')" onMouseOut="HideTip('tt1')">drawBaseline</a></td><td class=SDescription>True to draw the axis baseline.</td></tr><tr class="SProperty SIndent2"><td class=SEntry><a href="#$.jqplot.LogAxisRenderer.minorTicks" id=link2 onMouseOver="ShowTip(event, 'tt2', 'link2')" onMouseOut="HideTip('tt2')">minorTicks</a></td><td class=SDescription>Number of ticks to add between &ldquo;major&rdquo; ticks. </td></tr></table></div></div><!--END_ND_SUMMARY--></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.LogAxisRenderer.axisDefaults"></a>axisDefaults</h3><div class=CBody><p>Default properties which will be applied directly to the series.</p></div></div></div>

<div class="CGroup"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.LogAxisRenderer.Properties"></a>Properties</h3><div class=CBody><p>Properties</p><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>base</td><td class=CDLDescription>the logarithmic base, commonly 2, 10 or Math.E</td></tr><tr><td class=CDLEntry>tickDistribution</td><td class=CDLDescription>Deprecated.&nbsp;  &ldquo;power&rdquo; distribution of ticks always used.&nbsp;  Option has no effect.</td></tr></table></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.LogAxisRenderer.drawBaseline"></a>drawBaseline</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.drawBaseline = true</td></tr></table></blockquote><p>True to draw the axis baseline.</p></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.LogAxisRenderer.minorTicks"></a>minorTicks</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.minorTicks = 'auto'</td></tr></table></blockquote><p>Number of ticks to add between &ldquo;major&rdquo; ticks.&nbsp; Major ticks are ticks supplied by user or auto computed.&nbsp; Minor ticks cannot be created by user.</p></div></div></div>

</div><!--Content-->


<div id=Footer>Copyright &copy; 2009 - 2010 Chris Leonello&nbsp; &middot;&nbsp; Updated November 9th, 2011&nbsp; &middot;&nbsp; <a href="http://www.naturaldocs.org">Generated by Natural Docs</a></div><!--Footer-->


<div id=Menu><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent1')">Usage and Options</a><div class=MGroupContent id=MGroupContent1><div class=MEntry><div class=MFile><a href="../usage-txt.html">Usage</a></div></div><div class=MEntry><div class=MFile><a href="../jqPlotOptions-txt.html">jqPlot Options</a></div></div><div class=MEntry><div class=MFile><a href="../optionsTutorial-txt.html">Options Tutorial</a></div></div><div class=MEntry><div class=MFile><a href="../jqPlotCssStyling-txt.html">jqPlot CSS Customization</a></div></div><div class=MEntry><div class=MFile><a href="../changes-txt.html">Change Log</a></div></div><div class=MEntry><div class=MLink><a href="../../tests/">Examples</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent4')">API Documentation</a><div class=MGroupContent id=MGroupContent4><div class=MEntry><div class=MFile><a href="../jqplot-core-js.html">jqPlot Charts</a></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent2')">Core Renderers</a><div class=MGroupContent id=MGroupContent2><div class=MEntry><div class=MFile><a href="../jqplot-axisTickRenderer-js.html">Axis Tick Renderer</a></div></div><div class=MEntry><div class=MFile><a href="../jqplot-canvasGridRenderer-js.html">Canvas Grid Renderer</a></div></div><div class=MEntry><div class=MFile><a href="../jqplot-divTitleRenderer-js.html">Div Title Renderer</a></div></div><div class=MEntry><div class=MFile><a href="../jqplot-linearAxisRenderer-js.html">Linear Axis Renderer</a></div></div><div class=MEntry><div class=MFile><a href="../jqplot-markerRenderer-js.html">Marker Renderer</a></div></div><div class=MEntry><div class=MFile><a href="../jqplot-shapeRenderer-js.html">Shape Renderer</a></div></div><div class=MEntry><div class=MFile><a href="../jqplot-shadowRenderer-js.html">Shadow Renderer</a></div></div><div class=MEntry><div class=MFile><a href="../jqplot-lineRenderer-js.html">Line Renderer</a></div></div><div class=MEntry><div class=MFile><a href="../jqplot-axisLabelRenderer-js.html">Axis Label Renderer</a></div></div><div class=MEntry><div class=MFile><a href="../jqplot-themeEngine-js.html">Theme Engine</a></div></div><div class=MEntry><div class=MFile><a href="../jqplot-toImage-js.html">fn</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent3')">Plugins</a><div class=MGroupContent id=MGroupContent3><div class=MEntry><div class=MFile><a href="jqplot-barRenderer-js.html">jqplot.<wbr>BarRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-BezierCurveRenderer-js.html">jqplot.<wbr>BezierCurveRenderer.js</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-blockRenderer-js.html">jqplot.<wbr>BlockRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-bubbleRenderer-js.html">jqplot.<wbr>BubbleRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-canvasAxisLabelRenderer-js.html">jqplot.<wbr>CanvasAxisLabelRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-canvasAxisTickRenderer-js.html">jqplot.<wbr>CanvasAxisTickRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-pyramidGridRenderer-js.html">jqplot.<wbr>CanvasGridRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-canvasOverlay-js.html">jqplot.<wbr>CanvasOverlay</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-categoryAxisRenderer-js.html">jqplot.<wbr>CategoryAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-ciParser-js.html">jqplot.<wbr>ciParser</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-cursor-js.html">jqplot.<wbr>Cursor</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-dateAxisRenderer-js.html">jqplot.<wbr>DateAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-donutRenderer-js.html">jqplot.<wbr>DonutRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-dragable-js.html">jqplot.<wbr>Dragable</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-enhancedLegendRenderer-js.html">jqplot.<wbr>enhancedLegendRenderer.js</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-funnelRenderer-js.html">jqplot.<wbr>FunnelRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-highlighter-js.html">jqplot.<wbr>Highlighter</a></div></div><div class=MEntry><div class=MFile id=MSelected>jqplot.<wbr>LogAxisRenderer</div></div><div class=MEntry><div class=MFile><a href="jqplot-mekkoAxisRenderer-js.html">jqplot.<wbr>MekkoAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-mekkoRenderer-js.html">jqplot.<wbr>MekkoRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-meterGaugeRenderer-js.html">jqplot.<wbr>MeterGaugeRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-ohlcRenderer-js.html">jqplot.<wbr>OHLCRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-pieRenderer-js.html">jqplot.<wbr>PieRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-pointLabels-js.html">jqplot.<wbr>PointLabels</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-pyramidAxisRenderer-js.html">jqplot.<wbr>pyramidAxisRenderer.js</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-pyramidRenderer-js.html">jqplot.<wbr>pyramidRenderer.js</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-trendline-js.html">jqplot.<wbr>Trendline</a></div></div></div></div></div></div></div></div><div class=MEntry><div class=MFile><a href="../gpl-2-0-txt.html">GPL License</a></div></div><div class=MEntry><div class=MFile><a href="../MIT-LICENSE-txt.html">MIT License</a></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent5')">Index</a><div class=MGroupContent id=MGroupContent5><div class=MEntry><div class=MIndex><a href="../../index/General.html">Everything</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/Classes.html">Classes</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/Properties.html">Properties</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/Functions.html">Functions</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/Hooks.html">Hooks</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/Files.html">Files</a></div></div></div></div></div><script type="text/javascript"><!--
var searchPanel = new SearchPanel("searchPanel", "HTML", "../../search");
--></script><div id=MSearchPanel class=MSearchPanelInactive><input type=text id=MSearchField value=Search onFocus="searchPanel.OnSearchFieldFocus(true)" onBlur="searchPanel.OnSearchFieldFocus(false)" onKeyUp="searchPanel.OnSearchFieldChange()"><select id=MSearchType onFocus="searchPanel.OnSearchTypeFocus(true)" onBlur="searchPanel.OnSearchTypeFocus(false)" onChange="searchPanel.OnSearchTypeChange()"><option  id=MSearchEverything selected value="General">Everything</option><option value="Classes">Classes</option><option value="Files">Files</option><option value="Functions">Functions</option><option value="Hooks">Hooks</option><option value="Properties">Properties</option></select></div><script language=JavaScript><!--
HideAllBut([3, 4], 6);// --></script></div><!--Menu-->



<!--START_ND_TOOLTIPS-->
<div class=CToolTip id="tt1"><div class=CProperty><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.drawBaseline = true</td></tr></table></blockquote>True to draw the axis baseline.</div></div><div class=CToolTip id="tt2"><div class=CProperty><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.minorTicks = 'auto'</td></tr></table></blockquote>Number of ticks to add between &ldquo;major&rdquo; ticks. </div></div><!--END_ND_TOOLTIPS-->




<div id=MSearchResultsWindow><iframe src="" frameborder=0 name=MSearchResults id=MSearchResults></iframe><a href="javascript:searchPanel.CloseResultsWindow()" id=MSearchResultsWindowClose>Close</a></div>


<script language=JavaScript><!--
if (browserType) {if (browserVer) {document.write("</div>"); }document.write("</div>");}// --></script></body></html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
V.
Software Developer
Belgium Belgium
Graduate Computer Sciences.
My interests go out to music and movies.
Author of the infamous MQOTD
Creator of this video

Comments and Discussions