ASP.Net Webform line chart shows as blank image

Question

I using line chart to show number of jobs people have applied for date wise.

I am using line chart to show it

  <asp:Chart ID="chrtDateWise" runat="server" Width="500px">
        <Series>
            <asp:Series ChartType="Line" Name="Series1">
            </asp:Series>
        </Series>
        <ChartAreas>
            <asp:ChartArea Name="ChartArea1">
            </asp:ChartArea>
        </ChartAreas>
    </asp:Chart>

Code Behind

 protected void ShowDateWise()
    {
        String strSql = string.Empty;
        strSql = "SELECT COUNT(ApplicationDate) AS Total, ApplicationDate FROM [Jobs] GROUP BY ApplicationDate, ApplicationDate order by ApplicationDate ";

        DataSet ds = DataProvider.Connect_Select(strSql);

        DataTable dt = ds.Tables[0];
        chrtDateWise.DataSource = dt;
        chrtDateWise.Series["Series1"].XValueMember = "ApplicationDate";
        chrtDateWise.Series["Series1"].YValueMembers = "Total";

        //chrtDateWise.Series["Series1"]["PieLabelStyle"] = "Outside";
        chrtDateWise.Series["Series1"].ToolTip = "#VALY";
        chrtDateWise.Series["Series1"].Label = "#VALX";
        chrtDateWise.DataBind();

    }

UPDATE:

I changed my code to below

  <asp:Chart ID="chrtDateWise" runat="server" Width="600px">
        <Series>
            <asp:Series ChartType="Line" Name="Series1"> </asp:Series>
        </Series>
        <ChartAreas>
             <asp:ChartArea Name="chrtAreaSupporters">
                    <AxisY LineColor="White">
                        <LabelStyle Font="Trebuchet MS, 8.25pt" />
                        <MajorGrid LineColor="#e6e6e6" />
                        <MinorGrid Enabled="false" LineColor="#e6e6e6" />
                    </AxisY>
                    <AxisX LineColor="White">
                        <LabelStyle Font="Trebuchet MS, 8.25pt" />
                        <MajorGrid LineColor="#e6e6e6" />
                        <MinorGrid Enabled="false" LineColor="#e6e6e6" />
                    </AxisX>
                </asp:ChartArea>
        </ChartAreas>
    </asp:Chart>



chrtDateWise.Series["Series1"].ChartType = SeriesChartType.Line;

    chrtDateWise.Series["Series1"].XValueMember = "Total";
    chrtDateWise.Series["Series1"].YValueMembers = "ApplicationDate";


    chrtDateWise.Series["Series1"].IsValueShownAsLabel = true;


    chrtDateWise.Series["Series1"].BorderWidth = 3;
    chrtDateWise.Series["Series1"].Color = System.Drawing.Color.Green;

    chrtDateWise.Series["Series1"].YAxisType = AxisType.Secondary;

This is not working either...

I am not sure what is wrong with the code as query gets data from the table and besides this i am able to display pie charts.

I think i have messed up chart properties.

Answer 1

With such a simple query you could do all in the code below:

<asp:Chart ID="Chart1" runat="server" DataSourceID="SqlDataSource1">
<Series>
    <asp:Series Name="Series1" ChartType="Line" XValueMember="Total" 
        YValueMembers="ApplicationDate">
    </asp:Series>
</Series>
<ChartAreas>
    <asp:ChartArea Name="ChartArea1">
    </asp:ChartArea>
</ChartAreas>
</asp:Chart>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="yourDbConnectionString" 
    SelectCommand="SELECT COUNT(ApplicationDate) AS Total, ApplicationDate FROM [Jobs] GROUP BY ApplicationDate, ApplicationDate order by ApplicationDate">
</asp:SqlDataSource>

The ConnectionString is a property in the web-config, and there is a wizard in VisualStudio to write it, however here there is a guide on how to write it.

If you need to modify the chart appearances, you could add the property in the code below or with a simple foreach cycle in the codebehind

(codebelow)<asp:Series Name="Series1" ChartType="Line" BorderWidth="3" XValueMember="Total" 
        YValueMembers="orderdate">
    </asp:Series>

(codebehind)
foreach(Series s in Chart1.Series){
    s.BorderWidth=3;
    s.IsValueShownAsLabel = true;
    ...
}