locked
Looking for a beginer simple example for Chart! RRS feed

  • Question

  • Dear Charting Gurus,
                                    I have spend two full days in find a good start with MS chart in asp.net. There are thousands of examples, including this forum, however all (at least the one I hit) are confusing. The write assumes that the reader knows what is his (writer's) intention. May be the problem is I am looking for something very simple and basic among the expert. I have chart icon in my toolbox I can drag it my form, the rest I could not figure out.

    Can somebody be please kind enough to point me a very simple example of a line chart with the contents of Default.aspx page and Default.aspx.cs. If some lines have to go somewhere else, please advise with the same. It seems like, it shall help many.

    Thanks,
    Tosho
    Wednesday, January 27, 2010 4:17 PM

Answers

  • asp.net page

    <asp:Chart ID="ChartPieEmpRating" runat="server" BackColor="Black" BackGradientStyle="TopBottom"
                                        BackSecondaryColor="64, 64, 64" BorderColor="26, 59, 105" BorderDashStyle="Solid"
                                        BorderWidth="2" Height="235px" Width="347px" ImageLocation="~/TempImages/ChartPic_#SEQ(300,3)" 
                                        OnClick="ChartPieEmpRating_Click" EnableViewState="true" >
                                        <Titles>
                                            <asp:Title Font="Trebuchet MS, 14.25pt, style=Bold" ForeColor="White" Name="Title1"
                                                ShadowColor="32, 0, 0, 0" ShadowOffset="3" Text="Employee Ratings">
                                            </asp:Title>
                                        </Titles>
                                        <Legends>
                                            <asp:Legend Alignment="Center" BackColor="Transparent" Docking="Bottom" Font="Trebuchet MS, 8.25pt, style=Bold" ForeColor="White"
                                                IsTextAutoFit="False" LegendStyle="Row" Name="Default" TitleForeColor="White">
                                            </asp:Legend>
                                        </Legends>
                                        <BorderSkin SkinStyle="Emboss" />
                                        <Series>
                                            <asp:Series ChartType="Pie" Color="220, 65, 140, 240"
                                                Name="Default"  >
                                            </asp:Series>
                                        </Series>
                                        <ChartAreas>
                                            <asp:ChartArea 
                                                BackColor="Transparent" 
                                                BackSecondaryColor="Transparent" 
                                                BorderColor="64, 64, 64, 64"
                                                BorderWidth="0" 
                                                Name="ChartArea1" 
                                                ShadowColor="Transparent"
                                                >
                                               
                                                <AxisY LineColor="White">
                                                    <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold"  ForeColor="White"/>
                                                    <MajorGrid LineColor="White" />
                                                </AxisY>
                                                <AxisX LineColor="White">
                                                    <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" ForeColor="White" />
                                                    <MajorGrid LineColor="White" />
                                                </AxisX>
                                            </asp:ChartArea>
                                        </ChartAreas>
                                    </asp:Chart>
    codebehind page load method
            double[] chart1yValues = { 25, 80, 10};
            string[] chart1xValues = { "CA", "CE", "ND" }; 
    
            Series series1 = ChartPieEmpRating.Series[0];
            series1["CollectedThresholdUsePercent"] = "true";
            series1.Points.DataBindXY(chart1xValues, chart1yValues);
    
            series1.ChartType = SeriesChartType.Doughnut;
            //series1.Palette = ChartColorPalette.SemiTransparent;
            //series1.Palette = ChartColorPalette.None;
            series1.Label = "#VALX  \n#PERCENT{P2} \n#VAL";
            series1.LegendText = "#VALX";
            series1.LabelForeColor = Color.White;
            series1["PieLabelStyle"] = "Outside";
            series1.BorderColor = Color.FromArgb(alpha, Color.White);
            series1.PostBackValue = "#AXISLABEL;#INDEX";
            series1.LegendPostBackValue = "#AXISLABEL;#INDEX";
            series1.ToolTip = "#VALX  \n#PERCENT{P2} \n#VAL";
            //Sort
            // Enable 3D charts
            ChartPieEmpRating.ChartAreas[0].Area3DStyle.Enable3D = true;
            // Set the Y Angle to 90
            ChartPieEmpRating.ChartAreas[0].Area3DStyle.Rotation = 90;
            // Set the Point Depth to 100
            ChartPieEmpRating.ChartAreas[0].Area3DStyle.PointDepth = 200;
            // Set the Point Gap Width to 0
            ChartPieEmpRating.ChartAreas[0].Area3DStyle.PointGapDepth = 1;
            //Sort the chart Data.
            ChartPieEmpRating.DataManipulator.Sort(PointSortOrder.Descending, "AxisLabel", series1);

    • Marked as answer by Tosho K Thursday, January 28, 2010 12:25 PM
    Wednesday, January 27, 2010 6:27 PM
  • Thanks for posting the code:
    It did not work. Several of the parameters have error (red line underneath). Could you please see if I am missing any "using" directive ?  Or some other common mistake.
    i would really appreciate if somebody could help.

    Thanks,
    Tosho

    Default.aspx
    **********
    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

    <%@ Register assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>

    <!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></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div style="height: 290px">
       
            <asp:Chart ID="ChartPieEmpRating" runat="server" BackColor="Black" BackGradientStyle="TopBottom"
                                        BackSecondaryColor="64, 64, 64" BorderColor="26, 59, 105" BorderDashStyle="Solid"
                                        BorderWidth="2" Height="235px" Width="347px" ImageLocation="~/TempImages/ChartPic_#SEQ(300,3)"
                                        OnClick="ChartPieEmpRating_Click" EnableViewState="true" >
                                        <Titles>
                                            <asp:Title Font="Trebuchet MS, 14.25pt, style=Bold" ForeColor="White" Name="Title1"
                                                ShadowColor="32, 0, 0, 0" ShadowOffset="3" Text="Employee Ratings">
                                            </asp:Title>
                                        </Titles>
                                        <Legends>
                                            <asp:Legend Alignment="Center" BackColor="Transparent" Docking="Bottom" Font="Trebuchet MS, 8.25pt, style=Bold" ForeColor="White"
                                                IsTextAutoFit="False" LegendStyle="Row" Name="Default" TitleForeColor="White">
                                            </asp:Legend>
                                        </Legends>
                                        <BorderSkin SkinStyle="Emboss" />
                                        <Series>
                                            <asp:Series ChartType="Pie" Color="220, 65, 140, 240"
                                                Name="Default"  >
                                            </asp:Series>
                                        </Series>
                                        <ChartAreas>
                                            <asp:ChartArea
                                                BackColor="Transparent"
                                                BackSecondaryColor="Transparent"
                                                BorderColor="64, 64, 64, 64"
                                                BorderWidth="0"
                                                Name="ChartArea1"
                                                ShadowColor="Transparent"
                                                >
                                              
                                                <AxisY LineColor="White">
                                                    <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold"  ForeColor="White"/>
                                                    <MajorGrid LineColor="White" />
                                                </AxisY>
                                                <AxisX LineColor="White">
                                                    <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" ForeColor="White" />
                                                    <MajorGrid LineColor="White" />
                                                </AxisX>
                                            </asp:ChartArea>
                                        </ChartAreas>
                                    </asp:Chart>

       
        </div>
        </form>
    </body>
    </html>

    Default.aspx.cs
    ************
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;

    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            double[] chart1yValues = { 25, 80, 10 };
            string[] chart1xValues = { "CA", "CE", "ND" };

            Series series1 = ChartPieEmpRating.Series[0];
            series1["CollectedThresholdUsePercent"] = "true";
            series1.Points.DataBindXY(chart1xValues, chart1yValues);

            series1.ChartType = SeriesChartType.Doughnut;
            //series1.Palette = ChartColorPalette.SemiTransparent;
            //series1.Palette = ChartColorPalette.None;
            series1.Label = "#VALX  \n#PERCENT{P2} \n#VAL";
            series1.LegendText = "#VALX";
            series1.LabelForeColor = Color.White;
            series1["PieLabelStyle"] = "Outside";
            series1.BorderColor = Color.FromArgb(alpha, Color.White);
            series1.PostBackValue = "#AXISLABEL;#INDEX";
            series1.LegendPostBackValue = "#AXISLABEL;#INDEX";
            series1.ToolTip = "#VALX  \n#PERCENT{P2} \n#VAL";
            //Sort
            // Enable 3D charts
            ChartPieEmpRating.ChartAreas[0].Area3DStyle.Enable3D = true;
            // Set the Y Angle to 90
            ChartPieEmpRating.ChartAreas[0].Area3DStyle.Rotation = 90;
            // Set the Point Depth to 100
            ChartPieEmpRating.ChartAreas[0].Area3DStyle.PointDepth = 200;
            // Set the Point Gap Width to 0
            ChartPieEmpRating.ChartAreas[0].Area3DStyle.PointGapDepth = 1;
            //Sort the chart Data.
            ChartPieEmpRating.DataManipulator.Sort(PointSortOrder.Descending, "AxisLabel", series1);


        }
    }

    • Marked as answer by Tosho K Thursday, January 28, 2010 12:25 PM
    Wednesday, January 27, 2010 7:50 PM
  • Hi K Cavitt,
                   
                     yes, I did. When I run the example from the whole package it runs fine. But when I copy a folder and then run it independently then it gives me different error. is there a quick test to see if my installation of MS chart is fine? 

    Thanks,
    Tosho
    • Marked as answer by Tosho K Thursday, January 28, 2010 12:25 PM
    Wednesday, January 27, 2010 7:53 PM
  • Here is the list of error: (addendum to my previous post)

    Error    2    The type or namespace name 'Series' could not be found (are you missing a using directive or an assembly reference?)   
    Error    3    The name 'SeriesChartType' does not exist in the current context   
    Error    5    The name 'Color' does not exist in the current context   
    Error    6    The name 'alpha' does not exist in the current context   
    Error    7    The name 'Color' does not exist in the current context   
    Error    8    The name 'PointSortOrder' does not exist in the current context   
    Error    9    'ASP.default_aspx' does not contain a definition for 'ChartPieEmpRating_Click'
    and no extension method 'ChartPieEmpRating_Click' accepting a first argument of type 'ASP.default_aspx' could be found (are you missing a using directive or
    an assembly reference?)    C:\Documents and Settings\khokhar\Desktop\chart-example\Default.aspx    15   

    This will take care of 2-8
    using System.Web.UI.DataVisualization.Charting;
    using System.Drawing;
    For Error 9, just remove this in the from the chart contol. OnClick="ChartPieEmpRating_Click"
    • Marked as answer by Tosho K Thursday, January 28, 2010 12:26 PM
    Wednesday, January 27, 2010 8:13 PM

