<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Zooming with Point Labels</title> <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]--> <link rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" /> <link rel="stylesheet" type="text/css" href="examples.css" /> <!-- BEGIN: load jquery --> <script language="javascript" type="text/javascript" src="../jquery.min.js"></script> <!-- END: load jquery --> <!-- BEGIN: load jqplot --> <script language="javascript" type="text/javascript" src="../jquery.jqplot.min.js"></script> <script language="javascript" type="text/javascript" src="../plugins/jqplot.cursor.min.js"></script> <script language="javascript" type="text/javascript" src="../plugins/jqplot.pointLabels.min.js"></script> <script language="javascript" type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script> <script language="javascript" type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script> <!-- END: load jqplot --> <script class="code" language="javascript" type="text/javascript"> $(document).ready(function(){ $.jqplot.config.enablePlugins = true; var line1 = [[-12,7, null],[-3,14, null],[2,-1, '<'],[7,-1, '<'],[11,11, null], [13, -1, '<']]; plot = $.jqplot('chart', [line1], { title: 'Plot with Zooming with Point Labels', seriesDefaults: {showMarker:false, pointLabels:{location:'s', ypadding:2}}, cursor: {tooltipLocation:'sw', zoom:true}, axesDefaults:{useSeriesColor: true}, axes:{yaxis:{pad: 1.3}} } ); }); </script> <script class="code" language="javascript" type="text/javascript"> $(document).ready(function(){ pop1980 = [7071, 2968, 3005, 1595, 789]; pop1990 = [7322, 3485, 2783, 1630, 983]; pop2000 = [8008, 3694, 2896, 1974, 1322]; ticks = ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix"]; plot2 = $.jqplot('chart2',[pop1980, pop1990, pop2000],{ title: 'City Population (thousands)', legend: { show: true }, seriesDefaults: { renderer: $.jqplot.BarRenderer, pointLabels: { location: 's', ypadding: 15 } }, series: [ {label: '1980'}, {label: '1990'}, {label: '2000'}, {label: '2008 (est)'} ], axes: { xaxis: { label: 'City', renderer: $.jqplot.CategoryAxisRenderer, ticks: ticks }, yaxis: { max: 9000, min: 500, tickOptions: { formatString: '%d' } } } }); }); </script> <script type="text/javascript" src="example.js"></script> </head> <body> <?php include "topbanner.inc"; ?> <div class="example-content"> <?php include "nav.inc"; ?> <p>Click and drag to zoom. Double click on plot or click "Reset Zoom" button to reset zoom.</p> <div id="chart" style="height:300px; width:600px;"></div> <div style="padding-top:20px"> <button value="reset" type="button" onclick="$.jqplot.Cursor.resetZoom(plot)">Reset Zoom</button> <div id="chart2" style="height:300px; width:600px;"></div> </div> </div> </body> </html>