JavaScript DHTML/GUI Components/Chart

Материал из Web эксперт
Перейти к: навигация, поиск

Javascript bar chart

   <source lang="html4strict">

/* Examples From JavaScript: The Definitive Guide, Fourth Edition Legal matters: these files were created by David Flanagan, and are Copyright (c) 2001 by David Flanagan. You may use, study, modify, and distribute them for any purpose. Please note that these examples are provided "as-is" and come with no warranty of any kind. David Flanagan

  • /

/** 

* BarChart.js:
* This file defines makeBarChart(), a function that creates a bar chart to
* display the numbers from the data[] array. The chart is a block element
* inserted at the current end of the document.  The overall size of the chart 
* is specified by the optional width and height arguments, which include the
* space required for the chart borders and internal padding.  The optional
* barcolor argument specifies the color of the bars. The function returns the
* chart element it creates, so the caller can further manipulate it by
* setting a margin size, for example.
* 
* Import this function into an HTML file with code like this:
*    <script src="BarChart.js"></script>
* Use this function in an HTML file with code like this:
*    <script>makeBarChart([1,4,9,16,25], 300, 150, "yellow");</script>
**/

<HTML> <HEAD> <TITLE>JavaScript Bar chart</TITLE> <SCRIPT LANGUAGE="JavaScript">

function makeBarChart(data, width, height, barcolor) { 

   // Provide default values for the optional arguments
   if (!width) width = 500;
   if (!height) height = 350;
   if (!barcolor) barcolor = "blue";
   
   // The width and height arguments specify the overall size of the
   // generated chart. We have to subtract the border and padding
   // sizes from this to get the size of the element we create.
   width -= 24;  // subtract 10px padding and 2px border left and right
   height -= 14; // Subtract 10px top padding and 2px top and bottom border
   // Now create an element to hold the chart.  Note that we make the chart
   // relatively positioned so that can have absolutely positioned children,
   // but it still appears in the normal element flow.
   var chart = document.createElement("DIV");
   chart.style.position = "relative";          // Set relative positioning
   chart.style.width = width + "px";           // Set the chart width
   chart.style.height = height + "px";         // Set the chart height
   chart.style.border = "solid black 2px";     // Give it a border
   chart.style.paddingLeft = "10px";           // Add padding on the left
   chart.style.paddingRight = "10px";          // and on the right
   chart.style.paddingTop = "10px";            // and on the top
   chart.style.paddingBottom = "0px";          // but not on the bottom
   chart.style.backgroundColor = "white";      // Make chart background white
   // Compute the width of each bar
   var barwidth = Math.floor(width/data.length);
   // Find largest number in data[].  Note clever use of Function.apply()
   var maxdata = Math.max.apply(this, data);
   // The scaling factor for the chart: scale*data[i] gives height of a bar
   var scale = height/maxdata;
   // Now loop through the data array and create a bar for each datum
   for(var i = 0; i < data.length; i++) {
       var bar = document.createElement("div"); // Create div for bar
       var barheight = data[i] * scale;         // Compute height of bar
       bar.style.position = "absolute";         // Set bar position and size
       bar.style.left = (barwidth*i+1+10)+"px"; // Add bar border & chart pad
       bar.style.top = height-barheight+10+"px";// Add chart padding
       bar.style.width = (barwidth-2) + "px";   // -2 for the bar border
       bar.style.height = (barheight-1) + "px"; // -1 for the bar top border
       bar.style.border = "solid black 1px";    // Bar border style
       bar.style.backgroundColor = barcolor;    // Bar color
       bar.style.fontSize = "1px";              // IE bug workaround
       chart.appendChild(bar);                  // Add bar to chart
   }
   // Now add the chart we"ve built to the document body
   document.body.appendChild(chart);
   // Finally, return the chart element so the caller can manipulate it
   return chart;

} </SCRIPT> </HEAD> <BODY> <script>makeBarChart([1,4,9,16,25], 300, 150, "yellow");</SCRIPT> </BODY> </HTML> 


 </source>


jqchart

<A href="http://www.wbex.ru/Code/JavaScriptDownload/jqchart.zip">jqchart.zip( 86 k)</a>

1. <A href="/Code/JavaScript/GUI-Components/Javascriptbarchart.htm">Javascript bar chart </a>

Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/GUI_Components/Chart&oldid=4099»