VS2022 Chart Control not working in Web Forms framework 4.7.2

Question

I'm trying to use the Chart control in the Toolbox in a web form vb.net framework project using framework 4.7.2 but the control will not display. There are zero errors and I'm using the most basic settings for the Chart control. I have an earlier 3.5 version of the same Chart control (with more properties set on it) that works but if I try to copy/paste that code into the new project, the control won't display.

The results below only shows the area where the chart would be with no image. I know the query works in the datasource control as I have that same datasource referenced in a gridview control without issues.

I've read other posts that state the Chart control doesn't work for certain project types in vs2022 but the framework i'm using is supposed to be supported for the Chart control.

The Assembly is registered in the web form code. Below is the code.

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="transtotals.aspx.vb" Inherits="ZEPEDI_Redesign_v1.transtotals" %>

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

<main>

<section class="row" aria-labelledby="aspnetTitle">

<h1 id="aspnetTitle">Metrics Dashboard</h1>

<p class="lead">The Metrics Dashboard provides detailed metrics about our Retail, Distribution, Sales & Service, and TMS areas. This information is a snapshot of transaction counts or AR data specific to EDI partners. Refresh the data to see updated statistics  </p>

</section>

<div class="row">

<section class="col-md-4" aria-labelledby="TransactionTotalsTitle">

<asp:Chart ID="Chart1" runat="server" DataSourceID="sqldsTotalsByRegion">

<Series>

<asp:Series Name="Series1" ></asp:Series>

</Series>

<ChartAreas>

<asp:ChartArea Name="ChartArea1"></asp:ChartArea>

</ChartAreas>

</asp:Chart>

<br />

<asp:SqlDataSource ID="sqldsTotalsByRegion" runat="server" ConnectionString="<%$ ConnectionStrings:BISWORKConnectionString %>" SelectCommand="SELECT format(sum(ZIP_Metrics.TransactionCount), '###,###,###,###') as 'Count by Transaction' , ZR.Region FROM [BISWORK].[dbo].[ZIP_Metrics] Inner Join BISWORK.dbo.ZIP_Routes ZR with (nolock) ON ( ZR.TP_Name = BISWORK.dbo.ZIP_Metrics.TP_Name AND ZR.Document_Type = BISWORK.dbo.ZIP_Metrics.Document_Type AND ZR.Direction = BISWORK.dbo.ZIP_Metrics.Direction ) where ZIP_Metrics.Time_Start like '2024%' and ZR.Region <> '' group by ZR.Region"></asp:SqlDataSource>

</section>

<asp:GridView runat="server" DataSourceID="sqldsTotalsByRegion" ID="ctl00" AutoGenerateColumns="False">

<Columns>

<asp:BoundField DataField="Count by Transaction" HeaderText="Count by Transaction" ReadOnly="True" SortExpression="Count by Transaction"></asp:BoundField>

<asp:BoundField DataField="Region" HeaderText="Region" SortExpression="Region"></asp:BoundField>

</Columns>

</asp:GridView>

</div>

</main>

</asp:Content>

Answer 1

Hi @Sprutus Benton,

You need to follow the steps below to use ASP.Net 4.0 Chart Controls.

Make sure to add the reference (System.Web.DataVisualization.dll): (right click on the project->Add->Reference->Assemblies->Check System.Web.DataVisualization.dll)

Add the following to your Web.Config file:

<configuration>
	<appSettings>
		<add key="ChartImageHandler" value="storage=file;timeout=20;" />
	</appSettings>
	<system.webServer>
		<handlers>
			<add name="ChartImg" verb="*" path="ChartImg.axd"  type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"  />
		</handlers>
	</system.webServer>
  <system.web>
	  <compilation debug="true" strict="false" explicit="true" targetFramework="4.7.2">
		  <assemblies>
			  <add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
		  </assemblies>
	  </compilation>
    ****
  </system.web>
  ***	
</configuration>

Add this at the top of your aspx page:

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

Specify the X and Y values:XValueMember,YValueMembers.

Here's a complete example I wrote using test data:

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication2.WebForm1" %>
<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <main>
    <section class="row" aria-labelledby="aspnetTitle">
        <h1 id="aspnetTitle">Metrics Dashboard</h1>
        <p class="lead">The Metrics Dashboard provides detailed metrics about our Retail, Distribution, Sales & Service, and TMS areas. This information is a snapshot of transaction counts or AR data specific to EDI partners. Refresh the data to see updated statistics  </p>
    </section>
    <div class="row">
        <section class="col-md-4" aria-labelledby="TransactionTotalsTitle">
            <asp:Chart ID="Chart1" runat="server" DataSourceID="sqldsTotalsByRegion">
                <Series>
                    <asp:Series Name="Series1" IsValueShownAsLabel="True" XValueMember="Month" YValueMembers="Quantity"></asp:Series>
                </Series>
                <ChartAreas>
                    <asp:ChartArea Name="ChartArea1">
                        <AxisY>
                            <MajorGrid Enabled="true" />
                        </AxisY>
                        <AxisX>
                            <MajorGrid Enabled="true" />
                        </AxisX>
                    </asp:ChartArea>
                </ChartAreas>
            </asp:Chart>
            <br />
            <asp:SqlDataSource ID="sqldsTotalsByRegion" runat="server" ConnectionString="<%$ ConnectionStrings:BISWORKConnectionString %>" SelectCommand="select * from Table2"></asp:SqlDataSource>
        </section>
        <asp:GridView runat="server" DataSourceID="sqldsTotalsByRegion" ID="ctl00" AutoGenerateColumns="False">
            <Columns>
                <asp:BoundField DataField="Month" HeaderText="Count by Transaction" ReadOnly="True" SortExpression="Count by Transaction"></asp:BoundField>
                <asp:BoundField DataField="Quantity" HeaderText="Region" SortExpression="Region"></asp:BoundField>
            </Columns>
        </asp:GridView>
    </div>
</main>
</asp:Content>

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread