-
-
Save netskink/5180d0cb82f8cf37cd39 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <body onload="init()"> | |
| <canvas id="canvas" width="400" height="400" style="border:solid 2px black"></canvas> | |
| <ul id="sliders"></ul> | |
| <script id="jsbin-javascript"> | |
| var canvas; | |
| var context; | |
| // Size of the histogram | |
| var width = 150, height=150; | |
| // The origin, bottom left corner, relative to the origin in the canvas | |
| var x = 40, y = 190; | |
| // Data to be visualized | |
| var values = [1, 10, 2, 7, 9, 2, 34, 100, 12, 14, 19]; | |
| //init function is launch when the page is loaded. | |
| function init() { | |
| canvas = document.getElementById('canvas'); | |
| context = canvas.getContext('2d'); | |
| var list = document.getElementById('sliders'); | |
| // Create the sliders for changing the values. | |
| var max = getMax(values); | |
| for (i=0; i < values.length; i++) { | |
| var input = document.createElement('input'); | |
| var li = document.createElement('li'); | |
| var label = document.createElement('label'); | |
| label.setAttribute('for', 'id'+i); | |
| label.textContent = 'value' + i + ' '; | |
| li.appendChild(label); | |
| input.setAttribute('type', 'range'); | |
| input.setAttribute('id', 'id' + i); | |
| // Set their value and max attributes correctly | |
| input.setAttribute('max', max); | |
| input.value = values[i]; | |
| // Add an onchange event listener and pass the | |
| // index of the slider to the callback | |
| input.setAttribute('oninput', 'changeValue(' + i + ')'); | |
| li.appendChild(input); | |
| list.appendChild(li); | |
| } | |
| makeHistogram(x, y, | |
| width, height, | |
| values); | |
| // center of pie x and y, radius, values | |
| makePieChart(300, 100, 90, values); | |
| // Draw broken lines chart | |
| makeBrokenLines(40, 370, width, height, values); | |
| } | |
| // callback for sliders' onchange events. | |
| function changeValue(index) { | |
| var value = document.getElementById("id"+index).value; | |
| // put the slider value in the values array | |
| values[parseInt(index)] = parseInt(value); | |
| // clear the canvas | |
| context.clearRect(0,0, canvas.width, canvas.height); | |
| // redraw the charts | |
| makeHistogram(x, y, width, height, values); | |
| makePieChart(300, 100, 90, values); | |
| makeBrokenLines(40, 370, width, height, values); | |
| } | |
| // returns the max from the elements of the values array. | |
| function getMax(values) { | |
| var maxValue = 0; | |
| for (i=0; i<values.length; i++) { | |
| if (maxValue < values[i]) | |
| maxValue = values[i]; | |
| } | |
| return maxValue; | |
| } | |
| function drawAxis(width, height, values, maxValue) { | |
| // remember: we have the origin of the coordinate system at bottom left | |
| // Y values above will be negative | |
| context.strokeStyle = "black"; //We draw in black the outline. | |
| context.fillStyle = "black"; //We fill in black. | |
| //We define the vertical step unit. Is it 10 ? 20 ? 100 ? 1000 ? Depending on the | |
| // max unit value, we decide how the steps will be for the ticks | |
| var unit = 1; | |
| while (maxValue / (unit*10) > 1) { | |
| unit *= 10; | |
| } | |
| //We define the highest vertical step. | |
| var yMaxOnAxis = parseInt(maxValue) / unit; | |
| // Everything is in a path, all drawing orders will be drawn by a final call | |
| // to context.stroke() at the end of the function. | |
| context.beginPath(); //Begin a new path. | |
| // Draw the axis' lines | |
| context.moveTo(0, 0); //We place the cursor to origin. | |
| context.lineTo(0, -height); //We draw the vertical line. | |
| context.moveTo(0, 0); //We place the cursor to origin. | |
| context.lineTo(width, 0); //We draw the horizontal line. | |
| // ticks/labels on the vertical line | |
| context.textAlign = "left"; | |
| for (i=0; i <= yMaxOnAxis; i++) { | |
| // move to the next graduation. the y value is negative due to | |
| // the change of the origin by a call to translate(x,y) in the drawHistogram | |
| // function. | |
| context.moveTo(0, -height / yMaxOnAxis * i ); | |
| // draw an horizontal line, 5 pixels long, on the left of the axis | |
| context.lineTo(-5, -height / yMaxOnAxis * i ); | |
| // write the tick value, 25 pixels on the left of the axis | |
| context.fillText(i*unit, -25, -height / yMaxOnAxis * i ); | |
| } | |
| // Ticks/labels on the horizontal line | |
| var counter = 0; | |
| // text centered below the tick | |
| context.textAlign = "center"; | |
| // graduation on the horizontal line. | |
| var rectanglesWidth = width / values.length; | |
| for (i=0; i <= values.length; i++) { | |
| // Move to the next horizontal position of the tick | |
| context.moveTo(i*rectanglesWidth , 0); | |
| // draw a vertical line 5 pixels long: the tick | |
| context.lineTo(i*rectanglesWidth , 5); | |
| // write tick label 15 pixels below the tick | |
| context.fillText(i, i*rectanglesWidth , 15); | |
| counter++; | |
| } | |
| // Draw everything in the path | |
| context.stroke(); | |
| } | |
| // MakeHistogram building a bar plot. x, y is the bottom left position of the | |
| // histogram. Easier to reason with this coordonate system | |
| function makeHistogram(x, y, width, height, values) { | |
| context.save(); | |
| // Change the origin at bottom left. If we draw "above", Y values will be negative. | |
| // y=0 is the horizontal line at bottom | |
| context.translate(x, y); | |
| // Compute the max of the values array | |
| var maxValue = getMax(values); | |
| // step in pixels between two horizontal values for bar plot. | |
| var rectWidth = width / parseFloat(values.length); | |
| // step in pixels between two vertical values for bar plot. | |
| var vStep = -height / parseFloat(maxValue); | |
| //Set fill color to red and stroke color to black. | |
| context.fillStyle = "red"; | |
| context.strokeStyle = "black"; | |
| // Draw the histogram rectangles | |
| for(i=0; i < values.length; i++) { | |
| //We draw a filled red rectangle to represent the current value. | |
| context.fillRect(i * rectWidth, 0, | |
| rectWidth, vStep * values[i]); | |
| //We draw the outline of rectangle. | |
| context.strokeRect(i * rectWidth, 0, | |
| rectWidth, vStep * values[i]); | |
| } | |
| // draw the axis | |
| drawAxis(width, height, values, maxValue); | |
| context.restore(); | |
| } | |
| //makePieChart draw a circle graph with values table. | |
| function makePieChart(cx, cy, radius, values) { | |
| context.save(); | |
| // Compute the sum of all values | |
| var sum=0; | |
| for(var n=0; n < values.length; n++) { | |
| sum += values[n]; | |
| } | |
| //Initialization of red green blue colors. | |
| var red = 0; | |
| var green = 0; | |
| var blue = 0; | |
| //starting and ending angles of each pie section | |
| var startingAngle = 0; | |
| var endAngle = 0; | |
| //The percentage the current value represents, compare to the total, | |
| // we are in a closed circle, the sum is 100% | |
| var percentage; | |
| //We draw in grey the outline of the section. | |
| context.strokeStyle = "grey"; | |
| // Draw the pie chart, clockwise, à la HTML5 | |
| //for (var i=values.length-1; i> 0; i--) { // for ccw display | |
| for(var i = 0; i < values.length; i++) { | |
| context.beginPath(); //Begin a new path. | |
| // We change the colors depending on the i-value. Just a trick based | |
| // on the modulo. Will produce different colors for the pie sections | |
| switch (i%3) { | |
| case 0: //If i modulo 3 equals 0: | |
| red += 80; //We add red. | |
| break; | |
| case 1: //If i modulo 3 equals 1: | |
| green += 80; //We add green. | |
| break; | |
| case 2: //If i modulo 3 equals 2: | |
| blue += 80; //We add blue. | |
| break; | |
| default: //If there is an error. | |
| alert("we have encountered an error"); | |
| return ; //and we stop makePieChart. | |
| } | |
| context.fillStyle = "rgb(" + red + "," + green + "," + blue +")"; | |
| // percentage of the circle for current section, will give the angles | |
| percentage = values[i] / parseFloat(sum); | |
| endAngle = startingAngle + Math.PI*2*percentage; | |
| // draw an arc between starting angle and end angle. | |
| context.arc(cx, cy, radius, startingAngle, endAngle); | |
| // draw a line between end angle and center of circle. | |
| context.lineTo(cx, cy); | |
| //The next starting angle is the current end angle. | |
| startingAngle = endAngle; | |
| context.fill(); // draw pie section | |
| context.stroke(); // draw the outline. | |
| context.closePath(); // Close the path. | |
| context.restore(); | |
| } | |
| } | |
| // draw a broken line chart | |
| function makeBrokenLines(x, y, width, height, values) { | |
| context.save(); | |
| // Move origin of the coordinate system at x, y, bottom left corner | |
| context.translate(x, y); | |
| var maxValue = getMax(values); | |
| // distance between two horizontal values, in pixels | |
| var hStep = width / parseFloat(values.length); | |
| // step between two vertical values, in pixels | |
| var vStep = -height / parseFloat(maxValue); | |
| // set fill color to black, for drawing the circle plots | |
| context.fillStyle = "black"; | |
| // thickness of the lines | |
| context. lineWidth = 1; | |
| // set the cursor to origin. | |
| context.moveTo(0 , 0); | |
| // All lines are drawn into a path | |
| context.beginPath(); | |
| for(i=0; i<values.length; i++) { | |
| context.lineTo(i * hStep, vStep * values[i]); | |
| } | |
| context.stroke(); // draw the path with all the lines | |
| // Draw the filled black circles at each value's coordinate | |
| for(i=0; i<values.length; i++) { | |
| context.beginPath(); | |
| context.arc(i * hStep, vStep * values[i], 3, 0, 2*Math.PI); | |
| context.fill(); //We fill all circles. | |
| } | |
| // draw the X and Y axis | |
| drawAxis(width, height, values, maxValue); | |
| context.restore(); | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">var canvas; | |
| var context; | |
| // Size of the histogram | |
| var width = 150, height=150; | |
| // The origin, bottom left corner, relative to the origin in the canvas | |
| var x = 40, y = 190; | |
| // Data to be visualized | |
| var values = [1, 10, 2, 7, 9, 2, 34, 100, 12, 14, 19]; | |
| //init function is launch when the page is loaded. | |
| function init() { | |
| canvas = document.getElementById('canvas'); | |
| context = canvas.getContext('2d'); | |
| var list = document.getElementById('sliders'); | |
| // Create the sliders for changing the values. | |
| var max = getMax(values); | |
| for (i=0; i < values.length; i++) { | |
| var input = document.createElement('input'); | |
| var li = document.createElement('li'); | |
| var label = document.createElement('label'); | |
| label.setAttribute('for', 'id'+i); | |
| label.textContent = 'value' + i + ' '; | |
| li.appendChild(label); | |
| input.setAttribute('type', 'range'); | |
| input.setAttribute('id', 'id' + i); | |
| // Set their value and max attributes correctly | |
| input.setAttribute('max', max); | |
| input.value = values[i]; | |
| // Add an onchange event listener and pass the | |
| // index of the slider to the callback | |
| input.setAttribute('oninput', 'changeValue(' + i + ')'); | |
| li.appendChild(input); | |
| list.appendChild(li); | |
| } | |
| makeHistogram(x, y, | |
| width, height, | |
| values); | |
| // center of pie x and y, radius, values | |
| makePieChart(300, 100, 90, values); | |
| // Draw broken lines chart | |
| makeBrokenLines(40, 370, width, height, values); | |
| } | |
| // callback for sliders' onchange events. | |
| function changeValue(index) { | |
| var value = document.getElementById("id"+index).value; | |
| // put the slider value in the values array | |
| values[parseInt(index)] = parseInt(value); | |
| // clear the canvas | |
| context.clearRect(0,0, canvas.width, canvas.height); | |
| // redraw the charts | |
| makeHistogram(x, y, width, height, values); | |
| makePieChart(300, 100, 90, values); | |
| makeBrokenLines(40, 370, width, height, values); | |
| } | |
| // returns the max from the elements of the values array. | |
| function getMax(values) { | |
| var maxValue = 0; | |
| for (i=0; i<values.length; i++) { | |
| if (maxValue < values[i]) | |
| maxValue = values[i]; | |
| } | |
| return maxValue; | |
| } | |
| function drawAxis(width, height, values, maxValue) { | |
| // remember: we have the origin of the coordinate system at bottom left | |
| // Y values above will be negative | |
| context.strokeStyle = "black"; //We draw in black the outline. | |
| context.fillStyle = "black"; //We fill in black. | |
| //We define the vertical step unit. Is it 10 ? 20 ? 100 ? 1000 ? Depending on the | |
| // max unit value, we decide how the steps will be for the ticks | |
| var unit = 1; | |
| while (maxValue / (unit*10) > 1) { | |
| unit *= 10; | |
| } | |
| //We define the highest vertical step. | |
| var yMaxOnAxis = parseInt(maxValue) / unit; | |
| // Everything is in a path, all drawing orders will be drawn by a final call | |
| // to context.stroke() at the end of the function. | |
| context.beginPath(); //Begin a new path. | |
| // Draw the axis' lines | |
| context.moveTo(0, 0); //We place the cursor to origin. | |
| context.lineTo(0, -height); //We draw the vertical line. | |
| context.moveTo(0, 0); //We place the cursor to origin. | |
| context.lineTo(width, 0); //We draw the horizontal line. | |
| // ticks/labels on the vertical line | |
| context.textAlign = "left"; | |
| for (i=0; i <= yMaxOnAxis; i++) { | |
| // move to the next graduation. the y value is negative due to | |
| // the change of the origin by a call to translate(x,y) in the drawHistogram | |
| // function. | |
| context.moveTo(0, -height / yMaxOnAxis * i ); | |
| // draw an horizontal line, 5 pixels long, on the left of the axis | |
| context.lineTo(-5, -height / yMaxOnAxis * i ); | |
| // write the tick value, 25 pixels on the left of the axis | |
| context.fillText(i*unit, -25, -height / yMaxOnAxis * i ); | |
| } | |
| // Ticks/labels on the horizontal line | |
| var counter = 0; | |
| // text centered below the tick | |
| context.textAlign = "center"; | |
| // graduation on the horizontal line. | |
| var rectanglesWidth = width / values.length; | |
| for (i=0; i <= values.length; i++) { | |
| // Move to the next horizontal position of the tick | |
| context.moveTo(i*rectanglesWidth , 0); | |
| // draw a vertical line 5 pixels long: the tick | |
| context.lineTo(i*rectanglesWidth , 5); | |
| // write tick label 15 pixels below the tick | |
| context.fillText(i, i*rectanglesWidth , 15); | |
| counter++; | |
| } | |
| // Draw everything in the path | |
| context.stroke(); | |
| } | |
| // MakeHistogram building a bar plot. x, y is the bottom left position of the | |
| // histogram. Easier to reason with this coordonate system | |
| function makeHistogram(x, y, width, height, values) { | |
| context.save(); | |
| // Change the origin at bottom left. If we draw "above", Y values will be negative. | |
| // y=0 is the horizontal line at bottom | |
| context.translate(x, y); | |
| // Compute the max of the values array | |
| var maxValue = getMax(values); | |
| // step in pixels between two horizontal values for bar plot. | |
| var rectWidth = width / parseFloat(values.length); | |
| // step in pixels between two vertical values for bar plot. | |
| var vStep = -height / parseFloat(maxValue); | |
| //Set fill color to red and stroke color to black. | |
| context.fillStyle = "red"; | |
| context.strokeStyle = "black"; | |
| // Draw the histogram rectangles | |
| for(i=0; i < values.length; i++) { | |
| //We draw a filled red rectangle to represent the current value. | |
| context.fillRect(i * rectWidth, 0, | |
| rectWidth, vStep * values[i]); | |
| //We draw the outline of rectangle. | |
| context.strokeRect(i * rectWidth, 0, | |
| rectWidth, vStep * values[i]); | |
| } | |
| // draw the axis | |
| drawAxis(width, height, values, maxValue); | |
| context.restore(); | |
| } | |
| //makePieChart draw a circle graph with values table. | |
| function makePieChart(cx, cy, radius, values) { | |
| context.save(); | |
| // Compute the sum of all values | |
| var sum=0; | |
| for(var n=0; n < values.length; n++) { | |
| sum += values[n]; | |
| } | |
| //Initialization of red green blue colors. | |
| var red = 0; | |
| var green = 0; | |
| var blue = 0; | |
| //starting and ending angles of each pie section | |
| var startingAngle = 0; | |
| var endAngle = 0; | |
| //The percentage the current value represents, compare to the total, | |
| // we are in a closed circle, the sum is 100% | |
| var percentage; | |
| //We draw in grey the outline of the section. | |
| context.strokeStyle = "grey"; | |
| // Draw the pie chart, clockwise, à la HTML5 | |
| //for (var i=values.length-1; i> 0; i--) { // for ccw display | |
| for(var i = 0; i < values.length; i++) { | |
| context.beginPath(); //Begin a new path. | |
| // We change the colors depending on the i-value. Just a trick based | |
| // on the modulo. Will produce different colors for the pie sections | |
| switch (i%3) { | |
| case 0: //If i modulo 3 equals 0: | |
| red += 80; //We add red. | |
| break; | |
| case 1: //If i modulo 3 equals 1: | |
| green += 80; //We add green. | |
| break; | |
| case 2: //If i modulo 3 equals 2: | |
| blue += 80; //We add blue. | |
| break; | |
| default: //If there is an error. | |
| alert("we have encountered an error"); | |
| return ; //and we stop makePieChart. | |
| } | |
| context.fillStyle = "rgb(" + red + "," + green + "," + blue +")"; | |
| // percentage of the circle for current section, will give the angles | |
| percentage = values[i] / parseFloat(sum); | |
| endAngle = startingAngle + Math.PI*2*percentage; | |
| // draw an arc between starting angle and end angle. | |
| context.arc(cx, cy, radius, startingAngle, endAngle); | |
| // draw a line between end angle and center of circle. | |
| context.lineTo(cx, cy); | |
| //The next starting angle is the current end angle. | |
| startingAngle = endAngle; | |
| context.fill(); // draw pie section | |
| context.stroke(); // draw the outline. | |
| context.closePath(); // Close the path. | |
| context.restore(); | |
| } | |
| } | |
| // draw a broken line chart | |
| function makeBrokenLines(x, y, width, height, values) { | |
| context.save(); | |
| // Move origin of the coordinate system at x, y, bottom left corner | |
| context.translate(x, y); | |
| var maxValue = getMax(values); | |
| // distance between two horizontal values, in pixels | |
| var hStep = width / parseFloat(values.length); | |
| // step between two vertical values, in pixels | |
| var vStep = -height / parseFloat(maxValue); | |
| // set fill color to black, for drawing the circle plots | |
| context.fillStyle = "black"; | |
| // thickness of the lines | |
| context. lineWidth = 1; | |
| // set the cursor to origin. | |
| context.moveTo(0 , 0); | |
| // All lines are drawn into a path | |
| context.beginPath(); | |
| for(i=0; i<values.length; i++) { | |
| context.lineTo(i * hStep, vStep * values[i]); | |
| } | |
| context.stroke(); // draw the path with all the lines | |
| // Draw the filled black circles at each value's coordinate | |
| for(i=0; i<values.length; i++) { | |
| context.beginPath(); | |
| context.arc(i * hStep, vStep * values[i], 3, 0, 2*Math.PI); | |
| context.fill(); //We fill all circles. | |
| } | |
| // draw the X and Y axis | |
| drawAxis(width, height, values, maxValue); | |
| context.restore(); | |
| } | |
| </script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var canvas; | |
| var context; | |
| // Size of the histogram | |
| var width = 150, height=150; | |
| // The origin, bottom left corner, relative to the origin in the canvas | |
| var x = 40, y = 190; | |
| // Data to be visualized | |
| var values = [1, 10, 2, 7, 9, 2, 34, 100, 12, 14, 19]; | |
| //init function is launch when the page is loaded. | |
| function init() { | |
| canvas = document.getElementById('canvas'); | |
| context = canvas.getContext('2d'); | |
| var list = document.getElementById('sliders'); | |
| // Create the sliders for changing the values. | |
| var max = getMax(values); | |
| for (i=0; i < values.length; i++) { | |
| var input = document.createElement('input'); | |
| var li = document.createElement('li'); | |
| var label = document.createElement('label'); | |
| label.setAttribute('for', 'id'+i); | |
| label.textContent = 'value' + i + ' '; | |
| li.appendChild(label); | |
| input.setAttribute('type', 'range'); | |
| input.setAttribute('id', 'id' + i); | |
| // Set their value and max attributes correctly | |
| input.setAttribute('max', max); | |
| input.value = values[i]; | |
| // Add an onchange event listener and pass the | |
| // index of the slider to the callback | |
| input.setAttribute('oninput', 'changeValue(' + i + ')'); | |
| li.appendChild(input); | |
| list.appendChild(li); | |
| } | |
| makeHistogram(x, y, | |
| width, height, | |
| values); | |
| // center of pie x and y, radius, values | |
| makePieChart(300, 100, 90, values); | |
| // Draw broken lines chart | |
| makeBrokenLines(40, 370, width, height, values); | |
| } | |
| // callback for sliders' onchange events. | |
| function changeValue(index) { | |
| var value = document.getElementById("id"+index).value; | |
| // put the slider value in the values array | |
| values[parseInt(index)] = parseInt(value); | |
| // clear the canvas | |
| context.clearRect(0,0, canvas.width, canvas.height); | |
| // redraw the charts | |
| makeHistogram(x, y, width, height, values); | |
| makePieChart(300, 100, 90, values); | |
| makeBrokenLines(40, 370, width, height, values); | |
| } | |
| // returns the max from the elements of the values array. | |
| function getMax(values) { | |
| var maxValue = 0; | |
| for (i=0; i<values.length; i++) { | |
| if (maxValue < values[i]) | |
| maxValue = values[i]; | |
| } | |
| return maxValue; | |
| } | |
| function drawAxis(width, height, values, maxValue) { | |
| // remember: we have the origin of the coordinate system at bottom left | |
| // Y values above will be negative | |
| context.strokeStyle = "black"; //We draw in black the outline. | |
| context.fillStyle = "black"; //We fill in black. | |
| //We define the vertical step unit. Is it 10 ? 20 ? 100 ? 1000 ? Depending on the | |
| // max unit value, we decide how the steps will be for the ticks | |
| var unit = 1; | |
| while (maxValue / (unit*10) > 1) { | |
| unit *= 10; | |
| } | |
| //We define the highest vertical step. | |
| var yMaxOnAxis = parseInt(maxValue) / unit; | |
| // Everything is in a path, all drawing orders will be drawn by a final call | |
| // to context.stroke() at the end of the function. | |
| context.beginPath(); //Begin a new path. | |
| // Draw the axis' lines | |
| context.moveTo(0, 0); //We place the cursor to origin. | |
| context.lineTo(0, -height); //We draw the vertical line. | |
| context.moveTo(0, 0); //We place the cursor to origin. | |
| context.lineTo(width, 0); //We draw the horizontal line. | |
| // ticks/labels on the vertical line | |
| context.textAlign = "left"; | |
| for (i=0; i <= yMaxOnAxis; i++) { | |
| // move to the next graduation. the y value is negative due to | |
| // the change of the origin by a call to translate(x,y) in the drawHistogram | |
| // function. | |
| context.moveTo(0, -height / yMaxOnAxis * i ); | |
| // draw an horizontal line, 5 pixels long, on the left of the axis | |
| context.lineTo(-5, -height / yMaxOnAxis * i ); | |
| // write the tick value, 25 pixels on the left of the axis | |
| context.fillText(i*unit, -25, -height / yMaxOnAxis * i ); | |
| } | |
| // Ticks/labels on the horizontal line | |
| var counter = 0; | |
| // text centered below the tick | |
| context.textAlign = "center"; | |
| // graduation on the horizontal line. | |
| var rectanglesWidth = width / values.length; | |
| for (i=0; i <= values.length; i++) { | |
| // Move to the next horizontal position of the tick | |
| context.moveTo(i*rectanglesWidth , 0); | |
| // draw a vertical line 5 pixels long: the tick | |
| context.lineTo(i*rectanglesWidth , 5); | |
| // write tick label 15 pixels below the tick | |
| context.fillText(i, i*rectanglesWidth , 15); | |
| counter++; | |
| } | |
| // Draw everything in the path | |
| context.stroke(); | |
| } | |
| // MakeHistogram building a bar plot. x, y is the bottom left position of the | |
| // histogram. Easier to reason with this coordonate system | |
| function makeHistogram(x, y, width, height, values) { | |
| context.save(); | |
| // Change the origin at bottom left. If we draw "above", Y values will be negative. | |
| // y=0 is the horizontal line at bottom | |
| context.translate(x, y); | |
| // Compute the max of the values array | |
| var maxValue = getMax(values); | |
| // step in pixels between two horizontal values for bar plot. | |
| var rectWidth = width / parseFloat(values.length); | |
| // step in pixels between two vertical values for bar plot. | |
| var vStep = -height / parseFloat(maxValue); | |
| //Set fill color to red and stroke color to black. | |
| context.fillStyle = "red"; | |
| context.strokeStyle = "black"; | |
| // Draw the histogram rectangles | |
| for(i=0; i < values.length; i++) { | |
| //We draw a filled red rectangle to represent the current value. | |
| context.fillRect(i * rectWidth, 0, | |
| rectWidth, vStep * values[i]); | |
| //We draw the outline of rectangle. | |
| context.strokeRect(i * rectWidth, 0, | |
| rectWidth, vStep * values[i]); | |
| } | |
| // draw the axis | |
| drawAxis(width, height, values, maxValue); | |
| context.restore(); | |
| } | |
| //makePieChart draw a circle graph with values table. | |
| function makePieChart(cx, cy, radius, values) { | |
| context.save(); | |
| // Compute the sum of all values | |
| var sum=0; | |
| for(var n=0; n < values.length; n++) { | |
| sum += values[n]; | |
| } | |
| //Initialization of red green blue colors. | |
| var red = 0; | |
| var green = 0; | |
| var blue = 0; | |
| //starting and ending angles of each pie section | |
| var startingAngle = 0; | |
| var endAngle = 0; | |
| //The percentage the current value represents, compare to the total, | |
| // we are in a closed circle, the sum is 100% | |
| var percentage; | |
| //We draw in grey the outline of the section. | |
| context.strokeStyle = "grey"; | |
| // Draw the pie chart, clockwise, à la HTML5 | |
| //for (var i=values.length-1; i> 0; i--) { // for ccw display | |
| for(var i = 0; i < values.length; i++) { | |
| context.beginPath(); //Begin a new path. | |
| // We change the colors depending on the i-value. Just a trick based | |
| // on the modulo. Will produce different colors for the pie sections | |
| switch (i%3) { | |
| case 0: //If i modulo 3 equals 0: | |
| red += 80; //We add red. | |
| break; | |
| case 1: //If i modulo 3 equals 1: | |
| green += 80; //We add green. | |
| break; | |
| case 2: //If i modulo 3 equals 2: | |
| blue += 80; //We add blue. | |
| break; | |
| default: //If there is an error. | |
| alert("we have encountered an error"); | |
| return ; //and we stop makePieChart. | |
| } | |
| context.fillStyle = "rgb(" + red + "," + green + "," + blue +")"; | |
| // percentage of the circle for current section, will give the angles | |
| percentage = values[i] / parseFloat(sum); | |
| endAngle = startingAngle + Math.PI*2*percentage; | |
| // draw an arc between starting angle and end angle. | |
| context.arc(cx, cy, radius, startingAngle, endAngle); | |
| // draw a line between end angle and center of circle. | |
| context.lineTo(cx, cy); | |
| //The next starting angle is the current end angle. | |
| startingAngle = endAngle; | |
| context.fill(); // draw pie section | |
| context.stroke(); // draw the outline. | |
| context.closePath(); // Close the path. | |
| context.restore(); | |
| } | |
| } | |
| // draw a broken line chart | |
| function makeBrokenLines(x, y, width, height, values) { | |
| context.save(); | |
| // Move origin of the coordinate system at x, y, bottom left corner | |
| context.translate(x, y); | |
| var maxValue = getMax(values); | |
| // distance between two horizontal values, in pixels | |
| var hStep = width / parseFloat(values.length); | |
| // step between two vertical values, in pixels | |
| var vStep = -height / parseFloat(maxValue); | |
| // set fill color to black, for drawing the circle plots | |
| context.fillStyle = "black"; | |
| // thickness of the lines | |
| context. lineWidth = 1; | |
| // set the cursor to origin. | |
| context.moveTo(0 , 0); | |
| // All lines are drawn into a path | |
| context.beginPath(); | |
| for(i=0; i<values.length; i++) { | |
| context.lineTo(i * hStep, vStep * values[i]); | |
| } | |
| context.stroke(); // draw the path with all the lines | |
| // Draw the filled black circles at each value's coordinate | |
| for(i=0; i<values.length; i++) { | |
| context.beginPath(); | |
| context.arc(i * hStep, vStep * values[i], 3, 0, 2*Math.PI); | |
| context.fill(); //We fill all circles. | |
| } | |
| // draw the X and Y axis | |
| drawAxis(width, height, values, maxValue); | |
| context.restore(); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment