Populate Line Chart with Database in ASP.Net using C# and VB.Net

Last Reply 3 months ago By dharmendr

Posted 3 months ago

Hi,

I am using asp.net control i want display line chart value below is i am using that code,

Please provide solution

        <asp:Chart ID="Chart1"   CssClass="rcorners2" runat="server" Width="1100px" Height="500px" BackColor="#2f4f52" >
            <Series>
                 <asp:Series Name="Series1" ChartArea="ChartArea1" XValueType="String" BorderWidth="2" Enabled="false"  
                                    BackGradientStyle="HorizontalCenter" BackSecondaryColor="LightSalmon" Color="Brown"
                                    IsXValueIndexed="True"  Legend="Legend1" LabelToolTip="#VALX : #VALY" LabelForeColor="#EED9C4"
                                    LegendText="OPV1" LabelBorderColor="Brown"  Font="Calibri, 8pt, style=bold"
                                    MarkerSize="5" MarkerStyle="Circle" ChartType="Line"  CustomProperties="LabelStyle=Bottom">
                                   
                                </asp:Series>

                <asp:Series Name="Series2" ChartArea="ChartArea1" ChartType="Line" XValueType="String" Enabled="false" 
                    BorderWidth="2" Color="Blue" IsXValueIndexed="True" Legend="Legend1" LabelToolTip="#VALX : #VALY"
                    LabelForeColor="#EED9C4" LegendText="OPV2" Font="Calibri, 8pt, style=Bold"
                    MarkerSize="5" MarkerStyle="Circle"  >
                    
                    <Points>
                        <asp:DataPoint MarkerStyle="None" YValues="0" BackGradientStyle="None" BorderWidth="4"
                            CustomProperties="LabelStyle=Top" IsEmpty="True" XValue="2" />
                    </Points>
                    <EmptyPointStyle IsValueShownAsLabel="true" />
                    <SmartLabelStyle CalloutLineAnchorCapStyle="Round" />
                </asp:Series>
                <asp:Series ChartArea="ChartArea1" ChartType="Line" Name="Series3" XValueType="String"  Enabled="false"
                    BorderWidth="2" Color="Green" IsXValueIndexed="True" Legend="Legend1" LabelToolTip="#VALX : #VALY"
                    LabelForeColor="white" LegendText="OPV3" LabelBackColor="Green" Font="Calibri, 8pt, style=Bold"
                    MarkerSize="5" MarkerStyle="Circle">
                    <Points>
                        <asp:DataPoint MarkerStyle="None" YValues="0" BackGradientStyle="None" BorderWidth="4"
                            CustomProperties="LabelStyle=Top" IsEmpty="True" XValue="2" />
                    </Points>
                    <EmptyPointStyle />
                    <SmartLabelStyle CalloutLineAnchorCapStyle="Round" />
                </asp:Series>
                <asp:Series ChartArea="ChartArea1" ChartType="Line" Name="Series4" XValueType="String"  Enabled="false"
                    BorderWidth="2" Color="#cc33ff" IsXValueIndexed="True" Legend="Legend1" LabelToolTip="#VALX : #VALY"
                    LabelForeColor="white" LabelBackColor="#cc33ff" LegendText="OPV4" Font="Calibri, 8pt, style=Bold"
                    MarkerSize="5" MarkerStyle="Circle">
                    <Points>
                        <asp:DataPoint MarkerStyle="None" YValues="0" BackGradientStyle="None" BorderWidth="4"
                            CustomProperties="LabelStyle=Top" IsEmpty="True" XValue="2" />
                    </Points>
                    <EmptyPointStyle />
                    <SmartLabelStyle CalloutLineAnchorCapStyle="Round" />
                </asp:Series>
                <asp:Series ChartArea="ChartArea1" ChartType="Line" Name="Series5" XValueType="String"  Enabled="false"
                    BorderWidth="2" Color="Brown" IsXValueIndexed="True" Legend="Legend1" LabelToolTip="#VALX : #VALY"
                    LabelForeColor="white" LabelBackColor="Brown" LegendText="Actual OPV1" Font="Calibri, 8pt, style=Bold"
                    MarkerSize="5" MarkerStyle="Circle">
                    <Points>
                        <asp:DataPoint MarkerStyle="None" YValues="0" BackGradientStyle="None" BorderWidth="4"
                            CustomProperties="LabelStyle=Top" IsEmpty="True" XValue="2" />
                    </Points>
                    <EmptyPointStyle />
                    <SmartLabelStyle CalloutLineAnchorCapStyle="Round" />
                </asp:Series>
                <asp:Series Name="Series6" ChartArea="ChartArea1" ChartType="Line" XValueType="String" Enabled="false" 
                    BorderWidth="2" Color="Blue" IsXValueIndexed="True" Legend="Legend1" LabelToolTip="#VALX : #VALY"
                    LabelForeColor="White" LegendText="Actual OPV2" LabelBackColor="Blue" Font="Calibri, 8pt, style=Bold"
                    MarkerSize="5" MarkerStyle="Circle">
                    <Points>
                        <asp:DataPoint MarkerStyle="None" YValues="0" BackGradientStyle="None" BorderWidth="4"
                            CustomProperties="LabelStyle=Top" IsEmpty="True" XValue="2" />
                    </Points>
                    <EmptyPointStyle IsValueShownAsLabel="true" />
                    <SmartLabelStyle CalloutLineAnchorCapStyle="Round" />
                </asp:Series>
               <asp:Series ChartArea="ChartArea1" ChartType="Line" Name="Series7" XValueType="String"  Enabled="false"
                    BorderWidth="2" Color="Green" IsXValueIndexed="True" Legend="Legend1" LabelToolTip="#VALX : #VALY"
                    LabelForeColor="white" LegendText="Actual OPV3" LabelBackColor="Green" Font="Calibri, 8pt, style=Bold"
                    MarkerSize="5" MarkerStyle="Circle">
                    <Points>
                        <asp:DataPoint MarkerStyle="None" YValues="0" BackGradientStyle="None" BorderWidth="4"
                            CustomProperties="LabelStyle=Top" IsEmpty="True" XValue="2" />
                    </Points>
                    <EmptyPointStyle />
                    <SmartLabelStyle CalloutLineAnchorCapStyle="Round" />
                </asp:Series>
                  <asp:Series ChartArea="ChartArea1" ChartType="Line" Name="Series8" XValueType="String"  Enabled="false"
                    BorderWidth="2" Color="#cc33ff" IsXValueIndexed="True" Legend="Legend1" LabelToolTip="#VALX : #VALY"
                    LabelForeColor="white" LabelBackColor="#cc33ff" LegendText="Actual OPV4" Font="Calibri, 8pt, style=Bold"
                    MarkerSize="5" MarkerStyle="Circle">
                    <Points>
                        <asp:DataPoint MarkerStyle="None" YValues="0" BackGradientStyle="None" BorderWidth="4"
                            CustomProperties="LabelStyle=Top" IsEmpty="True" XValue="2" />
                    </Points>
                    <EmptyPointStyle />
                    <SmartLabelStyle CalloutLineAnchorCapStyle="Round" />
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1" AlignmentOrientation="All" BackColor="#ccffcc" BackGradientStyle="DiagonalRight">
                    <AxisY ArrowStyle="None" InterlacedColor="White" IntervalType="Number" TextOrientation="Rotated270"
                        Title="Progress in %" Maximum="110" TitleFont="Calibri, 14.25pt, style=Bold" TitleForeColor="White"
                        MaximumAutoSize="100">
                        <MajorGrid IntervalOffset="Auto" LineDashStyle="Solid" IntervalOffsetType="Number"
                            IntervalType="Number" Enabled="true" LineColor="LightGray" Interval="10"  />
                        <MajorTickMark Interval="50" />
                        <StripLines>
                            <asp:StripLine BackColor="192, 255, 255" />
                        </StripLines>
                        <LabelStyle Font="Calibri, 10pt, style=Bold" ForeColor="White" />
                        <ScaleBreakStyle Spacing="2.5" StartFromZero="No" />
                    </AxisY>
                    <AxisX Crossing="Min" Enabled="True" Interval="1" IntervalAutoMode="VariableCount"
                        IsLabelAutoFit="False" IsMarksNextToAxis="False" MaximumAutoSize="100" Title="Months"
                        TitleFont="Calibri, 14.25pt, style=Bold" TitleForeColor="White">
                        <StripLines>
                            <asp:StripLine />
                        </StripLines>
                        <LabelStyle Angle="-30" Font="Calibri, 10pt, style=Bold" ForeColor="White"
                            Interval="1" IntervalOffset="Auto" IntervalOffsetType="Auto" IntervalType="Number" />
                        <ScaleBreakStyle BreakLineStyle="Wave" Enabled="True" Spacing="2.5" StartFromZero="Yes" />
                        <ScaleView Position="1" Size="NotSet" />
                       <MajorGrid IntervalOffset="Auto" LineDashStyle="Solid" IntervalOffsetType="Number"
                            IntervalType="Number" Enabled="true" LineColor="LightGray" />
                    </AxisX>
                </asp:ChartArea>
            </ChartAreas>
            <Titles>
                <asp:Title Text=""
                    Docking="Top" Alignment="TopCenter" Font="Calibri, 14.5pt, style=Bold" ForeColor="white"
                    Name="Title1">
                </asp:Title>
            </Titles>
            <Legends >
            <asp:Legend  Alignment="Near"  Docking="Bottom" Enabled="true"></asp:Legend>
            </Legends>
        </asp:Chart>

 

        SqlCommand cmd = new SqlCommand(sSQL, conn);
        //  Response.Write(cmd.CommandText);
        SqlDataAdapter ad = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        ad.Fill(ds);
        if(ds.Tables[0].Rows.Count!=0)
        {        
        
        }
        Chart1.DataSource = ds;      
        conn.Close();
        int rowcnt = Convert.ToInt16(ds.Tables[0].Rows.Count);

         int Count = 0;
        foreach (ListItem li in chkProj.Items)
        {
            if (li.Selected)
            {

                strbpcheck += "" + li.Value.Trim() + ",";

                strbpdsc += "" + li.Text.Trim() + ",";
                Count = +1;
                //Title1.Text = "Construction graph (Baseline 8 lakh Mhrs) - Planned Vs Actual -  " + strbpdsc.TrimEnd(',');
            }
        }  foreach (System.Web.UI.DataVisualization.Charting.Series series in Chart1.Series)
        {

            int i = 0;
            foreach (System.Web.UI.DataVisualization.Charting.DataPoint point in series.Points)
            {  
                if (point.YValues.Length > 0 && (double)point.YValues.GetValue(0) == 0)
                {

                    point.LegendText = point.AxisLabel;//In case you have legend
                    point.IsValueShownAsLabel = false;
                    point.IsEmpty = true;
                    Chart1.Series["Series1"].Points[i].BorderDashStyle = ChartDashStyle.Dot;

                    point.ToolTip = point.Label;

                    point.LegendText = point.AxisLabel;//In case you have legend
                    point.AxisLabel = string.Empty;
                    point.Label = string.Empty;
                    point.Color = System.Drawing.Color.Transparent;
                    point.IsValueShownAsLabel = false;

                    Chart1.Series[0].Points[i].BorderDashStyle = ChartDashStyle.Dot;
                    Chart1.Series[1].Points[i].BorderDashStyle = ChartDashStyle.Dot;
                    Chart1.Series[2].Points[i].BorderDashStyle = ChartDashStyle.Dot;
                    Chart1.Series[3].Points[i].BorderDashStyle = ChartDashStyle.Dot;

                    //Chart1.Series[4].Points[i].BorderDashStyle = ChartDashStyle.Dash;
                    //Chart1.Series[5].Points[i].BorderDashStyle = ChartDashStyle.Dash;
                    //Chart1.Series[6].Points[i].BorderDashStyle = ChartDashStyle.Dash;
                    //Chart1.Series[7].Points[i].BorderDashStyle = ChartDashStyle.Dash;

                  //  Chart1.Series[0].ToolTip = "Data Point #VALX{G}: #VALY{G}";

                    point.ToolTip = "Data Point #VALX{G}: #VALY{G}";                  
                  
                }
                else
                {
                    Chart1.Series[0].Points[i].BorderDashStyle = ChartDashStyle.Dot;
                    Chart1.Series[1].Points[i].BorderDashStyle = ChartDashStyle.Dot;
                    Chart1.Series[2].Points[i].BorderDashStyle = ChartDashStyle.Dot;
                    Chart1.Series[3].Points[i].BorderDashStyle = ChartDashStyle.Dot;
                  
                    series.MapAreaAttributes = "onmouseover=showTooltip('#VALY');";

                    point.ToolTip = "Data Point #VALX{G}: #VALY{G}";


                  //  point.IsValueShownAsLabel = true;
                    

                }
                i = i + 1;
            }           
        }
     
        Chart1.Series[0].LegendText = "OPV1-Planned";
        Chart1.Series[4].LegendText = "OPV1-Actual";
        Chart1.Series[1].LegendText = "OPV2-Planned";
        Chart1.Series[5].LegendText = "OPV2-Actual";
        Chart1.Series[2].LegendText = "OPV3-Planned";
        Chart1.Series[6].LegendText = "OPV3-Actual";
        Chart1.Series[3].LegendText = "OPV4-Planned";
        Chart1.Series[7].LegendText = "OPV4-Actual";
        Chart1.Series[0].BorderDashStyle = ChartDashStyle.Dot;
        Chart1.Series[1].BorderDashStyle = ChartDashStyle.Dot;
        Chart1.Series[2].BorderDashStyle = ChartDashStyle.Dot;
        Chart1.Series[3].BorderDashStyle = ChartDashStyle.Dot;
I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html