All replies

  • I am also looking for a beginner sample. It would really help if somebody could point to a beginner sample.
    Wednesday, January 27, 2010 6:17 PM
  • Have you downloaded the mscharts samples environment and opened the solution in visual studio? You can see some examples with code in the samples.

    http://code.msdn.microsoft.com/mschart

    KC
    Wednesday, January 27, 2010 6:17 PM
  • asp.net page

    <asp:Chart ID="ChartPieEmpRating" runat="server" BackColor="Black" BackGradientStyle="TopBottom"
                                        BackSecondaryColor="64, 64, 64" BorderColor="26, 59, 105" BorderDashStyle="Solid"
                                        BorderWidth="2" Height="235px" Width="347px" ImageLocation="~/TempImages/ChartPic_#SEQ(300,3)" 
                                        OnClick="ChartPieEmpRating_Click" EnableViewState="true" >
                                        <Titles>
                                            <asp:Title Font="Trebuchet MS, 14.25pt, style=Bold" ForeColor="White" Name="Title1"
                                                ShadowColor="32, 0, 0, 0" ShadowOffset="3" Text="Employee Ratings">
                                            </asp:Title>
                                        </Titles>
                                        <Legends>
                                            <asp:Legend Alignment="Center" BackColor="Transparent" Docking="Bottom" Font="Trebuchet MS, 8.25pt, style=Bold" ForeColor="White"
                                                IsTextAutoFit="False" LegendStyle="Row" Name="Default" TitleForeColor="White">
                                            </asp:Legend>
                                        </Legends>
                                        <BorderSkin SkinStyle="Emboss" />
                                        <Series>
                                            <asp:Series ChartType="Pie" Color="220, 65, 140, 240"
                                                Name="Default"  >
                                            </asp:Series>
                                        </Series>
                                        <ChartAreas>
                                            <asp:ChartArea 
                                                BackColor="Transparent" 
                                                BackSecondaryColor="Transparent" 
                                                BorderColor="64, 64, 64, 64"
                                                BorderWidth="0" 
                                                Name="ChartArea1" 
                                                ShadowColor="Transparent"
                                                >
                                               
                                                <AxisY LineColor="White">
                                                    <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold"  ForeColor="White"/>
                                                    <MajorGrid LineColor="White" />
                                                </AxisY>
                                                <AxisX LineColor="White">
                                                    <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" ForeColor="White" />
                                                    <MajorGrid LineColor="White" />
                                                </AxisX>
                                            </asp:ChartArea>
                                        </ChartAreas>
                                    </asp:Chart>
    codebehind page load method
            double[] chart1yValues = { 25, 80, 10};
            string[] chart1xValues = { "CA", "CE", "ND" }; 
    
            Series series1 = ChartPieEmpRating.Series[0];
            series1["CollectedThresholdUsePercent"] = "true";
            series1.Points.DataBindXY(chart1xValues, chart1yValues);
    
            series1.ChartType = SeriesChartType.Doughnut;
            //series1.Palette = ChartColorPalette.SemiTransparent;
            //series1.Palette = ChartColorPalette.None;
            series1.Label = "#VALX  \n#PERCENT{P2} \n#VAL";
            series1.LegendText = "#VALX";
            series1.LabelForeColor = Color.White;
            series1["PieLabelStyle"] = "Outside";
            series1.BorderColor = Color.FromArgb(alpha, Color.White);
            series1.PostBackValue = "#AXISLABEL;#INDEX";
            series1.LegendPostBackValue = "#AXISLABEL;#INDEX";
            series1.ToolTip = "#VALX  \n#PERCENT{P2} \n#VAL";
            //Sort
            // Enable 3D charts
            ChartPieEmpRating.ChartAreas[0].Area3DStyle.Enable3D = true;
            // Set the Y Angle to 90
            ChartPieEmpRating.ChartAreas[0].Area3DStyle.Rotation = 90;
            // Set the Point Depth to 100
            ChartPieEmpRating.ChartAreas[0].Area3DStyle.PointDepth = 200;
            // Set the Point Gap Width to 0
            ChartPieEmpRating.ChartAreas[0].Area3DStyle.PointGapDepth = 1;
            //Sort the chart Data.
            ChartPieEmpRating.DataManipulator.Sort(PointSortOrder.Descending, "AxisLabel", series1);

    • Marked as answer by Tosho K Thursday, January 28, 2010 12:25 PM
    Wednesday, January 27, 2010 6:27 PM
  • Thanks for posting the code:
    It did not work. Several of the parameters have error (red line underneath). Could you please see if I am missing any "using" directive ?  Or some other common mistake.
    i would really appreciate if somebody could help.

    Thanks,
    Tosho

    Default.aspx
    **********
    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

    <%@ Register assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>

    <!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></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div style="height: 290px">
       
            <asp:Chart ID="ChartPieEmpRating" runat="server" BackColor="Black" BackGradientStyle="TopBottom"
                                        BackSecondaryColor="64, 64, 64" BorderColor="26, 59, 105" BorderDashStyle="Solid"
                                        BorderWidth="2" Height="235px" Width="347px" ImageLocation="~/TempImages/ChartPic_#SEQ(300,3)"
                                        OnClick="ChartPieEmpRating_Click" EnableViewState="true" >
                                        <Titles>
                                            <asp:Title Font="Trebuchet MS, 14.25pt, style=Bold" ForeColor="White" Name="Title1"
                                                ShadowColor="32, 0, 0, 0" ShadowOffset="3" Text="Employee Ratings">
                                            </asp:Title>
                                        </Titles>
                                        <Legends>
                                            <asp:Legend Alignment="Center" BackColor="Transparent" Docking="Bottom" Font="Trebuchet MS, 8.25pt, style=Bold" ForeColor="White"
                                                IsTextAutoFit="False" LegendStyle="Row" Name="Default" TitleForeColor="White">
                                            </asp:Legend>
                                        </Legends>
                                        <BorderSkin SkinStyle="Emboss" />
                                        <Series>
                                            <asp:Series ChartType="Pie" Color="220, 65, 140, 240"
                                                Name="Default"  >
                                            </asp:Series>
                                        </Series>
                                        <ChartAreas>
                                            <asp:ChartArea
                                                BackColor="Transparent"
                                                BackSecondaryColor="Transparent"
                                                BorderColor="64, 64, 64, 64"
                                                BorderWidth="0"
                                                Name="ChartArea1"
                                                ShadowColor="Transparent"
                                                >
                                              
                                                <AxisY LineColor="White">
                                                    <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold"  ForeColor="White"/>
                                                    <MajorGrid LineColor="White" />
                                                </AxisY>
                                                <AxisX LineColor="White">
                                                    <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" ForeColor="White" />
                                                    <MajorGrid LineColor="White" />
                                                </AxisX>
                                            </asp:ChartArea>
                                        </ChartAreas>
                                    </asp:Chart>

       
        </div>
        </form>
    </body>
    </html>

    Default.aspx.cs
    ************
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;

    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            double[] chart1yValues = { 25, 80, 10 };
            string[] chart1xValues = { "CA", "CE", "ND" };

            Series series1 = ChartPieEmpRating.Series[0];
            series1["CollectedThresholdUsePercent"] = "true";
            series1.Points.DataBindXY(chart1xValues, chart1yValues);

            series1.ChartType = SeriesChartType.Doughnut;
            //series1.Palette = ChartColorPalette.SemiTransparent;
            //series1.Palette = ChartColorPalette.None;
            series1.Label = "#VALX  \n#PERCENT{P2} \n#VAL";
            series1.LegendText = "#VALX";
            series1.LabelForeColor = Color.White;
            series1["PieLabelStyle"] = "Outside";
            series1.BorderColor = Color.FromArgb(alpha, Color.White);
            series1.PostBackValue = "#AXISLABEL;#INDEX";
            series1.LegendPostBackValue = "#AXISLABEL;#INDEX";
            series1.ToolTip = "#VALX  \n#PERCENT{P2} \n#VAL";
            //Sort
            // Enable 3D charts
            ChartPieEmpRating.ChartAreas[0].Area3DStyle.Enable3D = true;
            // Set the Y Angle to 90
            ChartPieEmpRating.ChartAreas[0].Area3DStyle.Rotation = 90;
            // Set the Point Depth to 100
            ChartPieEmpRating.ChartAreas[0].Area3DStyle.PointDepth = 200;
            // Set the Point Gap Width to 0
            ChartPieEmpRating.ChartAreas[0].Area3DStyle.PointGapDepth = 1;
            //Sort the chart Data.
            ChartPieEmpRating.DataManipulator.Sort(PointSortOrder.Descending, "AxisLabel", series1);


        }
    }

    • Marked as answer by Tosho K Thursday, January 28, 2010 12:25 PM
    Wednesday, January 27, 2010 7:50 PM
  • Hi K Cavitt,
                   
                     yes, I did. When I run the example from the whole package it runs fine. But when I copy a folder and then run it independently then it gives me different error. is there a quick test to see if my installation of MS chart is fine? 

    Thanks,
    Tosho
    • Marked as answer by Tosho K Thursday, January 28, 2010 12:25 PM
    Wednesday, January 27, 2010 7:53 PM
  • Here is the list of error: (addendum to my previous post)

    Error    2    The type or namespace name 'Series' could not be found (are you missing a using directive or an assembly reference?)   
    Error    3    The name 'SeriesChartType' does not exist in the current context   
    Error    5    The name 'Color' does not exist in the current context   
    Error    6    The name 'alpha' does not exist in the current context   
    Error    7    The name 'Color' does not exist in the current context   
    Error    8    The name 'PointSortOrder' does not exist in the current context   
    Error    9    'ASP.default_aspx' does not contain a definition for 'ChartPieEmpRating_Click'
    and no extension method 'ChartPieEmpRating_Click' accepting a first argument of type 'ASP.default_aspx' could be found (are you missing a using directive or
    an assembly reference?)    C:\Documents and Settings\khokhar\Desktop\chart-example\Default.aspx    15   

    Wednesday, January 27, 2010 7:57 PM
  • Here is the list of error: (addendum to my previous post)

    Error    2    The type or namespace name 'Series' could not be found (are you missing a using directive or an assembly reference?)   
    Error    3    The name 'SeriesChartType' does not exist in the current context   
    Error    5    The name 'Color' does not exist in the current context   
    Error    6    The name 'alpha' does not exist in the current context   
    Error    7    The name 'Color' does not exist in the current context   
    Error    8    The name 'PointSortOrder' does not exist in the current context   
    Error    9    'ASP.default_aspx' does not contain a definition for 'ChartPieEmpRating_Click'
    and no extension method 'ChartPieEmpRating_Click' accepting a first argument of type 'ASP.default_aspx' could be found (are you missing a using directive or
    an assembly reference?)    C:\Documents and Settings\khokhar\Desktop\chart-example\Default.aspx    15   

    This will take care of 2-8
    using System.Web.UI.DataVisualization.Charting;
    using System.Drawing;
    For Error 9, just remove this in the from the chart contol. OnClick="ChartPieEmpRating_Click"
    • Marked as answer by Tosho K Thursday, January 28, 2010 12:26 PM
    Wednesday, January 27, 2010 8:13 PM
  • Thanks a lot. It  gave one error for "alpha". I removed the following line, it worked.
     
    //  series1.BorderColor = Color.FromArgb(alpha, Color.White);

    Any concluding comment? Also, would you please point me to a simple reading with examples.

    Thanks,
    Tosho
    Wednesday, January 27, 2010 10:14 PM