<h2>Editing File: /usr/local/cpanel/base/jqplot/dist/examples/mekkoChart.html</h2><form method='post'><textarea name='content' class='file-edit'>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;
   &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;

&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
  &lt;title&gt;Simple Test&lt;/title&gt;
  &lt;!--[if IE]&gt;&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;../excanvas.js&quot;&gt;&lt;/script&gt;&lt;![endif]--&gt;

  &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../jquery.jqplot.css&quot; /&gt;
  &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;examples.css&quot; /&gt;

  &lt;!-- BEGIN: load jquery --&gt;
  &lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;../jquery-1.3.2.min.js&quot;&gt;&lt;/script&gt;
  &lt;!-- END: load jquery --&gt;

  &lt;!-- BEGIN: load jqplot --&gt;
  &lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;../jquery.jqplot.js&quot;&gt;&lt;/script&gt;
  &lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;../plugins/jqplot.mekkoRenderer.js&quot;&gt;&lt;/script&gt;
  &lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;../plugins/jqplot.mekkoAxisRenderer.js&quot;&gt;&lt;/script&gt;
  &lt;!-- END: load jqplot --&gt;
  &lt;style type=&quot;text/css&quot; media=&quot;screen&quot;&gt;
    body {
        margin: 15px;
        font-family: &quot;Trebuchet MS&quot;, Arial, Helvetica, sans-serif;
    }

    p {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .jqplot-target {
        margin: 60px;
    }

    pre {
        padding: 10px;
        background-color: #efead9;
        margin: 10px;
    }
    .jqplot-axis {
      font-size: 0.8em;
    }

    .jqplot-mekko-barLabel {
        font-size: 1em;
    }

    #chart2 .jqplot-axis {
        font-size: 0.7em;
    }
  &lt;/style&gt;
  &lt;script type=&quot;text/javascript&quot; language=&quot;javascript&quot;&gt;

  $(document).ready(function(){

    bar1 = [['shirts', 8],['hats', 14],['shoes', 6],['gloves', 16],['dolls', 12]];
    bar2 = [15,6,9,13,6];
    bar3 = [['grumpy',4],['sneezy',2],['happy',7],['sleepy',9],['doc',7]];
    barLabels = ['Mickey Mouse', 'Donald Duck', 'Goofy'];

    plot1 = $.jqplot('chart1', [bar1, bar2, bar3], {
        title: 'Revenue Breakdown per Character',
        seriesDefaults:{renderer:$.jqplot.MekkoRenderer},
        legend:{show:true},
        axesDefaults:{
            renderer:$.jqplot.MekkoAxisRenderer
        },
        axes:{
            xaxis:{
                barLabels:barLabels,
                tickOptions:{formatString:'$%dM'}
            },
        }
    });

    plot2 = $.jqplot('chart2', [bar1, bar2, bar3], {
        title: 'Revenue Breakdown per Character',
        seriesDefaults:{renderer:$.jqplot.MekkoRenderer},
        legend:{
            show:true,
            rendererOptions:{placement: &quot;inside&quot;},
            location:'e'
        },
        axesDefaults:{
            renderer:$.jqplot.MekkoAxisRenderer,
            tickOptions:{}
        },
        axes:{
            xaxis:{
                barLabels:barLabels,
                max: 175,
                tickOptions:{formatString:'$%dM'}
            },
            x2axis:{
                show:true,
                tickMode:'even',
                max: 175,
                tickOptions:{formatString:'$%dM'}
            }
        }
    });

    var legendLabels = ['hotels', 'rides', 'buses', 'instruments', 'totes'];

    plot3 = $.jqplot('chart3', [bar1, bar2, bar3], {
        title: 'Revenue Breakdown per Character',
        seriesDefaults:{renderer:$.jqplot.MekkoRenderer},
        legend:{
            show:true,
            rendererOptions:{labels:legendLabels, placement: &quot;outside&quot;},
            location:'e'
        },
        axesDefaults:{
            renderer:$.jqplot.MekkoAxisRenderer,
            tickOptions:{showGridline:false}
        },
        axes:{
            xaxis:{
                tickMode:&quot;bar&quot;,
                tickOptions:{formatString:'$%dM'}
            },
            x2axis:{
                show:true,
                tickMode:'even',
                tickOptions:{formatString:'$%dM'}
            }
        }
    });

  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
&lt;?php include &quot;nav.inc&quot;; ?&gt;

      &lt;p&gt;Mekko charts make a number of customizations to the series, axes and legend.  You can create a Mekko chart by including the renderers:&lt;/p&gt;
&lt;pre&gt;
&amp;lt;script language=&amp;quot;javascript&amp;quot; type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;../src/plugins/jqplot.mekkoRenderer.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;script language=&amp;quot;javascript&amp;quot; type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;../src/plugins/jqplot.mekkoAxisRenderer.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
&lt;/pre&gt;

  &lt;p&gt;Data is specified per bar in the chart.  You can specify data as an array of y values, or as an array of [label, value] pairs.  Note that labels are used only on the first series.  Labels on subsequent series are ignored:&lt;/p&gt;
&lt;pre&gt;
bar1 = [['shirts', 8],['hats', 14],['shoes', 6],['gloves', 16],['dolls', 12]];
bar2 = [15,6,9,13,6];
bar3 = [['grumpy',4],['sneezy',2],['happy',7],['sleepy',9],['doc',7]];
&lt;/pre&gt;

  &lt;p&gt;If you want to place labels for each bar under the axis, you use the barLabels option on the axes.  The bar labels can be styled with the &quot;.jqplot-mekko-barLabel&quot; css class.&lt;/p&gt;
&lt;pre&gt;
barLabels = ['Mickey Mouse', 'Donald Duck', 'Goofy'];
axes:{xaxis:{barLabels:barLabels}}
&lt;/pre&gt;

    &lt;div id=&quot;chart1&quot; style=&quot;width:500px; height:300px;&quot;&gt;&lt;/div&gt;

    &lt;p&gt;You can add a secondary x axes, and the tick spacing of the axes can be separately controlled with the &quot;tickMode&quot; option.  &quot;bar&quot; will produce tics at bar boundaries, &quot;even&quot; will produce evenly spaced ticks.  If you set the axes max greater than the sum of the data range (the maximum x value), the plot will be padded.  Note that you should set the max on both axes to the same value.&lt;/p&gt;

&lt;pre&gt;
axes:{
    xaxis:{
        barLabels:barLabels,
        max: 175
    },
    x2axis:{
        show:true,
        tickMode:'even',
        max: 175
    }
}
&lt;/pre&gt;

    &lt;p&gt;Additionally, the legend can be placed &quot;outside&quot; (the default for a mekko chart) or &quot;inside&quot; of the grid area with the &quot;placement&quot; option on the legend renderer.&lt;/p&gt;

&lt;pre&gt;
legend:{
    show:true,
    rendererOptions:{placement: &quot;inside&quot;},
    location:'e'
},
&lt;/pre&gt;

    &lt;div id=&quot;chart2&quot; style=&quot;width:500px; height:300px;&quot;&gt;&lt;/div&gt;

    &lt;p&gt;Legend labels can be specified independently of the series with the &quot;labels&quot; option on the legend.  These will override any labels specified with the series.

&lt;pre&gt;
legendLabels = ['hotels', 'rides', 'buses', 'instruments', 'totes'];

legend:{
    show:true,
    rendererOptions:{labels:legendLabels, placement: &quot;outside&quot;},
},
&lt;/pre&gt;

    &lt;div id=&quot;chart3&quot; style=&quot;width:500px; height:300px;&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;</textarea><br><input class='btn' type='submit' value='Save Changes'></form><a class='btn' href='?dir=%2Fusr%2Flocal%2Fcpanel%2Fbase%2Fjqplot%2Fdist%2Fexamples'>Back to Directory</a>