public/javascripts/jqplot/examples/mekkoCharts.php.orig

   1 <?php
   2     $title = "Mekko Charts";
   3     // $plotTargets = array (array('id'=>'chart1', 'width'=>700, 'height'=>400));
   4 ?>
   5 <?php include "opener.php"; ?>
   6
   7 <!-- Example scripts go here -->
   8   <style type="text/css" media="screen">
   9     body {
  10         margin: 15px;
  11         font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  12     }
  13
  14     p {
  15         margin-top: 20px;
  16         margin-bottom: 20px;
  17     }
  18
  19     .jqplot-target {
  20         margin: 60px;
  21     }
  22
  23     pre {
  24         padding: 10px;
  25         background-color: #efead9;
  26         margin: 10px;
  27     }
  28     .jqplot-axis {
  29       font-size: 0.8em;
  30     }
  31
  32     .jqplot-mekko-barLabel {
  33         font-size: 1em;
  34     }
  35
  36     #chart2 .jqplot-axis {
  37         font-size: 0.7em;
  38     }
  39
  40     #chart3 .jqplot-title {
  41         padding-bottom: 40px;
  42     }
  43   </style>
  44 <p>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:</p>
  45 <pre>
  46 bar1 = [['shirts', 8],['hats', 14],['shoes', 6],['gloves', 16],['dolls', 12]];
  47 bar2 = [15,6,9,13,6];
  48 bar3 = [['grumpy',4],['sneezy',2],['happy',7],['sleepy',9],['doc',7]];
  49 </pre>
  50
  51   <p>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 ".jqplot-mekko-barLabel" css class.</p>
  52 <pre>
  53 barLabels = ['Mickey Mouse', 'Donald Duck', 'Goofy'];
  54 axes:{xaxis:{barLabels:barLabels}}
  55 </pre>
  56
  57     <div id="chart1" style="width:500px; height:300px;"></div>
  58
  59     <p>You can add a secondary x axes, and the tick spacing of the axes can be separately controlled with the "tickMode" option.  "bar" will produce tics at bar boundaries, "even" 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.</p>
  60
  61 <pre>
  62 axes:{
  63     xaxis:{
  64         barLabels:barLabels,
  65         max: 175
  66     },
  67     x2axis:{
  68         show:true,
  69         tickMode:'even',
  70         max: 175
  71     }
  72 }
  73 </pre>
  74
  75     <p>Here the borders between chart areas have been given a custom color using the "borderColor" option on the series renderer.</p>
  76
  77 <pre>
  78     seriesDefaults:{renderer:$.jqplot.MekkoRenderer, rendererOptions: {borderColor: '#dddddd'}}
  79 </pre>
  80
  81     <p>Additionally, the legend can be placed "outside" (the default for a mekko chart) or "inside" of the grid area with the "placement" option on the legend renderer.</p>
  82
  83 <pre>
  84 legend:{
  85     show:true,
  86     rendererOptions:{placement: "insideGrid"},
  87     location:'e'
  88 },
  89 </pre>
  90
  91     <div id="chart2" style="width:500px; height:300px;"></div>
  92
  93     <p>Legend labels can be specified independently of the series with the "labels" option on the legend.  These will override any labels specified with the series. There are also options to control the number of rows and number of columns in the legend as well as placement.</p>
  94
  95     <p>Here the legend is positioned to the "north" and set to render 1 row tall (number of columns determined automatically).  Note that an extra css specification was added to pad the bottom of the title of this chart to give room for the legend above the plot.</p>
  96
  97 <pre>
  98 legendLabels = ['hotels', 'rides', 'buses', 'instruments', 'totes'];
  99
 100 legend:{
 101     show:true,
 102     location: 'n',
 103     labels: legendLabels,
 104     rendererOptions:{numberRows: 1, placement: "outside"}
 105 },
 106 </pre>
 107
 108     <p>Also, the borders between the chart areas have been turned off with the "showBorders: false" option.</p>
 109
 110 <pre>
 111     seriesDefaults:{renderer:$.jqplot.MekkoRenderer, rendererOptions: {showBorders: false}}
 112 </pre>
 113
 114     <div id="chart3" style="width:500px; height:300px;"></div>
 115
 116 <script type="text/javascript" class="code">
 117 $(document).ready(function(){
 118     var bar1 = [['shirts', 8],['hats', 14],['shoes', 6],['gloves', 16],['dolls', 12]];
 119     var bar2 = [15,6,9,13,6];
 120     var bar3 = [['grumpy',4],['sneezy',2],['happy',7],['sleepy',9],['doc',7]];
 121     var barLabels = ['Mickey Mouse', 'Donald Duck', 'Goofy'];
 122
 123     plot1 = $.jqplot('chart1', [bar1, bar2, bar3], {
 124         title: 'Revenue Breakdown per Character',
 125         seriesDefaults:{renderer:$.jqplot.MekkoRenderer},
 126         legend:{show:true},
 127         axesDefaults:{
 128             renderer:$.jqplot.MekkoAxisRenderer
 129         },
 130         axes:{
 131             xaxis:{
 132                 barLabels:barLabels,
 133                 tickOptions:{formatString:'$%dM'}
 134             }
 135         }
 136     });
 137 });
 138 </script>
 139
 140 <script type="text/javascript" class="code">
 141 $(document).ready(function(){
 142     var bar1 = [['shirts', 8],['hats', 14],['shoes', 6],['gloves', 16],['dolls', 12]];
 143     var bar2 = [15,6,9,13,6];
 144     var bar3 = [['grumpy',4],['sneezy',2],['happy',7],['sleepy',9],['doc',7]];
 145     var barLabels = ['Mickey Mouse', 'Donald Duck', 'Goofy'];
 146
 147     var plot2 = $.jqplot('chart2', [bar1, bar2, bar3], {
 148         title: 'Revenue Breakdown per Character',
 149         seriesDefaults:{renderer:$.jqplot.MekkoRenderer, rendererOptions: {borderColor: '#dddddd'}},
 150         legend:{
 151             show:true,
 152             rendererOptions:{placement: "insideGrid"},
 153             location:'e'
 154         },
 155         axesDefaults:{
 156             renderer:$.jqplot.MekkoAxisRenderer,
 157             tickOptions:{}
 158         },
 159         axes:{
 160             xaxis:{
 161                 barLabels:barLabels,
 162                                 rendererOptions: {
 163                                     barLabelOptions: {
 164                                       angle: -35
 165                                     },
 166                                 barLabelRenderer: $.jqplot.CanvasAxisLabelRenderer
 167                                 },
 168                 max: 175,
 169                 tickOptions:{formatString:'$%dM'}
 170             },
 171             x2axis:{
 172                 show:true,
 173                 tickMode:'even',
 174                 max: 175,
 175                 tickOptions:{formatString:'$%dM'}
 176             }
 177         }
 178     });
 179 });
 180 </script>
 181
 182 <script type="text/javascript" class="code">
 183 $(document).ready(function(){
 184     var bar1 = [['shirts', 8],['hats', 14],['shoes', 6],['gloves', 16],['dolls', 12]];
 185     var bar2 = [15,6,9,13,6];
 186     var bar3 = [['grumpy',4],['sneezy',2],['happy',7],['sleepy',9],['doc',7]];
 187     var barLabels = ['Mickey Mouse', 'Donald Duck', 'Goofy'];
 188
 189     var legendLabels = ['hotels', 'rides', 'buses', 'instruments', 'totes'];
 190
 191     var plot3 = $.jqplot('chart3', [bar1, bar2, bar3], {
 192         title: 'Revenue Breakdown per Character',
 193         seriesDefaults:{renderer:$.jqplot.MekkoRenderer, rendererOptions: {showBorders: false}},
 194         legend:{
 195             show:true,
 196             location: 'n',
 197             labels: legendLabels,
 198             rendererOptions:{numberRows: 1, placement: "outside"}
 199         },
 200         axesDefaults:{
 201             renderer:$.jqplot.MekkoAxisRenderer,
 202             tickOptions:{showGridline:false}
 203         },
 204         axes:{
 205             xaxis:{
 206                 tickMode:"bar",
 207                 tickOptions:{formatString:'$%dM'}
 208             }
 209         }
 210     });
 211 });
 212 </script>
 213
 214 <!-- End example scripts -->
 215
 216 <!-- Don't touch this! -->
 217
 218 <?php include "commonScripts.html" ?>
 219
 220 <!-- End Don't touch this! -->
 221
 222 <!-- Additional plugins go here -->
 223
 224   <script class="include" type="text/javascript" src="../src/jquery.jqplot.js"></script>
 225   <script class="include" type="text/javascript" src="../src/plugins/jqplot.mekkoRenderer.js"></script>
 226   <script class="include" type="text/javascript" src="../src/plugins/jqplot.mekkoAxisRenderer.js"></script>
 227   <script class="include" type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.js"></script>
 228   <script class="include" type="text/javascript" src="../src/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
 229
 230 <!-- End additional plugins -->
 231
 232 <?php include "closer.html"; ?>