jqplot / tests / index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>jqPlot Unit Tests and Examples</title>
  <!--[if IE]><script language="javascript" type="text/javascript" src="../src/excanvas.min.js"></script><![endif]-->
  
  <!-- BEGIN: load jquery -->
  <script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
  <!-- END: load jquery -->
  
  <!-- BEGIN: load extras -->
  <script language="javascript" type="text/javascript" src="jspec/lib/jspec.min.js"></script>
  <script language="javascript" type="text/javascript" src="beautify.min.js" ></script>
  <script language="javascript" type="text/javascript" src="prettify.min.js"></script>
  <link rel="stylesheet" href="jspec/lib/jspec.min.css" type="text/css" media="screen" title="no title" charset="utf-8">
  <link rel="stylesheet" href="prettify.min.css" type="text/css" rel="stylesheet" />
  <!-- END: load extras -->
  
  <!-- BEGIN: load jqplot -->
  <script language="javascript" type="text/javascript" src="../src/jquery.jqplot.js"></script>
  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.logAxisRenderer.js"></script>
  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.categoryAxisRenderer.js"></script>
  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.dateAxisRenderer.js"></script>
  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.barRenderer.js"></script>
  <!-- END: load jqplot -->

  <script language="javascript" type="text/javascript">
    $.jqplot.installPath = "../src";
    $.jqplot.pluginsPath = "../src/plugins";
    var uID = (function() {
      var id = 1;
      return function(){return id++};
    })();
    
    function genplot(o) {
      var nid, n, no;
      nid = uID();
      o = o.replace(/_target_/, 'chart'+nid);
      n = js_beautify(o);
      $('<div class="jqPLot"  id="chart'+nid+'" style="height:380px; width:540px;"></div>').appendTo('body');
      $('<pre id="code'+nid+'" class="prettyprint">'+n+'</pre>').appendTo('body');
      eval(o);
    }
  
    function runSuites() {
      var o, n, nid;
      
      
      nid = uID();
      o = "var cosPoints = []; \
      for (var i=0; i<2*Math.PI; i+=0.4){ \
        cosPoints.push([i, Math.cos(i)]); \
      } \
      var sinPoints = []; \
      for (var i=0; i<2*Math.PI; i+=0.4){ \
         sinPoints.push([i, 2*Math.sin(i-.8)]); \
      } \
      var powPoints1 = []; \
      for (var i=0; i<2*Math.PI; i+=0.4) { \
          powPoints1.push([i, 2.5 + Math.pow(i/4, 2)]); \
      } \
      var powPoints2 = []; \
      for (var i=0; i<2*Math.PI; i+=0.4) { \
          powPoints2.push([i, -2.5 - Math.pow(i/4, 2)]); \
      } \
      plot1 = $.jqplot('_target_', [cosPoints, sinPoints, powPoints1, powPoints2], { \
      title:'Line Style Options', series:[ \
      {lineWidth:2, markerOptions:{style:'square'}}, \
      {showLine:false, markerOptions:{style:'diamond'}}, \
      {markerOptions:{style:'circle'}}, \
      {lineWidth:5, markerOptions:{style:'filledSquare', size:14}}]});";
    
      genplot(o);
      
      o = "var cosPoints = []; \
      for (var i=0; i<2*Math.PI; i+=0.1){ \
         cosPoints.push([i, Math.cos(i)]); \
      } \
      plot1b = $.jqplot('_target_', [cosPoints], { \
          title:'Shadow Options', \
          series:[{showMarker:false, lineWidth:5, shadowAngle:0, shadowOffset:2, shadowAlpha:.06, shadowDepth:5}]});"
      
      genplot(o);
    
      o = "line1=[[1,1],[1.5, 2.25],[2,4],[2.5,6.25],[3,9],[3.5,12.25],[4,16]]; \
      line2=[25, 17.5, 12.25, 8.6, 6.0, 4.2, 2.9]; \
      line3=[4, 25, 13, 22, 14, 17, 15]; \
      plot2 = $.jqplot('_target_', [line1, line2, line3], \
      {legend:{show:true}, title:'Mixed Data Input Formats', \
      series:[{label:'Rising line', showLine:false, markerOptions:{style:'square'}}, \
      {label:'Declining line'}, {label:'Zig Zag Line', lineWidth:5, showMarker:false}]});";
            
      genplot(o);
      
      o = "line1 = [[1,1],[2,4],[3,9],[4,16]]; \
      line2 = [25, 12.5, 6.25, 3.125]; \
      plot3 = $.jqplot('_target_', [line1, line2], \
      {legend:{show:true, location:'e'},title:'Secondary Log Axis', \
      series:[{label:'Rising line'},{yaxis:'y2axis', label:'Declining line'}], \
      axes:{xaxis:{min:0, max:5}, y2axis:{renderer:$.jqplot.LogAxisRenderer, min:2, max:30}}});"
        
      genplot(o);

      o = "plot4 = $.jqplot('_target_', [line2], { \
      legend:{show:true, location:'e'}, \
      title:'Log Y Axis, Power Tick Distribution', \
      series:[{label:'Declining line'}], \
      axes:{xaxis:{min:0, max:5}, yaxis:{tickDistribution:'power', renderer:$.jqplot.LogAxisRenderer, min:2, max:30}}});"
        
      genplot(o);
      
      o = "line1=[[1,1],[1.5, 2.25],[2,4],[2.5,6.25],[3,9],[3.5,12.25],[4,16]]; \
      line2=[25, 12.5, 6.25, 3.125]; \
      xticks = [[0, 'zero'], [1, 'one'], [2, 'two'], [3, 'three'], [4, 'four'], [5, 'five']]; \
      yticks = [-5, 0, 5, 10, 15, 20, 25, 30]; \
      plot5 = $.jqplot('_target_', [line1, line2], \
      {legend:{show:true}, title:'Customized Axes Ticks', \
      series:[{label:'Rising line', markerOptions:{style:'square'}}, {label:'Declining line'}], \
      axes:{xaxis:{ticks:xticks}, yaxis:{ticks:yticks}}});";
            
      genplot(o);
      
      o = "line1=[4, 25, 13, 22, 14, 17, 15]; \
      plot6 = $.jqplot('_target_', [line1], \
      {title:'Default Category X Axis', \
      axes:{xaxis:{renderer:$.jqplot.CategoryAxisRenderer}}, \
      series:[{lineWidth:4, markerOptions:{style:'square'}}]});";
      
      genplot(o);
      
      o = "line1=[4, 25, 13, 22, 14, 17, 15]; \
      ticks = ['uno', 'dos', 'tres', 'cuatro', 'cinco', 'seis', 'siete']; \
      plot7 = $.jqplot('_target_', [line1], \
      {title:'Customized Category X Axis', \
      axes:{xaxis:{ticks:ticks, renderer:$.jqplot.CategoryAxisRenderer}}, \
      series:[{lineWidth:4, markerOptions:{style:'square'}}]});";
      
      genplot(o);
      
      o = "line1=[['uno', 4], ['due', 25], ['tre', 13], ['quattro', 22], ['cinque', 14], ['sei', 17], ['sette', 15]]; \
      plot8 = $.jqplot('_target_', [line1], \
      {title:'Customized Category X Axis by Series Data Specificaiton', \
      axes:{xaxis:{renderer:$.jqplot.CategoryAxisRenderer}}, \
      series:[{lineWidth:4, markerOptions:{style:'square'}}]});";
      
      genplot(o);
      
      o = "line1=[['2008-09-30', 4], ['2008-10-30', 6.5], ['2008-11-30', 5.7], ['2008-12-30', 9], ['2009-01-30', 8.2]]; \
      plot9 = $.jqplot('_target_', [line1], \
      {title:'Default Date Axis', \
      axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer}}, \
      series:[{lineWidth:4, markerOptions:{style:'square'}}]});";
      
      genplot(o);
      
      o = "line1=[['2008-06-30', 4], ['2008-7-30', 6.5], ['2008-8-30', 5.7], ['2008-9-30', 9], ['2008-10-30', 8.2]]; \
      plot10 = $.jqplot('_target_', [line1], \
      {title:'Customized Date Axis', gridPadding:{right:45}, \
      axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer, tickOptions:{formatString:'%b %#d, %y'}, min:'May 30, 2008', tickInterval:'1 month'}}, \
      series:[{lineWidth:4, markerOptions:{style:'square'}}]});";
      
      genplot(o);
      
      o = "line1 = [1,4,9, 16]; \
      line2 = [25, 12.5, 6.25, 3.125]; \
      plot11 = $.jqplot('_target_', [line1, line2], \
      {legend:{show:true, location:'ne'},title:'Bar Chart', \
      series:[{label:'Rising', renderer:$.jqplot.BarRenderer}, {label:'Declining', renderer:$.jqplot.BarRenderer}], \
      axes:{xaxis:{renderer:$.jqplot.CategoryAxisRenderer}}});"
        
      genplot(o);
  
      prettyPrint();
      
      JSpec.options.profile = false;
      JSpec
      .exec('unittest.js')
      .run()
      .report()
    }
  </script>
  <style type="text/css">
    body {
      background-color: #efefef;
      font-family: "Helvetica Neue Light", "Lucida Grande", "Calibri", "Arial", sans-serif;
    }
    div.jqPLot {
      font-size: 16px;
      position: relative;
      margin: 4em auto 3em auto;
    }
    pre.prettyprint {
      text-align: left;
      margin: auto;
      padding: 15px;
      width: 900px;
      background-color: #ffffff;
    }
    #jspec, #jspec-top, #jspec-bottom {
      background: #ffffff;
      width: 900px;
      margin: 0 auto;
    }
    
    #jspec-top {
      border: 1px solid #888888;
      border-bottom: 0px;
    }
    
    #jspec {
      border: 1px solid #888888;
      border-top: 0px;
      border-bottom: 0px;
    }
    
    #jspec-bottom {
      border: 1px solid #888888;
      border-top: 0px;
    }
    
    #jspec-report td + td {
      width: auto;
    }
  </style>
</head>
  <body onLoad="runSuites();">
    <div id="jspec-top"><h2 id="jspec-title">jqPlot</h2></div>
    <div id="jspec"></div>
    <div id="jspec-bottom"></div>
    
    <div class="jqPLot" id="chart0" style=""></div>

</body>
</html>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.