Introduction of Microsoft Chart control in 5 minutes Part -IInd

 Hello friends,
In last post I just promised that I will come with example. So here I am with the second part of our topic which is “Introduction of Microsoft chart control in 5 minutes”
Friends you don’t believe that but MS Chart control is very powerful control and I am still working on it for best output, for basic understand lets take a problem for which we have to show a graph
I am not going here for a big task. So here we go.
Suppose we want to show our friends extra saving of month April (I know today is 1’st April and in today’s era saving is just big problem for middle class families but hope this much extra saving done in there pocket.)
For this data is as below.

Sr. No           Friends                Saving
1                      Rajat                     5700
2                     Ashish                  12000
3                     Kapil                      4800
4                    Ravi                         7000
5                    Monica                  6000
6                   Kamlesh                3000
7                  Seepee                   9000

So we are ready with data and now we want to show chart related this. So just follow below steps.
Step 1:- Open a new project and include MS Chart control on your toolbox list
You can find the control reference path at “C:\program Files\Microsoft Chart Controls\Assemblies”
When you done with this just drag drop the chart control on your page.

Step 2:- Once you done with this you will find following changes in web Config or you can say this extra lines will be automatically added.
This is the assembly required for chart is added.

And if you don’t know then I will tell you that the output of the chart control is an image so there for here is image handles. (You can get PNG, JPEG etc format)

 

The below setting is used for default Storage of image which will created at run time. URL is virtual path here. And timeout is just use for time duration after that time image will delete automatically.
Step 3:- In a simple chart there are mainly two things which is X –Axis, Y- Axis
We can arrange interval of both X- Axis and Y-Axis by an in line control which is provide by MS Chart control.

Suppose I want my friends name on X- Axis then I have to add custom label control for that. As shown below figure.

A chart control having mainly Title, Legend, Series, and chart area nodes.
Below is our html part of page.
You will see here title, legend, series and chart area.

Step 4:- Just drop a dropdown control for chart type. MS chart control provides 34 different charting types. We just bind the dropdown with this charting type.

Step 5:- Write down code for bind dropdown with chart control.
Private Sub pvt_BindDropDownList()
Try
Me.ddlChartType.Items.Clear()
Me.ddlChartType.Items.Add(New ListItem(“AREA”, SeriesChartType.Area))
Me.ddlChartType.Items.Add(New ListItem(“Bar”, SeriesChartType.Bar))
Me.ddlChartType.Items.Add(New ListItem(“BoxPlot”, SeriesChartType.BoxPlot))
Me.ddlChartType.Items.Add(New ListItem(“Bubble”, SeriesChartType.Bubble))
Me.ddlChartType.Items.Add(New ListItem(“CandelStick”, SeriesChartType.Candlestick))
Me.ddlChartType.Items.Add(New ListItem(“Column”, SeriesChartType.Column))
Me.ddlChartType.Items.Add(New ListItem(“Doughnut”, SeriesChartType.Doughnut))
Me.ddlChartType.Items.Add(New ListItem(“ErrorBar”, SeriesChartType.ErrorBar))
Me.ddlChartType.Items.Add(New ListItem(“FastLine”, SeriesChartType.FastLine))
Me.ddlChartType.Items.Add(New ListItem(“FastPoint”, SeriesChartType.FastPoint))
Me.ddlChartType.Items.Add(New ListItem(“Funnel”, SeriesChartType.Funnel))
Me.ddlChartType.Items.Add(New ListItem(“Kagi”, SeriesChartType.Kagi))
Me.ddlChartType.Items.Add(New ListItem(“Line”, SeriesChartType.Line))
Me.ddlChartType.Items.Add(New ListItem(“Pie”, SeriesChartType.Pie))
Me.ddlChartType.Items.Add(New ListItem(“Point”, SeriesChartType.Point))
Me.ddlChartType.Items.Add(New ListItem(“PointAndFigure”, SeriesChartType.PointAndFigure))
Me.ddlChartType.Items.Add(New ListItem(“Polar”, SeriesChartType.Polar))
Me.ddlChartType.Items.Add(New ListItem(“Pyramid”, SeriesChartType.Pyramid))
Me.ddlChartType.Items.Add(New ListItem(“Radar”, SeriesChartType.Radar))
Me.ddlChartType.Items.Add(New ListItem(“Range”, SeriesChartType.Range))
Me.ddlChartType.Items.Add(New ListItem(“RangeBar”, SeriesChartType.RangeBar))
Me.ddlChartType.Items.Add(New ListItem(“RangeColumn”, SeriesChartType.RangeColumn))
Me.ddlChartType.Items.Add(New ListItem(“Renko”, SeriesChartType.Renko))
Me.ddlChartType.Items.Add(New ListItem(“Spline”, SeriesChartType.Spline))
Me.ddlChartType.Items.Add(New ListItem(“SplineArea”, SeriesChartType.SplineArea))
Me.ddlChartType.Items.Add(New ListItem(“SplineRange”, SeriesChartType.SplineRange))
Me.ddlChartType.Items.Add(New ListItem(“StackedArea”, SeriesChartType.StackedArea))
Me.ddlChartType.Items.Add(New ListItem(“StackedArea100″, SeriesChartType.StackedArea100))
Me.ddlChartType.Items.Add(New ListItem(“StackedBar”, SeriesChartType.StackedBar))
Me.ddlChartType.Items.Add(New ListItem(“StackedColumn”, SeriesChartType.StackedColumn))
Me.ddlChartType.Items.Add(New ListItem(“StackedColumn100″, SeriesChartType.StackedColumn100))
Me.ddlChartType.Items.Add(New ListItem(“StepLine”, SeriesChartType.StepLine))
Me.ddlChartType.Items.Add(New ListItem(“Stock”, SeriesChartType.Stock))
Me.ddlChartType.Items.Add(New ListItem(“ThreeLineBreak”, SeriesChartType.ThreeLineBreak))
Catch ex As Exception
Throw ex
End Try
End Sub

