JavaScript DHTML/GUI Components/Chart

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

Javascript bar chart

 
/*
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>



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»