public/javascripts/jqplot/examples/point-labels.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5
   6         <title>Data Point labels</title>
   7
   8     <link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
   9     <link rel="stylesheet" type="text/css" href="examples.min.css" />
  10     <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" />
  11     <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" />
  12
  13   <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
  14     <script class="include" type="text/javascript" src="../jquery.min.js"></script>
  15
  16
  17 </head>
  18 <body>
  19     <div class="logo">
  20    <div class="nav">
  21    <a class="nav" href="../../../index.php"><span>&gt;</span>Home</a>
  22    <a class="nav"  href="../../../docs/"><span>&gt;</span>Docs</a>
  23    <a class="nav"  href="../../download/"><span>&gt;</span>Download</a>
  24    <a class="nav" href="../../../info.php"><span>&gt;</span>Info</a>
  25    <a class="nav"  href="../../../donate.php"><span>&gt;</span>Donate</a>
  26    </div>
  27 </div>
  28     <div class="example-content">
  29
  30     <div class="example-nav">
  31   <a href="pieTest4.html">Previous</a> <a href="./">Examples</a> <a href="resizablePlot.html">Next</a></div>
  32
  33
  34 <style type="text/css">
  35 #chart3 .jqplot-point-label {
  36   border: 1.5px solid #aaaaaa;
  37   padding: 1px 3px;
  38   background-color: #eeccdd;
  39 }
  40 </style>
  41
  42 <!-- Example scripts go here -->
  43 <P>The pointLabels plugin places labels on the plot at the data point locations.  Labeles can use the series data array or a separate labels array.  If using the series data, the last value in the data point array is used as the label by default.</p>
  44
  45 <div id="chart1" style="height:300px; width:500px;"></div>
  46
  47 <pre class="code prettyprint brush: js"></pre>
  48
  49 <P>Additional data can be added to the series and it will be used for labels. If additional data is provided, each data point must have a value for the label, even if it is "null".</p>
  50
  51 <div id="chart2" style="height:300px; width:500px;"></div>
  52
  53 <pre class="code prettyprint brush: js"></pre>
  54
  55 <P>Labels work with Bar charts as well.  Here, the Labels have been supplied through the "labels" array on the "pointLabels" option to the series.  Also, additional css styling has been provided to the labels.</p>
  56
  57 <div id="chart3" style="height:300px; width:500px;"></div>
  58
  59 <pre class="prettyprint brush: html">
  60 <style type="text/css">
  61 #chart3 .jqplot-point-label {
  62   border: 1.5px solid #aaaaaa;
  63   padding: 1px 3px;
  64   background-color: #eeccdd;
  65 }
  66 </style>
  67 </pre>
  68 <pre class="code prettyprint brush: js"></pre>
  69
  70 <P>Point labels can be used on stacked bar charts.  If no labels array is specified, they will use data from the chart.  Values can be displayed individually for each series (stackedValue option is false, the default), or cumulative values for all series can be displayed (stackedValue option is true).</p>
  71
  72 <div id="chart4" style="height:300px; width:500px;"></div>
  73
  74 <pre class="code prettyprint brush: js"></pre>
  75
  76 <P>Data point labels have an "edgeTolerance" option.  This options controls how close the data point label can be to an axis edge and still be drawn.  The default of 0 allows labels to touch the axis.  Positive values will increase the required distance between the axis and label, negative values will allow labels to overlap axes.</p>
  77
  78 <div id="chart5" style="height:300px; width:500px;"></div>
  79
  80 <pre class="code prettyprint brush: js"></pre>
  81
  82 <script class="code" type="text/javascript">
  83 $(document).ready(function(){
  84   var line1 = [14, 32, 41, 44, 40, 47, 53, 67];
  85   var plot1 = $.jqplot('chart1', [line1], {
  86       title: 'Chart with Point Labels',
  87       seriesDefaults: {
  88         showMarker:false,
  89         pointLabels: { show:true }
  90       }
  91   });
  92 });
  93 </script>
  94
  95
  96 <script class="code" type="text/javascript">
  97 $(document).ready(function(){
  98   var line1 = [[-12, 7, null], [-3, 14, null], [2, -1, '(low)'],
  99       [7, -1, '(low)'], [11, 11, null], [13, -1, '(low)']];
 100   var plot2 = $.jqplot('chart2', [line1], {
 101     title: 'Point Labels From Extra Series Data',
 102     seriesDefaults: {
 103       showMarker:false,
 104       pointLabels:{ show:true, location:'s', ypadding:3 }
 105     },
 106     axes:{ yaxis:{ pad: 1.3 } }
 107   });
 108 });
 109 </script>
 110
 111
 112 <script class="code" type="text/javascript">
 113 $(document).ready(function(){
 114   var line1 = [14, 32, 41, 44, 40];
 115   var plot3 = $.jqplot('chart3', [line1], {
 116     title: 'Bar Chart with Point Labels',
 117     seriesDefaults: {renderer: $.jqplot.BarRenderer},
 118     series:[
 119      {pointLabels:{
 120         show: true,
 121         labels:['fourteen', 'thirty two', 'fourty one', 'fourty four', 'fourty']
 122       }}],
 123     axes: {
 124       xaxis:{renderer:$.jqplot.CategoryAxisRenderer},
 125       yaxis:{padMax:1.3}}
 126   });
 127 });
 128 </script>
 129
 130 <script class="code" type="text/javascript">
 131 $(document).ready(function(){
 132   var line1 = [14, 32, 41, 44, 40, 37, 29];
 133   var line2 = [7, 12, 15, 17, 20, 27, 39];
 134   var plot4 = $.jqplot('chart4', [line1, line2], {
 135       title: 'Stacked Bar Chart with Cumulative Point Labels',
 136       stackSeries: true,
 137       seriesDefaults: {
 138           renderer: $.jqplot.BarRenderer,
 139           rendererOptions:{barMargin: 25},
 140           pointLabels:{show:true, stackedValue: true}
 141       },
 142       axes: {
 143           xaxis:{renderer:$.jqplot.CategoryAxisRenderer}
 144       }
 145   });
 146 });
 147 </script>
 148
 149
 150 <script class="code" type="text/javascript">
 151 $(document).ready(function(){
 152   var line1 = [14, 32, 41, 44, 40, 47, 53, 67];
 153   var plot5 = $.jqplot('chart5', [line1], {
 154       title: 'Chart with Point Labels',
 155       seriesDefaults: {
 156         showMarker:false,
 157         pointLabels: {
 158           show: true,
 159           edgeTolerance: 5
 160         }},
 161       axes:{
 162         xaxis:{min:3}
 163       }
 164   });
 165 });
 166 </script>
 167
 168 <!-- End example scripts -->
 169
 170 <!-- Don't touch this! -->
 171
 172
 173     <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
 174     <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
 175     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
 176     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
 177 <!-- End Don't touch this! -->
 178
 179 <!-- Additional plugins go here -->
 180     <script class="include" language="javascript" type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script>
 181     <script class="include" language="javascript" type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
 182     <script class="include" language="javascript" type="text/javascript" src="../plugins/jqplot.pointLabels.min.js"></script>
 183
 184 <!-- End additional plugins -->
 185
 186
 187         </div>
 188         <script type="text/javascript" src="example.min.js"></script>
 189
 190 </body>
 191
 192
 193 </html>