Click here to Skip to main content
14,382,054 members

OpenFlashChart - A radar chart example with VB.NET

Rate this:
4.50 (5 votes)
Please Sign up or sign in to vote.
4.50 (5 votes)
28 May 2009CPOL
How to implement a radar chart with OpenFlashChart inside an ASP.NET VB.NET project.


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.


First of all, a radar chart look 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" 


<html xmlns="" >
<head runat="server">
    <title>OFC - Test</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <form id="form1" runat="server">






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...

        'We define the SpokeLabels (the labels on the tips of each lines)
        'You should add values here dynamically...
        label1.Add("Text 1")
        label1.Add("Not sure...")
        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

        'We define our SpokeLabels here

        '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
            .CacheControl = "no-cache"
        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.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Web Developer
Canada Canada
No Biography provided

Comments and Discussions

Questionradar chart as image Pin
Member 1369084625-Feb-18 0:40
memberMember 1369084625-Feb-18 0:40 
QuestionWoW!!! it works !!!! Pin
Member 1369084622-Feb-18 1:53
memberMember 1369084622-Feb-18 1:53 
QuestionDoesnt Work in IE? Pin
Member 84991023-Feb-11 4:41
memberMember 84991023-Feb-11 4:41 
AnswerRe: Doesnt Work in IE? Pin
motaweb5123-Feb-11 4:55
membermotaweb5123-Feb-11 4:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Posted 28 May 2009


24 bookmarked