JavaScript generates percentage charts and column charts based on data

Last Update:2013-12-01 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

<HTML>

<Head>

<Title> JS percentage chart and bar chart </title>

<Xml: namespace prefix = "v"/>

<Style>

V \: * {behavior = url (# default # VML )}

</Style>

<Style>

A: hover {color: maroon}

H2. {color: #006600;

Margin-top: 0pt;

Margin-bottom: 0pt}

H3 {color :# 006600;

Margin-top: 6pt;

Margin-bottom: 3pt}

H4. {color: #006600;

Font-family: Arial;

Font-size: 10pt;

Margin-top: 3pt;

Margin-bottom: 0pt}

H5. {color: #006600;

Margin-top: 0pt;

Margin-bottom: 0pt}

P {margin-top: 0pt;

Margin-bottom: 12pt}

</Style>

</Head>

<Style> p. Chart {font-size: 8pt; font-family: "Times"; color: black; text-align: right ;}</style>

<V: group style = 'height: 324pt; width: 432pt 'coordsize = "4320,3240">

<! -- Paper is white with a simple drop-shadow -->

<V: rect style = 'width: 4320; height: 3240 'fillcolor = "white">

<V: shadow on = "true" offset = "4pt, 3pt" color = "silver"/>

</V: rect>

<V: rect style = 'position: absolute; left: 40; top: 40; width: 4240; height: 3160; 'fillcolor = "# FFFFFF" strokeweight = 1.5pt/>

<P class = Chart style = 'position: absolute; left: 123.1pt; top: 17.8pt; width: 189.8pt; height: 12.6pt; color: "#000080"; font-style: italic; font-size: 18pt; text-align: center; '> Sample Piechart </p>

<P class = Chart style = 'position: absolute; left: 225.5pt; top: 310.4pt; width: 198.5pt; height: 5.6pt; color: "#008000"; font-family: "Arial"; '> Random numbers drawn as a simple pie </p>

<V: shape style = 'position: absolute; width: 4320; height: 3240 'strokeweight = 0.5pt fillcolor = "# DBDBED" path = "M 2250 1590 AE 2250 1590 791 791-3538944 9437184 X E"/>

<V: shape style = 'position: absolute; width: 4320; height: 3240 'strokecolor = "#000000" strokeweight = 0.7pt>

<V: stroke joinstyle = round endcap = round/>

<V: fill on = "false"/>

<V: path v = "M 3115 1309 L 2927 1370 E"/>

</V: shape>

<V: shape style = 'position: absolute; width: 4320; height: 3240 'strokeweight = 0.5pt fillcolor = "# AA5555" path = "M 2245 1629 AE 2245 1629 791 791-9201254 5662310 X E"/>

<V: shape style = 'position: absolute; width: 4320; height: 3240 'strokecolor = "#000000" strokeweight = 0.7pt>

<V: stroke joinstyle = round endcap = round/>

<V: fill on = "false"/>

<V: path v = "M 3139 1329 M 2131 2532 L 2156 2336 E"/>

</V: shape>

<V: shape style = 'position: absolute; width: 4320; height: 3240 'strokeweight = 0.5pt fillcolor = "# F2F8F8" path = "M 2250 1590 AE 2250 1590 791 791-13290701 4089446 X E"/>

<V: shape style = 'position: absolute; width: 4320; height: 3240 'strokecolor = "#000000" strokeweight = 0.7pt>

<V: stroke joinstyle = round endcap = round/>

<V: fill on = "false"/>

<V: path v = "M 2115 2552 M 1350 1723 L 1546 1694 E"/>

</V: shape>

<P class = Chart style = 'position: absolute; left: 83.5pt; top: 168.7pt; width: 49.9pt; height: 5.6pt; '> Three: 13 </p>

<V: shape style = 'position: absolute; width: 4320; height: 3240 'strokeweight = 0.5pt fillcolor = "# 8BC58B" path = "M 2193 1535 AE 2193 1535 791 791-16121856 2831155 X E"/>

<V: shape style = 'position: absolute; width: 4320; height: 3240 'strokecolor = "#000000" strokeweight = 0.7pt>

<V: stroke joinstyle = round endcap = round/>

<V: fill on = "false"/>

<V: path v = "M 1334 1743 M 1544 898 L 1685 1037 E"/>

</V: shape>

<V: shape style = 'position: absolute; width: 4320; height: 3240 'strokeweight = 0.5pt fillcolor = "# C080C0" path = "M 2250 1590 AE 2250 1590 791 791-17694720 1572864 X E"/>

<V: shape style = 'position: absolute; width: 4320; height: 3240 'strokecolor = "#000000" strokeweight = 0.7pt>

<V: stroke joinstyle = round endcap = round/>

<V: fill on = "false"/>

<V: path v = "M 1528 918 M 2061 700 L 2102 894 E"/>

</V: shape>

</V: group> </div>

<Html>

<Head>

</Head>

Function displayTitle (title)

{

Document. write ("<center> <I>" + title + "</I> </center> <br> ");

}

Function generateRandomNumber (num ){

Return Math. round (Math. random () * (num-1) + 1;

}

Function plottablehead (val)

{

Document. writeln ("<table border = 0 bgcolor = black width = 10 height = 10 cellpadding = 0 cellspacing = 0> ");

Document. write ("<tr> <I>" + val + "</I> ");

}

Function plottabletail ()

{

Document. write ("</tr> </table> <br> ");

}

Function plotcolor (d, clr)

{

For (I = 1; I <= d; I ++ ){

Document. write ("<td bgcolor =" + clr + "> </td> ");

}

Function setColor (foreground, background)

{

Document. fgColor = foreground;

Document. bgColor = background;

}

SetColor ("orange", "black ");