Step 6:- Write code for Bind Graph..
Private Sub pvt_BindChart()
Try
Me.ctrlChart.Legends(0).Title = “Friends Saving”
Dim ArrList As New ArrayList
ArrList.Add(“Rajat”)
ArrList.Add(“Ashish”)
ArrList.Add(“Kapil”)
ArrList.Add(“Ravi”)
ArrList.Add(“Monica”)
ArrList.Add(“Kamlesh”)
ArrList.Add(“seepee”)
Dim dblFrom As Double = 0.5
Dim dblTo As Double = 1.0
For intI As Integer = 0 To ArrList.Count – 1
Dim lbl As New CustomLabel
lbl.FromPosition = dblFrom
lbl.ToPosition = dblTo
lbl.Text = ArrList(intI)
Me.ctrlChart.ChartAreas(0).AxisX.CustomLabels.Add(lbl)
dblFrom = dblTo
dblTo = dblTo + 1
Next
Me.ctrlChart.Series(0).Points.AddXY(1, 5700)
Me.ctrlChart.Series(0).Points.AddXY(2, 12000)
Me.ctrlChart.Series(0).Points.AddXY(3, 4800)
Me.ctrlChart.Series(0).Points.AddXY(4, 7000)
Me.ctrlChart.Series(0).Points.AddXY(5, 6000)
Me.ctrlChart.Series(0).Points.AddXY(6, 3000)
Me.ctrlChart.Series(0).Points.AddXY(7, 9000)
Me.ctrlChart.ChartAreas(0).AxisX.Interval = 1
Me.ctrlChart.ChartAreas(0).AxisX.ArrowStyle = AxisArrowStyle.SharpTriangle
Me.ctrlChart.ChartAreas(0).AxisY.ArrowStyle = AxisArrowStyle.SharpTriangle
Me.ctrlChart.Series(0).ChartType = Me.ddlChartType.SelectedValue

Me.ctrlChart.Series(0).CustomProperties = “DrawingStyle=Cylinder”

Catch ex As Exception
Throw ex
End Try
End Sub ‘pvt_BindChart

Step 7:- Now run the code you will get below output as shown in figures.
Step 8:-you can download code from http://www.indiandotnet.tk
In Next blog we will discuss comparing 2 month salary of these peoples.

I hope it will helpful for you people next time I will come with more description and code till than enjoy coding enjoy graphs.

Thanks
Rajat Jaiswal