<script src="RGraph.common.core.js"></script> <script src="RGraph.line.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="650" height="250"> [No canvas support] </canvas>This is the code that generates the chart:
<script> // The data for the chart var data = [5,14,2,4,1,8,6,5,9,4]; // Create and configure the chart var line = new RGraph.Line({ id: 'cvs', data: data, options: { ymax: 20, hmargin: 10, tickmarks: 'circle', labels: ['Fred', 'John', 'Kev', 'Lou', 'Pete','Mark','Neil','Indra','Lewis','Bob'], axisColor: '#aaa', numyticks: 5, noxaxis: true, backgroundGridVlines: false, backgroundGridBorder: false, labelsAbove: true, labelsAboveBorder: false, labelsAboveDecimals: 1, textAccessible: false } }).draw(); // // This is the function that handles adjusting the line when //the chart is touched. // line.canvas.onmousedown = function(e) { var obj = e.target.__object__, newvalue = obj.getValue(e), mouseXY = RGraph.getMouseXY(e), mouseX = mouseXY[0], mouseY = mouseXY[1], coords = obj.coords2[0]; // Determine the closest point to the touch/click var index = closest({ coords: coords, mousex: mouseX, tolerance: 10 // Pixels, default is 10 }); if (index >= 0) { data[index] = newvalue; grow({ object: obj, index: index, value: newvalue }) } }; // // Finds the closest point to the given mouseX coordinate. It allows a // tolerance of 10 (or so) pixels. // // @param object opt An object consisting of; // o coords The coordinates of the points // o mousex The mouseX coordinate // o tolerance The number of pixels leeway // that is allowed. Default is 10 // function closest (opt) { var coords = opt.coords, mouseX = opt.mousex, tolerance = (typeof opt.tolerance === 'number' ? opt.tolerance : 10), point = null; // Loop through the coordinates looking for the closest // (going by X coordinate) for (var i=0,distance = null; i<coords.length; ++i) { if (mouseX > coords[i][0] - tolerance && mouseX < coords[i][0] + tolerance) { point = i; } } return point; } // // The animation function that makes the point grow to // its new position. // function grow (opt) { var obj = opt.object, idx = opt.index, value = opt.value; // Determine the original value or the point thats being adjusted var original_value = line.original_data[0][idx]; var frames = 15, delay = 16.666; for (var i=0; i<frames; i++) { (function (i) { setTimeout(function () { line.original_data[0][idx] = ((value - original_value) * (i + 1) / frames) + original_value; // Update this so that the above labels are correctly updated line.data_arr = RGraph.arrayLinearize(line.original_data); RGraph.redraw(); }, delay * i); })(i) } } </script><Back