Introduction
I recently searched for a clean and simple way to draw a radar chart with minimum knowledge of Java. I found the API from Google, and I was impressed with the style the charts have but I found it a little messy to implement it inside my ASP.NET (VB.NET) project. So, I found the OpenFlashChart component.
Background
First of all, a radar chart looks like this:
I found this kind of chart really interesting because it draws a single visual representation of multiple variables. The image is the result you should have if you run the source code I supply.
Using the Code
First, be sure to download the latest component from OpenFlashChart
, and integrate it inside Visual Studio the regular way. Next, add an ASPX page which will show the graph. In our project, it will be default.aspx, and this is the HTML code:
<%@ Page Language="vb" AutoEventWireup="false"
CodeBehind="Default.aspx.vb" Inherits="cp_ofc_vb._Default" %>
<%@ Register Assembly="OpenFlashChart"
Namespace="OpenFlashChart" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>OFC - Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<cc1:openflashchartcontrol
id="ofc_radar"
runat="server"
datafile="datafile/radar.aspx"
height="200px"
width="300px">
</cc1:openflashchartcontrol>
</div>
</form>
</body>
</html>
Note some points:
- Don't forget to register the
OpenFlashChart
assembly. - You can specify the
height
and width
of the chart. - The property
DATAFILE
is the ASPX page which will supply the values.
Now, let's see radar.aspx.vb inside the DATAFILE folder:
Imports OpenFlashChart
Partial Public Class radar
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Me.Load
Dim Chart As New OpenFlashChart.OpenFlashChart
Dim data1 As New List(Of Double)
Dim label1 As New List(Of String)
Dim area As New Area
Dim radar As New RadarAxis(7)
Dim sp_labels As New XAxisLabels()
data1.Add(8)
data1.Add(9)
data1.Add(3)
data1.Add(6)
data1.Add(5)
data1.Add(2)
data1.Add(10)
label1.Add("Text 1")
label1.Add("Orange")
label1.Add("Men")
label1.Add("Not sure...")
label1.Add("Anything")
label1.Add("Women")
label1.Add("Hello World")
With area
.Values = data1
.Width = 1
.DotSize = 1
.FillColor = "#cccccc"
.Colour = "#fe0"
.Loop = True
End With
Chart.AddElement(area)
sp_labels.SetLabels(label1)
radar.Steps = 1
radar.SetRange(0, 10)
radar.SpokeLabels = sp_labels
With Chart
.Radar_Axis = radar
.Title = New Title("My first Radar")
.Title.Style = "txt_noir"
.Bgcolor = "#ffffff"
.Tooltip = New ToolTip("#val#")
.Tooltip.Shadow = True
.Tooltip.Colour = "#e43456"
.Tooltip.MouseStyle = ToolTipStyle.CLOSEST
End With
With Response
.Clear()
.CacheControl = "no-cache"
.Write(Chart.ToPrettyString())
.End()
End With
End Sub
End Class
Now, try this, and you should have your radar chart, the same as above. Even if the component from OpenFlashChart
needs JSON formatting, we don't need to learn it before we can have a clean and simple chart. I suggest you visit these sites if you need further information:
So, that's all folks!... Pour ceux qui ont besoins, je parle français.
History
- 28th May, 2009: Initial version
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.