OpenFlashChart - A Radar Chart Example with VB.NET
How to implement a radar chart with OpenFlashChart inside an ASP.NET VB.NET project
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
andwidth
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:
'Dont forget it!
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 'My chart I will work on.
Dim data1 As New List(Of Double) 'The list of my values
Dim label1 As New List(Of String) 'The list of my SpokeLabels
Dim area As New Area 'An area is as display of values in a radar
Dim radar As New RadarAxis(7) 'The kind of chart, Radar,
'we use. Note : the constructor need
'how many sectors
Dim sp_labels As New XAxisLabels()
'We define the XAxis or in our case, the SpokeLabels
'This is where you place the values inside a list of double
'You should add values here dynamically...
data1.Add(8)
data1.Add(9)
data1.Add(3)
data1.Add(6)
data1.Add(5)
data1.Add(2)
data1.Add(10)
'We define the SpokeLabels (the labels on the tips of each lines)
'You should add values here dynamically...
label1.Add("Text 1")
label1.Add("Orange")
label1.Add("Men")
label1.Add("Not sure...")
label1.Add("Anything")
label1.Add("Women")
label1.Add("Hello World")
'We define our area. In this case, we only have one area but simply
'define another and add it to the chart with different values.
With area
.Values = data1
.Width = 1
.DotSize = 1
.FillColor = "#cccccc"
.Colour = "#fe0"
.Loop = True
End With
'We add our values in our chart here
Chart.AddElement(area)
'We define our SpokeLabels here
sp_labels.SetLabels(label1)
'We define how the radar will look like...
radar.Steps = 1
radar.SetRange(0, 10)
radar.SpokeLabels = sp_labels
'Now we put the finishing touch for the chart. We define the radar
'and we place some properties for the chart itself...
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
'Now, we must translate our properties in a JSON style with the command
'ToPrettyString and our data will be bind inside our radar Chart
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:
- JSON introduction (How data should be send to the chart)
- A radar example from OpenFlashChart
- C# examples from xiao yifang
So, that's all folks!... Pour ceux qui ont besoins, je parle français.
History
- 28th May, 2009: Initial version