Web Analytics Made Easy -
StatCounter Using Javascript can Bar charts be drawn - CodingForum


No announcement yet.

Using Javascript can Bar charts be drawn

  • Filter
  • Time
  • Show
Clear All
new posts

  • Using Javascript can Bar charts be drawn

    For evaluation of Testing a section, I want to use bar charts which displays the score of each topic in a test attended.
    Can bar charts or any graphics can be drawn for evalution using javascript.
    If yes, what method or procedure should be implemented.

  • #2
    Sure, check out these examples:



    • #3
      As I am just starting to learn I can’t create something, but I did find this and it’s free!
      Just add this to your HTML and configure parameters as needed.
      FYI, the credit link at the top of the code is a dead link.

      <APPLET CODEBASE="http://www.play-free-games.com/webmasters/dynamic-bar-charts" CODE="barchart.class" HEIGHT=180 WIDTH=360>
      (You can alter the height and width to whatever you want)
      <PARAM NAME=NumberOfVals VALUE=4>
      (This parameter sets the number of bars per column)
      <PARAM NAME=NumberOfCols VALUE=5>
      (Sets the number of columns)
      <PARAM NAME=border VALUE=60>
      (Space all round the chart)
      <PARAM NAME=yborder VALUE=18>
      (Extra border on the Y-Axis to allow room for the labels)
      <PARAM NAME=colmargin VALUE=6>
      (Space between the columns)
      <PARAM NAME=ymax VALUE=50>
      <PARAM NAME=ymin VALUE=0>
      (Upper/Lower range of the Y-Axis)
      <PARAM NAME=title VALUE="Sales">
      (Set the title of the chart)
      <PARAM NAME=KEY_1 VALUE="Smith">
      <PARAM NAME=KEY_2 VALUE="Jones">
      <PARAM NAME=KEY_3 VALUE="Blackthorn">
      <PARAM NAME=KEY_4 VALUE="Gupta">
      (Values displayed as keys)
      <PARAM NAME=LineColor_R_1 VALUE=200>
      <PARAM NAME=LineColor_G_1 VALUE=0>
      <PARAM NAME=LineColor_B_1 VALUE=0>
      <PARAM NAME=LineColor_R_2 VALUE=0>
      <PARAM NAME=LineColor_G_2 VALUE=200>
      <PARAM NAME=LineColor_B_2 VALUE=0>
      <PARAM NAME=LineColor_R_3 VALUE=0>
      <PARAM NAME=LineColor_G_3 VALUE=0>
      <PARAM NAME=LineColor_B_3 VALUE=200>
      <PARAM NAME=LineColor_R_4 VALUE=100>
      <PARAM NAME=LineColor_G_4 VALUE=0>
      <PARAM NAME=LineColor_B_4 VALUE=100>
      (Set a Red, Green and Blue value between 0 and 255 for each bar)
      <PARAM NAME=Grid VALUE="true">
      (Display the grid? - true or false)
      <PARAM NAME=VAL_1_1 VALUE=4>
      <PARAM NAME=VAL_1_2 VALUE=3>
      <PARAM NAME=VAL_1_3 VALUE=2>
      <PARAM NAME=VAL_1_4 VALUE=2>
      <PARAM NAME=VAL_2_1 VALUE=25>
      <PARAM NAME=VAL_2_2 VALUE=32>
      <PARAM NAME=VAL_2_3 VALUE=35>
      <PARAM NAME=VAL_2_4 VALUE=2>
      <PARAM NAME=VAL_3_1 VALUE=16>
      <PARAM NAME=VAL_3_2 VALUE=41>
      <PARAM NAME=VAL_3_3 VALUE=15>
      <PARAM NAME=VAL_3_4 VALUE=8>
      <PARAM NAME=VAL_4_1 VALUE=10>
      <PARAM NAME=VAL_4_2 VALUE=2>
      <PARAM NAME=VAL_4_3 VALUE=14>
      <PARAM NAME=VAL_4_4 VALUE=16>
      <PARAM NAME=VAL_5_1 VALUE=10>
      <PARAM NAME=VAL_5_2 VALUE=19>
      <PARAM NAME=VAL_5_3 VALUE=24>
      <PARAM NAME=VAL_5_4 VALUE=12>
      (Values to display)
      <PARAM NAME=LAB1 VALUE="1Q 2001">
      <PARAM NAME=LAB2 VALUE="2Q 2001">
      <PARAM NAME=LAB3 VALUE="3Q 2001">
      <PARAM NAME=LAB4 VALUE="4Q 2001">
      <PARAM NAME=LAB5 VALUE="1Q 2002">
      (Labels to display)
      Last edited by newmate; Jun 15, 2002, 06:36 PM.
      Editor; FrontPage 2002 (included in Office XP). Personal Operating System; Windows XP and ME. Browsers; Latest versions, NN, IE and Opera. Server running; RedHat Linux 7.2


      • #4
        You may want to check out the following script: http://www.javascriptkit.com/script/.../graphit.shtml
        - George
        - JavaScript Kit- JavaScript tutorials and 400+ scripts!
        - JavaScript Reference- JavaScript reference you can relate to.