Creating web charts using Open Flash Chart

Open Flash Chart gives you the possibility to have Flash based charts on your website without the need to know Flash. All it takes is a JSON file that describes the chart. This JSON file can be a static file that you created yourself with a text editor or dynamically created by a program, e.g. written in Java or Python.

There are several different types of charts that can be displayed. Some of them are shown here:

We start by creating an HTML page that will contain the chart:

<html>
   <head>
      <script type="text/javascript" src="swfobject.js"></script>
      <script type="text/javascript">
         swfobject.embedSWF("open-flash-chart.swf", "my_chart1", "600", "250",
                            "9.0.0", "expressInstall.swf", {"data-file":"chart1.data"});
      </script>
   </head>
   <body>
      <div id="my_chart1"></div>
   </body>
</html>

Then we create a JSON file called chart1.data that describes how the chart should look:

{
  "title":{
    "text":  "Bar Glass Chart",
    "style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"
  },

  "bg_colour": "#FFFFFF",

  "x_axis":
  {
    "stroke":      1,
    "tick_height": 10,
    "colour":      "#CCCCCC",
    "grid_colour": "#00ff00",
    "labels":
    {
      "labels": ["Server 1", "Server 2", "Server 3"]
    }
  },

  "y_axis":
  {
    "steps":       20,
    "tick_length": 100,
    "colour":      "#CCCCCC",
    "grid_colour": "#00FF00",
    "offset":      0,
    "max":         100
  },

  "elements":
  [
    {
      "type":      "bar_glass",
      "alpha":     0.5,
      "colour":    "#9933CC",
      "text":      "CPU load",
      "font-size": 10,
      "values" :   [90, 60, 70]
    },
    {
      "type":      "bar_glass",
      "alpha":     0.5,
      "colour":    "#CC9933",
      "text":      "Memory usage",
      "font-size": 10,
      "values" :   [60, 70, 90]
    }
  ]
}

Copy the HTML file, the JSON file and the open-flash-chart.swf and swfobject.js files from the Open Flash Chart website to your own webserver and point your webbrowser to the HTML file. The result should look like the chart on this page.

Advertisements
This entry was posted in programming and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s