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.