Graph Creator developed by ASP.Net Chart Object

ASP.Net chart object is one of the most impressive element of the .Net Framework;it can easily be used to produce any graph that we use everyday in our lives. In this tutorial, ASP.Net chart object is used to produce a graph sketching application.

Graph Creator

Graph Creator uses AJAX in communicating with the server. That means, it will respond to your choice in a split-second, rather than keep you waiting for a full page refreshing. When you select the graph, you will see the amazing effect - and the pleasant user experience - when you play with various graphs in the programme.

Please choose a curve and then click the button.

 











 

The .aspx page for the above is as follows:

<asp:Chart ID="Chart1" Height="400px" Width="400px" runat="server" BorderlineColor="Beige" BorderSkin-BackColor="Beige" BackColor="lemonchiffon" CssClass="imgforcontent" ImageStorageMode="UseImageLocation" ImageLocation="~/aspchart/Sketch" ImageType="Png">
<!--Note the ImageLocation property and ImageStorageMode property of the Chart Object-->
<Series>
<asp:Series Name="Series1">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</ChartAreas>
<BorderSkin SkinStyle ="Emboss" />
</asp:Chart>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatColumns="1"
RepeatDirection="Vertical" Width="160px" BorderColor="AliceBlue"
BorderStyle="Solid" BorderWidth="5px" Font-Bold="True" Font-Size="small"
ForeColor="ButtonShadow" Height="100px">
<asp:ListItem>Straight Line</asp:ListItem>
<asp:ListItem>Quadratic</asp:ListItem>
<asp:ListItem>Cubic</asp:ListItem>
<asp:ListItem>Reciprocal</asp:ListItem>
<asp:ListItem>The Exponential</asp:ListItem>
<asp:ListItem>Circle</asp:ListItem>
<asp:ListItem>Natural Log</asp:ListItem>
<asp:ListItem>Sine Curve</asp:ListItem>
<asp:ListItem>Cosine Curve</asp:ListItem>
<asp:ListItem>Tan Curve</asp:ListItem>
</asp:RadioButtonList>
<br />
<asp:Button ID="btnBasicGraphs" runat="server" Text="Click to Sketch"
onclick="btnBasicGraphs_Click" />

The code for .aspx.cs is is as follows:

Series series = new Series("Spline");
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
MultiView1.ActiveViewIndex = 0;
Sketch();
}
}
protected void btnBasicGraphs_Click(object sender, EventArgs e)
{
Chart1.Series.Clear();
Transform();
series.ChartType = SeriesChartType.Spline;
series.BorderWidth = 2;
series.ShadowOffset = 1;
Chart1.ChartAreas[0].BackColor = System.Drawing.Color.LemonChiffon;
Chart1.ChartAreas[0].AxisX.Minimum = -5;
Chart1.ChartAreas[0].AxisX.Maximum = 5;
switch (RadioButtonList1.SelectedIndex)
{
case 0:
DrwStLn();
break;
case 1:
DrwQdCrv();
break;
case 2:
DrwCbcCrv();
break;
case 3:
DrwRcpCrv();
break;
case 4:
DrwExpCrv();
break;
case 5:
DrwCrc();
break;
case 6:
DrwLgCrv();
break;
case 7:
DrwSnCrv();
break;
case 8:
DrwCsCrv();
break;
default:
DrwTnCrv();
break;
}
}
//for straight line
protected void DrwStLn()
{
Chart1.Series.Clear();
for (double i = -5; i <= 5; i += 1)
{
series.Points.AddXY(i, 2 * i - 3);
}
// Add series into the chart's series collection
Chart1.ChartAreas[0].AxisY.Minimum = -10;
Chart1.ChartAreas[0].AxisY.Maximum = 10;
Chart1.ChartAreas[0].AxisX.MajorGrid.Interval = 1;
Chart1.ChartAreas[0].AxisX.MajorTickMark.Interval = 1;
Chart1.ChartAreas[0].AxisY.MajorGrid.Interval = 2;
Chart1.ChartAreas[0].AxisY.MajorTickMark.Interval = 2;
Chart1.ChartAreas[0].AxisY.LineColor = System.Drawing.Color.Red;
Chart1.ChartAreas[0].AxisX.LineColor = System.Drawing.Color.Red;
Chart1.Series.Add(series);
}
//for quadratic curve
protected void DrwQdCrv()
{
Chart1.Series.Clear();
for (double i = -4; i <= 4; i += 1)
{
series.Points.AddXY(i, Math.Pow(i, 2));
}
// Add series into the chart's series collection
Chart1.ChartAreas[0].AxisY.Minimum = -10;
Chart1.ChartAreas[0].AxisY.Maximum = 10;
Chart1.ChartAreas[0].AxisX.MajorGrid.Interval = 2;
Chart1.ChartAreas[0].AxisX.MajorTickMark.Interval = 2;
Chart1.ChartAreas[0].AxisY.MajorGrid.Interval = 4;
Chart1.ChartAreas[0].AxisY.MajorTickMark.Interval = 4;
Chart1.ChartAreas[0].AxisY.LineColor = System.Drawing.Color.Red;
Chart1.ChartAreas[0].AxisX.LineColor = System.Drawing.Color.Red;
Chart1.Series.Add(series);
//for a cubic graph
}
protected void DrwCbcCrv()
{
Chart1.Series.Clear();
for (double i = -3; i <= 3; i += 1)
{
series.Points.AddXY(i, Math.Pow(i, 3));
}
// Add series into the chart's series collection
Chart1.ChartAreas[0].AxisY.Minimum = -20;
Chart1.ChartAreas[0].AxisY.Maximum = 20;
Chart1.ChartAreas[0].AxisX.MajorGrid.Interval = 1;
Chart1.ChartAreas[0].AxisX.MajorTickMark.Interval = 1;
Chart1.ChartAreas[0].AxisY.MajorGrid.Interval = 2;
Chart1.ChartAreas[0].AxisY.MajorTickMark.Interval = 2;
Chart1.ChartAreas[0].AxisY.LineColor = System.Drawing.Color.Red;
Chart1.ChartAreas[0].AxisX.LineColor = System.Drawing.Color.Red;
Chart1.Series.Add(series);
}
//for reciprocral graph
protected void DrwRcpCrv()
{
Chart1.Series.Clear();
for (double i = -10; i <= 10; i++)
{
Chart1.ChartAreas[0].AxisY.Minimum = -1;
Chart1.ChartAreas[0].AxisY.Maximum = 1;
if (!(i == 0))
{
series.Points.AddXY(i, 1 / i);
}
}
// Add series into the chart's series collection
series.ChartType = SeriesChartType.FastPoint;
Chart1.ChartAreas[0].AxisX.Minimum = -10;
Chart1.ChartAreas[0].AxisX.Maximum = 10;
Chart1.ChartAreas[0].AxisX.MajorGrid.Interval = 2;
Chart1.ChartAreas[0].AxisX.MajorTickMark.Interval = 1;
Chart1.ChartAreas[0].AxisY.Minimum = -2;
Chart1.ChartAreas[0].AxisY.Maximum = 2;
Chart1.ChartAreas[0].AxisY.MajorGrid.Interval = 0.2;
Chart1.ChartAreas[0].AxisY.MajorTickMark.Interval = 0.2;
Chart1.ChartAreas[0].AxisY.LineColor = System.Drawing.Color.Red;
Chart1.ChartAreas[0].AxisX.LineColor = System.Drawing.Color.Red;
Chart1.Series.Add(series);
}
//for exponential function
protected void DrwExpCrv()
{
Chart1.Series.Clear();
for (double i = -6; i <= 6; i += 1)
{
series.Points.AddXY(i, Math.Exp(i));
}
// Add series into the chart's series collection
series.ChartType = SeriesChartType.Spline;
Chart1.ChartAreas[0].AxisX.Minimum = -6;
Chart1.ChartAreas[0].AxisX.Maximum = 6;
Chart1.ChartAreas[0].AxisX.MajorGrid.Interval = 2;
Chart1.ChartAreas[0].AxisX.MajorTickMark.Interval = 2;
Chart1.ChartAreas[0].AxisY.Minimum = -10;
Chart1.ChartAreas[0].AxisY.Maximum = 10;
Chart1.ChartAreas[0].AxisY.MajorGrid.Interval = 2;
Chart1.ChartAreas[0].AxisY.MajorTickMark.Interval = 2;
Chart1.ChartAreas[0].AxisY.LineColor = System.Drawing.Color.Red;
Chart1.ChartAreas[0].AxisX.LineColor = System.Drawing.Color.Red;
Chart1.Series.Add(series);
}
//for a circle
protected void DrwCrc()
{
Chart1.Series.Clear();
for (double i = 0; i <= 2 * Math.PI; i += 0.01)
{
series.Points.AddXY(4 * Math.Cos(i), 4 * Math.Sin(i));
//series.Points.AddXY(i, -Math.Sqrt(25 - i ^ 2))
}
// Add series into the chart's series collection
series.ChartType = SeriesChartType.FastPoint;
Chart1.ChartAreas[0].AxisX.Minimum = -6;
Chart1.ChartAreas[0].AxisX.Maximum = 6;
Chart1.ChartAreas[0].AxisX.MajorGrid.Interval = 1;
Chart1.ChartAreas[0].AxisX.MajorTickMark.Interval = 1;
Chart1.ChartAreas[0].AxisY.Minimum = -6;
Chart1.ChartAreas[0].AxisY.Maximum = 6;
Chart1.ChartAreas[0].AxisY.MajorGrid.Interval = 1;
Chart1.ChartAreas[0].AxisY.MajorTickMark.Interval = 1;
Chart1.ChartAreas[0].AxisY.LineColor = System.Drawing.Color.Red;
Chart1.ChartAreas[0].AxisX.LineColor = System.Drawing.Color.Red;
Chart1.Series.Add(series);
}
//natural log function
protected void DrwLgCrv()
{
Chart1.Series.Clear();
for (double i = 0; i <= 4; i += 0.01)
{
if (i > 0)
series.Points.AddXY(i, Math.Log(i));
//series.Points.AddXY(i, -Math.Sqrt(25 - i ^ 2))
}
// Add series into the chart's series collection
series.ChartType = SeriesChartType.Spline;
Chart1.ChartAreas[0].AxisX.Minimum = -6;
Chart1.ChartAreas[0].AxisX.Maximum = 6;
Chart1.ChartAreas[0].AxisX.MajorGrid.Interval = 2;
Chart1.ChartAreas[0].AxisX.MajorTickMark.Interval = 2;
Chart1.ChartAreas[0].AxisY.Minimum = -10;
Chart1.ChartAreas[0].AxisY.Maximum = 10;
Chart1.ChartAreas[0].AxisY.MajorGrid.Interval = 2;
Chart1.ChartAreas[0].AxisY.MajorTickMark.Interval = 2;
Chart1.ChartAreas[0].AxisY.LineColor = System.Drawing.Color.Red;
Chart1.ChartAreas[0].AxisX.LineColor = System.Drawing.Color.Red;
Chart1.Series.Add(series);
}
//for sine curve
protected void DrwSnCrv()
{
Chart1.Series.Clear();
for (double i = 0; i <= 360; i += 45)
{
series.Points.AddXY(i, Math.Sin(i * Math.PI / 180));
//series.Points.AddXY(i, -Math.Sqrt(25 - i ^ 2))
}
Chart1.ChartAreas[0].AxisY.Minimum = -2;
Chart1.ChartAreas[0].AxisY.Maximum = 2;
Chart1.ChartAreas[0].AxisX.Minimum = 0;
Chart1.ChartAreas[0].AxisX.Maximum = 360;
Chart1.ChartAreas[0].AxisX.MajorGrid.Interval = 90;
Chart1.ChartAreas[0].AxisX.MajorTickMark.Interval = 90;
Chart1.ChartAreas[0].AxisY.LineColor = System.Drawing.Color.Red;
Chart1.ChartAreas[0].AxisX.LineColor = System.Drawing.Color.Red;
// Add series into the chart's series collection
Chart1.Series.Add(series);
}
//for cos curve
protected void DrwCsCrv()
{
Chart1.Series.Clear();
for (double i = 0; i <= 360; i += 45)
{
series.Points.AddXY(i, Math.Cos(i * Math.PI / 180));
//series.Points.AddXY(i, -Math.Sqrt(25 - i ^ 2))
}
Chart1.ChartAreas[0].AxisY.Minimum = -2;
Chart1.ChartAreas[0].AxisY.Maximum = 2;
Chart1.ChartAreas[0].AxisX.Minimum = 0;
Chart1.ChartAreas[0].AxisX.Maximum = 360;
Chart1.ChartAreas[0].AxisX.MajorGrid.Interval = 90;
Chart1.ChartAreas[0].AxisX.MajorTickMark.Interval = 90;
Chart1.ChartAreas[0].AxisY.LineColor = System.Drawing.Color.Red;
Chart1.ChartAreas[0].AxisX.LineColor = System.Drawing.Color.Red;
// Add series into the chart's series collection
Chart1.Series.Add(series);
}
//for tan curve
protected void DrwTnCrv()
{
Chart1.Series.Clear();
for (double i = 0; i <= 360; i += 1)
{
if (!(i == 90) && !(i == 270))
{
series.Points.AddXY(i, Math.Tan(i * Math.PI / 180));
}
//series.Points.AddXY(i, -Math.Sqrt(25 - i ^ 2))
}
// Add series into the chart's series collection
series.ChartType = SeriesChartType.FastPoint;
Chart1.ChartAreas[0].AxisY.Minimum = -15;
Chart1.ChartAreas[0].AxisY.Maximum = 15;
Chart1.ChartAreas[0].AxisX.Minimum = 0;
Chart1.ChartAreas[0].AxisX.Maximum = 360;
Chart1.ChartAreas[0].AxisX.MajorGrid.Interval = 90;
Chart1.ChartAreas[0].AxisX.MajorTickMark.Interval = 90;
Chart1.ChartAreas[0].AxisY.LineColor = System.Drawing.Color.Red;
Chart1.ChartAreas[0].AxisX.LineColor = System.Drawing.Color.Red;
Chart1.Series.Add(series);
}
// sketch a parabola as the default graph
protected void Sketch()
{
Chart1.Series.Clear();
Series series = new Series("Spline");
series.ChartType = SeriesChartType.Spline;
series.BorderWidth = 2;
series.ShadowOffset = 1;
Chart1.ChartAreas[0].BackColor = System.Drawing.Color.LemonChiffon;
Chart1.ChartAreas[0].AxisY.Minimum = -10;
Chart1.ChartAreas[0].AxisY.Maximum = 10;
Chart1.ChartAreas[0].AxisX.Minimum = -5;
Chart1.ChartAreas[0].AxisX.Maximum = 5;
//Populate new series with data
for (double i = -5; i <= 5; i++)
{
series.Points.AddXY(i, Math.Pow(i, 2));
}
//Add series into the chart's series collection
Chart1.Series.Add(series);
}

 

 

 

 

 

Resources at Fingertips

There is a significant selection of tutorials here, covering ASP.Net, HTML5, CSS3 and JavaScript. They are categorized clearly for you to access them easily on any device - desktops/laptops, smartphones and laptops.
There are quite a few of them on HTML5 Canvas and CSS3. In addition, there are tutorials on JavaScript and ASP.Net too.

Email: 

Stand Out - from the crowd

students

"There's no such thing as a free lunch."

The best things in nature are free with no strings attached - fresh air, breathtakingly warm sunshine, scene of meadow on the horizon...

Vivax Solutions, while mimicking nature, offers a huge set of tutorials along with interactive tools for free.

Please use them and excel in the sphere of science education.

Everything is free; not even registration is required.

 

 

Recommended Reading

 

The best book to master HTML5 canvas animations. The author tells you how to manipulate the canvas element with JavaScript in a progressive way - starting from the easier to harder worked examples. It is ideal for anyone who wants to be a game developer in HTML5.

Advertisements

Advertisement