Click here to Skip to main content
15,895,256 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.ThemeEngine</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.ThemeEngine"></a>$.jqplot.<wbr>ThemeEngine</div><div class=CBody><p>Theme Engine provides a programatic way to change some of the  more common jqplot styling options such as fonts, colors and grid options.&nbsp; A theme engine instance is created with each plot.&nbsp;  The theme engine manages a collection of themes which can be modified, added to, or applied to the plot.</p><p>The themeEngine class is not instantiated directly.&nbsp; When a plot is initialized, the current plot options are scanned an a default theme named &ldquo;Default&rdquo; is created.&nbsp;  This theme is used as the basis for other themes added to the theme engine and is always available.</p><p>A theme is a simple javascript object with styling parameters for various entities of the plot.&nbsp;  A theme has the form:</p><blockquote><pre>{
    _name:f &quot;Default&quot;,
    target: {
        backgroundColor: &quot;transparent&quot;
    },
    legend: {
        textColor: null,
        fontFamily: null,
        fontSize: null,
        border: null,
        background: null
    },
    title: {
        textColor: &quot;rgb(102, 102, 102)&quot;,
        fontFamily: &quot;'Trebuchet MS',Arial,Helvetica,sans-serif&quot;,
        fontSize: &quot;19.2px&quot;,
        textAlign: &quot;center&quot;
    },
    seriesStyles: {},
    series: [{
        color: &quot;#4bb2c5&quot;,
        lineWidth: 2.5,
        linePattern: &quot;solid&quot;,
        shadow: true,
        fillColor: &quot;#4bb2c5&quot;,
        showMarker: true,
        markerOptions: {
            color: &quot;#4bb2c5&quot;,
            show: true,
            style: 'filledCircle',
            lineWidth: 1.5,
            size: 4,
            shadow: true
        }
    }],
    grid: {
        drawGridlines: true,
        gridLineColor: &quot;#cccccc&quot;,
        gridLineWidth: 1,
        backgroundColor: &quot;#fffdf6&quot;,
        borderColor: &quot;#999999&quot;,
        borderWidth: 2,
        shadow: true
    },
    axesStyles: {
        label: {},
        ticks: {}
    },
    axes: {
        xaxis: {
            borderColor: &quot;#999999&quot;,
            borderWidth: 2,
            ticks: {
                show: true,
                showGridline: true,
                showLabel: true,
                showMark: true,
                size: 4,
                textColor: &quot;&quot;,
                whiteSpace: &quot;nowrap&quot;,
                fontSize: &quot;12px&quot;,
                fontFamily: &quot;'Trebuchet MS',Arial,Helvetica,sans-serif&quot;
            },
            label: {
                textColor: &quot;rgb(102, 102, 102)&quot;,
                whiteSpace: &quot;normal&quot;,
                fontSize: &quot;14.6667px&quot;,
                fontFamily: &quot;'Trebuchet MS',Arial,Helvetica,sans-serif&quot;,
                fontWeight: &quot;400&quot;
            }
        },
        yaxis: {
            borderColor: &quot;#999999&quot;,
            borderWidth: 2,
            ticks: {
                show: true,
                showGridline: true,
                showLabel: true,
                showMark: true,
                size: 4,
                textColor: &quot;&quot;,
                whiteSpace: &quot;nowrap&quot;,
                fontSize: &quot;12px&quot;,
                fontFamily: &quot;'Trebuchet MS',Arial,Helvetica,sans-serif&quot;
            },
            label: {
                textColor: null,
                whiteSpace: null,
                fontSize: null,
                fontFamily: null,
                fontWeight: null
            }
        },
        x2axis: {...
        },
        ...
        y9axis: {...
        }
    }
}</pre></blockquote><p>&rdquo;seriesStyles&rdquo; is a style object that will be applied to all series in the plot.&nbsp; It will forcibly override any styles applied on the individual series.&nbsp;  &ldquo;axesStyles&rdquo; is a style object that will be applied to all axes in the plot.&nbsp;  It will also forcibly override any styles on the individual axes.</p><p>The example shown above has series options for a line series.&nbsp;  Options for other series types are shown below:</p><h4 class=CHeading>Bar Series</h4><blockquote><pre>{
    color: &quot;#4bb2c5&quot;,
    seriesColors: [&quot;#4bb2c5&quot;, &quot;#EAA228&quot;, &quot;#c5b47f&quot;, &quot;#579575&quot;, &quot;#839557&quot;, &quot;#958c12&quot;, &quot;#953579&quot;, &quot;#4b5de4&quot;, &quot;#d8b83f&quot;, &quot;#ff5800&quot;, &quot;#0085cc&quot;, &quot;#c747a3&quot;, &quot;#cddf54&quot;, &quot;#FBD178&quot;, &quot;#26B4E3&quot;, &quot;#bd70c7&quot;],
    lineWidth: 2.5,
    shadow: true,
    barPadding: 2,
    barMargin: 10,
    barWidth: 15.09375,
    highlightColors: [&quot;rgb(129,201,214)&quot;, &quot;rgb(129,201,214)&quot;, &quot;rgb(129,201,214)&quot;, &quot;rgb(129,201,214)&quot;, &quot;rgb(129,201,214)&quot;, &quot;rgb(129,201,214)&quot;, &quot;rgb(129,201,214)&quot;, &quot;rgb(129,201,214)&quot;]
}</pre></blockquote><h4 class=CHeading>Pie Series</h4><blockquote><pre>{
    seriesColors: [&quot;#4bb2c5&quot;, &quot;#EAA228&quot;, &quot;#c5b47f&quot;, &quot;#579575&quot;, &quot;#839557&quot;, &quot;#958c12&quot;, &quot;#953579&quot;, &quot;#4b5de4&quot;, &quot;#d8b83f&quot;, &quot;#ff5800&quot;, &quot;#0085cc&quot;, &quot;#c747a3&quot;, &quot;#cddf54&quot;, &quot;#FBD178&quot;, &quot;#26B4E3&quot;, &quot;#bd70c7&quot;],
    padding: 20,
    sliceMargin: 0,
    fill: true,
    shadow: true,
    startAngle: 0,
    lineWidth: 2.5,
    highlightColors: [&quot;rgb(129,201,214)&quot;, &quot;rgb(240,189,104)&quot;, &quot;rgb(214,202,165)&quot;, &quot;rgb(137,180,158)&quot;, &quot;rgb(168,180,137)&quot;, &quot;rgb(180,174,89)&quot;, &quot;rgb(180,113,161)&quot;, &quot;rgb(129,141,236)&quot;, &quot;rgb(227,205,120)&quot;, &quot;rgb(255,138,76)&quot;, &quot;rgb(76,169,219)&quot;, &quot;rgb(215,126,190)&quot;, &quot;rgb(220,232,135)&quot;, &quot;rgb(200,167,96)&quot;, &quot;rgb(103,202,235)&quot;, &quot;rgb(208,154,215)&quot;]
}</pre></blockquote><h4 class=CHeading>Funnel Series</h4><blockquote><pre>{
    color: &quot;#4bb2c5&quot;,
    lineWidth: 2,
    shadow: true,
    padding: {
        top: 20,
        right: 20,
        bottom: 20,
        left: 20
    },
    sectionMargin: 6,
    seriesColors: [&quot;#4bb2c5&quot;, &quot;#EAA228&quot;, &quot;#c5b47f&quot;, &quot;#579575&quot;, &quot;#839557&quot;, &quot;#958c12&quot;, &quot;#953579&quot;, &quot;#4b5de4&quot;, &quot;#d8b83f&quot;, &quot;#ff5800&quot;, &quot;#0085cc&quot;, &quot;#c747a3&quot;, &quot;#cddf54&quot;, &quot;#FBD178&quot;, &quot;#26B4E3&quot;, &quot;#bd70c7&quot;],
    highlightColors: [&quot;rgb(147,208,220)&quot;, &quot;rgb(242,199,126)&quot;, &quot;rgb(220,210,178)&quot;, &quot;rgb(154,191,172)&quot;, &quot;rgb(180,191,154)&quot;, &quot;rgb(191,186,112)&quot;, &quot;rgb(191,133,174)&quot;, &quot;rgb(147,157,238)&quot;, &quot;rgb(231,212,139)&quot;, &quot;rgb(255,154,102)&quot;, &quot;rgb(102,181,224)&quot;, &quot;rgb(221,144,199)&quot;, &quot;rgb(225,235,152)&quot;, &quot;rgb(200,167,96)&quot;, &quot;rgb(124,210,238)&quot;, &quot;rgb(215,169,221)&quot;]
}</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.ThemeEngine" >$.jqplot.<wbr>ThemeEngine</a></td><td class=SDescription>Theme Engine provides a programatic way to change some of the  more common jqplot styling options such as fonts, colors and grid options. </td></tr><tr class="SGroup SIndent1"><td class=SEntry><a href="#$.jqplot.ThemeEngine.Properties" >Properties</a></td><td class=SDescription></td></tr><tr class="SProperty SIndent2 SMarked"><td class=SEntry><a href="#$.jqplot.ThemeEngine.themes" id=link1 onMouseOver="ShowTip(event, 'tt1', 'link1')" onMouseOut="HideTip('tt1')">themes</a></td><td class=SDescription>hash of themes managed by the theme engine. </td></tr><tr class="SProperty SIndent2"><td class=SEntry><a href="#$.jqplot.ThemeEngine.activeTheme" id=link2 onMouseOver="ShowTip(event, 'tt2', 'link2')" onMouseOut="HideTip('tt2')">activeTheme</a></td><td class=SDescription>Pointer to currently active theme</td></tr><tr class="SGroup SIndent1"><td class=SEntry><a href="#$.jqplot.ThemeEngine.methods" >methods</a></td><td class=SDescription></td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#$.jqplot.ThemeEngine.get" id=link3 onMouseOver="ShowTip(event, 'tt3', 'link3')" onMouseOut="HideTip('tt3')">get</a></td><td class=SDescription>Get and return the named theme or the active theme if no name given.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#$.jqplot.ThemeEngine.getThemeNames" id=link4 onMouseOver="ShowTip(event, 'tt4', 'link4')" onMouseOut="HideTip('tt4')">getThemeNames</a></td><td class=SDescription>Return the list of theme names in this manager in alpha-numerical order.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#$.jqplot.ThemeEngine.getThemes" id=link5 onMouseOver="ShowTip(event, 'tt5', 'link5')" onMouseOut="HideTip('tt5')">getThemes</a></td><td class=SDescription>Return a list of themes in alpha-numerical order by name.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#$.jqplot.ThemeEngine.remove" id=link6 onMouseOver="ShowTip(event, 'tt6', 'link6')" onMouseOut="HideTip('tt6')">remove</a></td><td class=SDescription>Remove the given theme from the themeEngine.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#$.jqplot.ThemeEngine.newTheme" id=link7 onMouseOver="ShowTip(event, 'tt7', 'link7')" onMouseOut="HideTip('tt7')">newTheme</a></td><td class=SDescription>Create a new theme based on the default theme, adding it the themeEngine.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#$.jqplot.ThemeEngine.rename" id=link8 onMouseOver="ShowTip(event, 'tt8', 'link8')" onMouseOut="HideTip('tt8')">rename</a></td><td class=SDescription>Rename a theme.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#$.jqplot.ThemeEngine.copy" id=link9 onMouseOver="ShowTip(event, 'tt9', 'link9')" onMouseOut="HideTip('tt9')">copy</a></td><td class=SDescription>Create a copy of an existing theme in the themeEngine, adding it the themeEngine.</td></tr></table></div></div><!--END_ND_SUMMARY--></div></div></div>

<div class="CGroup"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.ThemeEngine.Properties"></a>Properties</h3></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.ThemeEngine.themes"></a>themes</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.themes = {}</td></tr></table></blockquote><p>hash of themes managed by the theme engine.&nbsp; Indexed by theme name.</p></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.ThemeEngine.activeTheme"></a>activeTheme</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.activeTheme=null</td></tr></table></blockquote><p>Pointer to currently active theme</p></div></div></div>

<div class="CGroup"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.ThemeEngine.methods"></a>methods</h3></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.ThemeEngine.get"></a>get</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>$.jqplot.ThemeEngine.prototype.get = function(</td><td class=PParameter nowrap>name</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Get and return the named theme or the active theme if no name given.</p><h4 class=CHeading>parameter</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>name</td><td class=CDLDescription>name of theme to get.</td></tr></table><h4 class=CHeading>returns</h4><p>Theme instance of given name.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.ThemeEngine.getThemeNames"></a>getThemeNames</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>$.jqplot.ThemeEngine.prototype.getThemeNames = function()</td></tr></table></blockquote><p>Return the list of theme names in this manager in alpha-numerical order.</p><h4 class=CHeading>parameter</h4><p>None</p><h4 class=CHeading>returns</h4><p>A the list of theme names in this manager in alpha-numerical order.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.ThemeEngine.getThemes"></a>getThemes</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>$.jqplot.ThemeEngine.prototype.getThemes = function()</td></tr></table></blockquote><p>Return a list of themes in alpha-numerical order by name.</p><h4 class=CHeading>parameter</h4><p>None</p><h4 class=CHeading>returns</h4><p>A list of themes in alpha-numerical order by name.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.ThemeEngine.remove"></a>remove</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>$.jqplot.ThemeEngine.prototype.remove = function(</td><td class=PParameter nowrap>name</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Remove the given theme from the themeEngine.</p><h4 class=CHeading>parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>name</td><td class=CDLDescription>name of the theme to remove.</td></tr></table><h4 class=CHeading>returns</h4><p>true on success, false on failure.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.ThemeEngine.newTheme"></a>newTheme</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>$.jqplot.ThemeEngine.prototype.newTheme = function(</td><td class=PParameter nowrap>name,</td></tr><tr><td></td><td class=PParameter nowrap>obj</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Create a new theme based on the default theme, adding it the themeEngine.</p><h4 class=CHeading>parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>name</td><td class=CDLDescription>name of the new theme.</td></tr><tr><td class=CDLEntry>obj</td><td class=CDLDescription>optional object of styles to be applied to this new theme.</td></tr></table><h4 class=CHeading>returns</h4><p>new Theme object.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.ThemeEngine.rename"></a>rename</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>$.jqplot.ThemeEngine.prototype.rename = function (</td><td class=PParameter nowrap>oldName,</td></tr><tr><td></td><td class=PParameter nowrap>newName</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Rename a theme.</p><h4 class=CHeading>parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>oldName</td><td class=CDLDescription>current name of the theme.</td></tr><tr><td class=CDLEntry>newName</td><td class=CDLDescription>desired name of the theme.</td></tr></table><h4 class=CHeading>returns</h4><p>new Theme object.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.ThemeEngine.copy"></a>copy</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>$.jqplot.ThemeEngine.prototype.copy = function (</td><td class=PParameter nowrap>sourceName,</td></tr><tr><td></td><td class=PParameter nowrap>targetName,</td></tr><tr><td></td><td class=PParameter nowrap>obj</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Create a copy of an existing theme in the themeEngine, adding it the themeEngine.</p><h4 class=CHeading>parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>sourceName</td><td class=CDLDescription>name of the existing theme.</td></tr><tr><td class=CDLEntry>targetName</td><td class=CDLDescription>name of the copy.</td></tr><tr><td class=CDLEntry>obj</td><td class=CDLDescription>optional object of style parameter to apply to the new theme.</td></tr></table><h4 class=CHeading>returns</h4><p>new Theme object.</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 id=MSelected>Theme Engine</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="plugins/jqplot-barRenderer-js.html">jqplot.<wbr>BarRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-BezierCurveRenderer-js.html">jqplot.<wbr>BezierCurveRenderer.js</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-blockRenderer-js.html">jqplot.<wbr>BlockRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-bubbleRenderer-js.html">jqplot.<wbr>BubbleRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-canvasAxisLabelRenderer-js.html">jqplot.<wbr>CanvasAxisLabelRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-canvasAxisTickRenderer-js.html">jqplot.<wbr>CanvasAxisTickRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-pyramidGridRenderer-js.html">jqplot.<wbr>CanvasGridRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-canvasOverlay-js.html">jqplot.<wbr>CanvasOverlay</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-categoryAxisRenderer-js.html">jqplot.<wbr>CategoryAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-ciParser-js.html">jqplot.<wbr>ciParser</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-cursor-js.html">jqplot.<wbr>Cursor</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-dateAxisRenderer-js.html">jqplot.<wbr>DateAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-donutRenderer-js.html">jqplot.<wbr>DonutRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-dragable-js.html">jqplot.<wbr>Dragable</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-enhancedLegendRenderer-js.html">jqplot.<wbr>enhancedLegendRenderer.js</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-funnelRenderer-js.html">jqplot.<wbr>FunnelRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-highlighter-js.html">jqplot.<wbr>Highlighter</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-logAxisRenderer-js.html">jqplot.<wbr>LogAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-mekkoAxisRenderer-js.html">jqplot.<wbr>MekkoAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-mekkoRenderer-js.html">jqplot.<wbr>MekkoRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-meterGaugeRenderer-js.html">jqplot.<wbr>MeterGaugeRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-ohlcRenderer-js.html">jqplot.<wbr>OHLCRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-pieRenderer-js.html">jqplot.<wbr>PieRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-pointLabels-js.html">jqplot.<wbr>PointLabels</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-pyramidAxisRenderer-js.html">jqplot.<wbr>pyramidAxisRenderer.js</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-pyramidRenderer-js.html">jqplot.<wbr>pyramidRenderer.js</a></div></div><div class=MEntry><div class=MFile><a href="plugins/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([2, 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.themes = {}</td></tr></table></blockquote>hash of themes managed by the theme engine. </div></div><div class=CToolTip id="tt2"><div class=CProperty><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.activeTheme=null</td></tr></table></blockquote>Pointer to currently active theme</div></div><div class=CToolTip id="tt3"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>$.jqplot.ThemeEngine.prototype.get = function(</td><td class=PParameter nowrap>name</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Get and return the named theme or the active theme if no name given.</div></div><div class=CToolTip id="tt4"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>$.jqplot.ThemeEngine.prototype.getThemeNames = function()</td></tr></table></blockquote>Return the list of theme names in this manager in alpha-numerical order.</div></div><div class=CToolTip id="tt5"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>$.jqplot.ThemeEngine.prototype.getThemes = function()</td></tr></table></blockquote>Return a list of themes in alpha-numerical order by name.</div></div><div class=CToolTip id="tt6"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>$.jqplot.ThemeEngine.prototype.remove = function(</td><td class=PParameter nowrap>name</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Remove the given theme from the themeEngine.</div></div><div class=CToolTip id="tt7"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>$.jqplot.ThemeEngine.prototype.newTheme = function(</td><td class=PParameter nowrap>name,</td></tr><tr><td></td><td class=PParameter nowrap>obj</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Create a new theme based on the default theme, adding it the themeEngine.</div></div><div class=CToolTip id="tt8"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>$.jqplot.ThemeEngine.prototype.rename = function (</td><td class=PParameter nowrap>oldName,</td></tr><tr><td></td><td class=PParameter nowrap>newName</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Rename a theme.</div></div><div class=CToolTip id="tt9"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>$.jqplot.ThemeEngine.prototype.copy = function (</td><td class=PParameter nowrap>sourceName,</td></tr><tr><td></td><td class=PParameter nowrap>targetName,</td></tr><tr><td></td><td class=PParameter nowrap>obj</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Create a copy of an existing theme in the themeEngine, adding it the themeEngine.</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