Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

By: a guest on Sep 16th, 2012  |  syntax: None  |  size: 4.09 KB  |  views: 34  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1.  
  2.                 <?php include('canvasgraph.php');?>
  3.        
  4.         <script type="text/javascript">
  5.                 <!--
  6.                         var graph;
  7.             var xPadding = 30;
  8.             var yPadding = 30;
  9.            
  10.             var data = { values:[
  11.                 { X: "<?php echo $dateArr[6];?>", Y: <?php echo $calorieArr[6]; ?> },
  12.                 { X: "<?php echo $dateArr[5];?>", Y: <?php echo $calorieArr[5]; ?> },
  13.                 { X: "<?php echo $dateArr[4];?>", Y: <?php echo $calorieArr[4]; ?> },
  14.                 { X: "<?php echo $dateArr[3];?>", Y: <?php echo $calorieArr[3]; ?> },
  15.                 { X: "<?php echo $dateArr[2];?>", Y: <?php echo $calorieArr[2]; ?> },
  16.                 { X: "<?php echo $dateArr[1];?>", Y: <?php echo $calorieArr[1]; ?> },
  17.                 { X: "<?php echo $dateArr[0];?>", Y: <?php echo $calorieArr[0]; ?> },                                                          
  18.             ]};
  19.  
  20.             // Returns the max Y value in our data list
  21.             function getMaxY() {
  22.                 var max = 0;
  23.                
  24.                 for(var i = 0; i < data.values.length; i ++) {
  25.                     if(data.values[i].Y > max) {
  26.                         max = data.values[i].Y;
  27.                     }
  28.                 }
  29.                
  30.                 max += 10 - max % 10;
  31.                 return max;
  32.             }
  33.            
  34.             // Return the x pixel for a graph point
  35.             function getXPixel(val) {
  36.                 return ((graph.width() - xPadding) / data.values.length) * val + (xPadding * 1.5);
  37.             }
  38.            
  39.             // Return the y pixel for a graph point
  40.             function getYPixel(val) {
  41.                 return graph.height() - (((graph.height() - yPadding) / getMaxY()) * val) - yPadding;
  42.             }
  43.  
  44.             $(document).ready(function()
  45.                         {
  46.                 graph = $('#graph');
  47.                 var c = graph[0].getContext('2d');            
  48.                
  49.                 c.lineWidth = 2;
  50.                 c.strokeStyle = '#333';
  51.                 c.font = 'italic 8pt sans-serif';
  52.                 c.textAlign = "center";
  53.                
  54.                 // Draw the axises
  55.                 c.beginPath();
  56.                 c.moveTo(xPadding, 0);
  57.                 c.lineTo(xPadding, graph.height() - yPadding);
  58.                 c.lineTo(graph.width(), graph.height() - yPadding);
  59.                 c.stroke();
  60.                
  61.                 // Draw the X value texts
  62.                 for(var i = 0; i < data.values.length; i ++) {
  63.                     c.fillText(data.values[i].X, getXPixel(i), graph.height() - yPadding + 20);
  64.                 }
  65.                
  66.                 // Draw the Y value texts
  67.                 c.textAlign = "right"
  68.                 c.textBaseline = "middle";
  69.                                
  70.                 for(var i = 0; i < getMaxY(); i += 10) {
  71.                     c.fillText(i, xPadding - 10, getYPixel(i));
  72.                 }
  73.                                
  74.                                 c.strokeStyle = '#f00';
  75.                
  76.                 // Draw the line graph
  77.                 c.beginPath();
  78.                 c.moveTo(getXPixel(0), getYPixel(data.values[0].Y));
  79.                 for(var i = 1; i < data.values.length; i ++) {
  80.                     c.lineTo(getXPixel(i), getYPixel(data.values[i].Y));
  81.                 }
  82.                 c.stroke();
  83.                
  84.                 // Draw the dots
  85.                 c.fillStyle = '#333';
  86.                
  87.                 for(var i = 0; i < data.values.length; i ++) {  
  88.                     c.beginPath();
  89.                     c.arc(getXPixel(i), getYPixel(data.values[i].Y), 4, 0, Math.PI * 2, true);
  90.                     c.fill();
  91.                 }
  92.        
  93.                         $("#example-target-1").ezpz_tooltip();
  94.                                 $("#example-target-2").ezpz_tooltip();
  95.                                 $("#example-target-3").ezpz_tooltip();
  96.                                 $("#example-target-4").ezpz_tooltip();
  97.                                 $("#example-target-5").ezpz_tooltip();
  98.                        
  99.                                 /* Replacing jqPlot with custom javascript/canvas graph function */
  100.                                 /* 8/31/2012 */
  101.                                 // DAILY SUMMARY jQUERY GRAPH CODE
  102.                                 //$.jqplot('userGraph',  [[[1, 2],[3,2],[5,2],[7,2],[9,2],[11,219.9]]]);
  103.                                
  104.                                 /*  See above for canvas graph */
  105.        
  106.                
  107.                         });    
  108.  
  109.                 -->    
  110.                 </script>
clone this paste RAW Paste Data