jqPlot Examples Baseline

This particular fiddle is setup so that basic jqPlot examples can be created. It's, at this point, a generic template setup in a state that will allow a simple fork to get you up and running faster.

by godhong

HTML

<link rel="stylesheet" href="http://www.prioritymarketers.com/jqplot/src/jquery.jqplot.css">
<script src="http://www.prioritymarketers.com/jqplot/src/jquery.jqplot.js"></script>
<script src="     http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.barRenderer.js"></script>
<script src="     http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.categoryAxisRenderer.js"></script>
<script src="     http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.pointLabels.js"></script>
<script src="     http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.cursor.js"></script>
<!--[if lt IE 9]>
  <script src="http://www.prioritymarketers.com/jqplot/src/excanvas.min.js"></script>
<![endif]-->

<div id="chart1" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>

<table>
<tr>
<td id='x_pre_irr'>x_pre_irr</td>
<td id='x_indi_val'>[165.33, 102.9, 89.04, 181.54, 111.8, 147.56, 116.15]</td>
</tr></table>

JavaScript

$(document).ready(function(){
        $.jqplot.config.enablePlugins = true;
        var s1 = $.parseJSON($('#x_indi_val').text());

        $.jqplot('chart1', [s1], {
            
            seriesDefaults: { 
            showMarker:false,
            pointLabels: { show:false } ,
              },
            
            series:[
            {label:'Individuals'}
            ],
            axes: {
                  xaxis: {
                    label :'Time units',
                    pad: 0,
                      },
                  yaxis: {
                    label: 'Number of individuals',
                     //jqplot example indicated that use the following js file can give you a vertical label, I tried locally, but it did not work
                    //renderer: $.jqplot.canvasAxisLabelRenderer
                      }
            },
             legend: {
                  show: true,
                  location: 'ne',
                  placement: 'inside',
                fontSize: '11px'
            } 
        })   
    })