Click here to Skip to main content
Click here to Skip to main content
Go to top

OpenFlashChart - A radar chart example with VB.NET

, 28 May 2009
Rate this:
Please Sign up or sign in to vote.
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 look 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:

So, that's all folks!... Pour ceux qui ont besoins, je parle français.

License

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

Share

About the Author

motaweb51
Web Developer Netilop.com
Canada Canada
No Biography provided

Comments and Discussions

 
QuestionDoesnt Work in IE? PinmemberMember 84991023-Feb-11 3:41 
AnswerRe: Doesnt Work in IE? Pinmembermotaweb5123-Feb-11 3:55 

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

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

| Advertise | Privacy | Mobile
Web03 | 2.8.140922.1 | Last Updated 28 May 2009
Article Copyright 2009 by motaweb51
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid