OpenFlashChart - A Radar Chart Example with VB.NET

motaweb51

4.50/5 (5 votes)

May 28, 2009

CPOL

1 min read

57538

1239

How to implement a radar chart with OpenFlashChart inside an ASP.NET VB.NET project

Download source code - 220.7 KB

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:

cp_ofc_vb

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:

'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

28^th May, 2009: Initial version