Geek Answers Handbook

Draw bar and line charts in chart control mode in asp.net

<asp:Chart ID="chartSellThru" runat="server" Height="400px" Width="1200px" > <Series> <asp:Series Name="ActualsQTD"> </asp:Series> <asp:Series Name="ForecastQTD"> </asp:Series> <asp:Series Name="QTDRatio" ChartType="Line"> </asp:Series> <asp:Series Name="TargetAttain" ChartType="Line"> </asp:Series> </Series> <ChartAreas> <asp:ChartArea Name="SellThruChartArea"> </asp:ChartArea> </ChartAreas> chartSellThru.Series["ActualsQTD"].XValueMember = "ProductGroup"; chartSellThru.Series["ActualsQTD"].YValueMembers = "ActualsQTD";

I wrote the lines of code above on the default.aspx page, and the last two lines of code are written on the default.aspx.cs page. Data is attached to the chart.

How to write code for a line chart. Verify that the values ​​are bound to the database. How to bind values ​​from sql server to a line chart.

+4
source share
3 answers

I think you need two series to snap to a chart if I post below code

On aspx page

  <asp:Chart ID="ChartDemo" runat="server" Height="400px" Width="1200px"> <Series> <asp:Series Name="ActualsQTD"> </asp:Series> <asp:Series Name="ForecastQTD"> </asp:Series> <asp:Series Name="QTDAttainMent"> </asp:Series> <asp:Series Name="QTDRatio"> </asp:Series> </Series> <ChartAreas> <asp:ChartArea Name="SellThruChartArea"> </asp:ChartArea> </ChartAreas> </asp:Chart>

and on aspx.cs page

  DataSet ds = new DataSet(); ds = SrcObj.GetSellThruChartData(ddlFiscalMonth.SelectedValue.ToString(), ddlReportWeek.SelectedValue.ToString(), ddlArea.SelectedValue.ToString()); //Column Chart ChartDemo.Series["ActualsQTD"].ChartType = SeriesChartType.Column; ChartDemo.Series["ActualsQTD"]["PointWidth"] = "0.9"; ChartDemo.Series["ActualsQTD"]["BarLabelStyle"] = "Center"; ChartDemo.Series["ActualsQTD"]["PixelPointDepth"] = "99"; ChartDemo.Series["ActualsQTD"]["DrawingStyle"] = "Cylinder"; ChartDemo.Series["ForecastQTD"].ChartType = SeriesChartType.Column; ChartDemo.Series["ForecastQTD"]["PointWidth"] = "0.9"; ChartDemo.Series["ForecastQTD"]["BarLabelStyle"] = "Center"; ChartDemo.Series["ForecastQTD"]["PixelPointDepth"] = "99"; ChartDemo.Series["ForecastQTD"]["DrawingStyle"] = "Cylinder"; ChartDemo.ChartAreas["SellThruChartArea"].AxisX.Interval = 1; ChartDemo.ChartAreas["SellThruChartArea"].AxisX.MajorGrid.Enabled = false; //ChartDemo.ChartAreas["SellThruChartArea"].AxisY.MajorGrid.Enabled = false; ChartDemo.Series["ActualsQTD"].XValueMember = "ProductGroup"; ChartDemo.Series["ActualsQTD"].YValueMembers = "ActualsQTD"; ChartDemo.Series["ForecastQTD"].XValueMember = ""; ChartDemo.Series["ForecastQTD"].YValueMembers = "ForecastQTD"; ChartDemo.Series["ActualsQTD"].IsValueShownAsLabel = true; ChartDemo.Series["ForecastQTD"].IsValueShownAsLabel = true; //Line Chart ChartDemo.Series["QTDAttainMent"].ChartType = SeriesChartType.Line; ChartDemo.Series["QTDRatio"].ChartType = SeriesChartType.Line; ChartDemo.Series["QTDAttainMent"].XValueMember = ""; ChartDemo.Series["QTDAttainMent"].YValueMembers = "QTDAttainMent"; ChartDemo.Series["QTDRatio"].XValueMember = ""; ChartDemo.Series["QTDRatio"].YValueMembers = "QTDRatio"; ChartDemo.Series["QTDAttainMent"].IsValueShownAsLabel = true; ChartDemo.Series["QTDRatio"].IsValueShownAsLabel = true; ChartDemo.Series["QTDAttainMent"].BorderWidth = 3; ChartDemo.Series["QTDAttainMent"].Color = Color.Green; ChartDemo.Series["QTDRatio"].BorderWidth = 3; ChartDemo.Series["QTDRatio"].Color = Color.Red; ChartDemo.Series["QTDAttainMent"].YAxisType = AxisType.Secondary; ChartDemo.Series["QTDRatio"].YAxisType= AxisType.Secondary; ChartDemo.DataSource = ds; ChartDemo.DataBind();
+5
source

The code is pretty simple:

 using (SqlConnection conn = new SqlConnection("OMG look a connection string")) { using (SqlCommand cmd = new SqlCommand("SELECT xValue, yValue FROM chartPoints")) { try { conn.Open() using (SqlDataReader rdr = cmd.ExecuteReader()) { chartSellThru.Series["QTDRatio"].Points.DataBindXY(rdr, "xValue", rdr, "yValue"); } } catch(Exception ex) { //handle errors } } }

You can also set this command as SelectCommand for the SqlDataSource and bind it to the chart, and then select points using XValueMember and YValueMembers in the same way as you did before

 <asp:SqlDataSource runat="server" ID="dsLinePoints" ConnectionString="OMG look a connection string" SelectCommand="SELECT xValue, yValue FROM chartPoints" /> <asp:Chart ID="chartSellThru" runat="server" Height="400px" Width="1200px" DataSourceID="dsLinePoints"> <Series> <asp:Series Name="ActualsQTD"> </asp:Series> <asp:Series Name="ForecastQTD"> </asp:Series> <asp:Series Name="QTDRatio" ChartType="Line"> </asp:Series> <asp:Series Name="TargetAttain" ChartType="Line"> </asp:Series> </Series> <ChartAreas> <asp:ChartArea Name="SellThruChartArea"> </asp:ChartArea> </ChartAreas> </asp:Chart> chartSellThru.Series["QTDRatio"].XValueMember = "xValue"; chartSellThru.Series["QTDRatio"].YValueMembers = "yValue";
0
source

You can make it as simple as possible, and then move on to a few episodes.

Page by code:

 Values[]={10,20,30,40,50} weekworkline1.Series.Add(new AjaxControlToolkit.LineChartSeries { Data = values, LineColor = "#2fd1f9", Name = "Working Hours" });

Aspx Code:

 <asp:LineChart ID="weekworkline1" runat="server" ChartHeight="300" ChartWidth="900" ChartType="Stacked"></asp:LineChart>
0
source

More articles:


All Articles