Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <?php include('canvasgraph.php');?>
- <script type="text/javascript">
- <!--
- var graph;
- var xPadding = 30;
- var yPadding = 30;
- var data = { values:[
- { X: "<?php echo $dateArr[6];?>", Y: <?php echo $calorieArr[6]; ?> },
- { X: "<?php echo $dateArr[5];?>", Y: <?php echo $calorieArr[5]; ?> },
- { X: "<?php echo $dateArr[4];?>", Y: <?php echo $calorieArr[4]; ?> },
- { X: "<?php echo $dateArr[3];?>", Y: <?php echo $calorieArr[3]; ?> },
- { X: "<?php echo $dateArr[2];?>", Y: <?php echo $calorieArr[2]; ?> },
- { X: "<?php echo $dateArr[1];?>", Y: <?php echo $calorieArr[1]; ?> },
- { X: "<?php echo $dateArr[0];?>", Y: <?php echo $calorieArr[0]; ?> },
- ]};
- // Returns the max Y value in our data list
- function getMaxY() {
- var max = 0;
- for(var i = 0; i < data.values.length; i ++) {
- if(data.values[i].Y > max) {
- max = data.values[i].Y;
- }
- }
- max += 10 - max % 10;
- return max;
- }
- // Return the x pixel for a graph point
- function getXPixel(val) {
- return ((graph.width() - xPadding) / data.values.length) * val + (xPadding * 1.5);
- }
- // Return the y pixel for a graph point
- function getYPixel(val) {
- return graph.height() - (((graph.height() - yPadding) / getMaxY()) * val) - yPadding;
- }
- $(document).ready(function()
- {
- graph = $('#graph');
- var c = graph[0].getContext('2d');
- c.lineWidth = 2;
- c.strokeStyle = '#333';
- c.font = 'italic 8pt sans-serif';
- c.textAlign = "center";
- // Draw the axises
- c.beginPath();
- c.moveTo(xPadding, 0);
- c.lineTo(xPadding, graph.height() - yPadding);
- c.lineTo(graph.width(), graph.height() - yPadding);
- c.stroke();
- // Draw the X value texts
- for(var i = 0; i < data.values.length; i ++) {
- c.fillText(data.values[i].X, getXPixel(i), graph.height() - yPadding + 20);
- }
- // Draw the Y value texts
- c.textAlign = "right"
- c.textBaseline = "middle";
- for(var i = 0; i < getMaxY(); i += 10) {
- c.fillText(i, xPadding - 10, getYPixel(i));
- }
- c.strokeStyle = '#f00';
- // Draw the line graph
- c.beginPath();
- c.moveTo(getXPixel(0), getYPixel(data.values[0].Y));
- for(var i = 1; i < data.values.length; i ++) {
- c.lineTo(getXPixel(i), getYPixel(data.values[i].Y));
- }
- c.stroke();
- // Draw the dots
- c.fillStyle = '#333';
- for(var i = 0; i < data.values.length; i ++) {
- c.beginPath();
- c.arc(getXPixel(i), getYPixel(data.values[i].Y), 4, 0, Math.PI * 2, true);
- c.fill();
- }
- $("#example-target-1").ezpz_tooltip();
- $("#example-target-2").ezpz_tooltip();
- $("#example-target-3").ezpz_tooltip();
- $("#example-target-4").ezpz_tooltip();
- $("#example-target-5").ezpz_tooltip();
- /* Replacing jqPlot with custom javascript/canvas graph function */
- /* 8/31/2012 */
- // DAILY SUMMARY jQUERY GRAPH CODE
- //$.jqplot('userGraph', [[[1, 2],[3,2],[5,2],[7,2],[9,2],[11,219.9]]]);
- /* See above for canvas graph */
- });
- -->
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement