Dynamic add Chart control in ASP.Net Panel using C#

Amol111
 
on Mar 16, 2022 06:45 AM
613 Views

Hi Team,

I have used the Chart control dynamically & loaded into the panel from c# page. But its working only on IE browser.

Its not working on any other browser.

Can you please let me know the reason behind this & provide me the solution on this, so i will display the chart control on all browsers.

Thanks in advance.

<div id="divChart" runat="server" style="width: 100%; float: left; visibility: visible;">
<table>
    <tr>
        <td>
            <h2>Testing of Chart Control in Diffrent browser -- START</h2>
            <asp:Panel ID="pnlStatisricsTesting" runat="server">
            </asp:Panel>
        </td>
    </tr>
</table>
</div>

 

    protected void Page_Load(object sender, EventArgs e)
    {
       getStatisticsTesting(5000,4900,4800);
    }


    protected void getStatisticsTesting(int RMG, int Facility, int ITIS)
    {
        List<statData> objTesting = new List<statData>();
        objTesting.Add(new statData("HRMS",5000));
        objTesting.Add(new statData("Facility",4800));
        objTesting.Add(new statData("ITIS", 4900));

        Chart Chart1Testing = new Chart();
        Chart1Testing.Width = 500;
        Chart1Testing.Height = 350;
        Chart1Testing.Palette = ChartColorPalette.None;
        Chart1Testing.PaletteCustomColors = new System.Drawing.Color[] { System.Drawing.ColorTranslator.FromHtml("#b894c8"), System.Drawing.ColorTranslator.FromHtml("#b894c8"), System.Drawing.ColorTranslator.FromHtml("#b894c8") };

        ChartArea areaTesting = new ChartArea();
        areaTesting.Name = "Statistics";
        areaTesting.Position = new ElementPosition(10, 10, 90, 70);
        areaTesting.BackColor = System.Drawing.ColorTranslator.FromHtml("#9e6db4");

        Series AccessTesting = new Series();
        AccessTesting.ChartType = SeriesChartType.Bar;

        AccessTesting.XValueMember = "x";
        AccessTesting.YValueMembers = "y";

        Title t = new System.Web.UI.DataVisualization.Charting.Title("Active Employees");

        Chart1Testing.DataSource = objTesting;
        Chart1Testing.Series.Add(AccessTesting);
        Chart1Testing.ChartAreas.Add(areaTesting);
        Chart1Testing.Titles.Add(t);
        Chart1Testing.DataBind();

        Chart1Testing.ChartAreas[0].AxisX.MajorGrid.Enabled = false;
        Chart1Testing.ChartAreas[0].AxisY.MajorGrid.Enabled = false;
        Chart1Testing.ChartAreas[0].AxisX.Title = "Department";
        Chart1Testing.ChartAreas[0].AxisY.Title = "No. of Employees";

        Chart1Testing.ChartAreas[0].AxisX.LabelStyle.Angle = -90;
        Chart1Testing.ChartAreas[0].AxisX.Interval = 1;

        Chart1Testing.Series[0]["PieLabelStyle"] = "Outside";

        #region 3D CHart
        areaTesting.Area3DStyle.Enable3D = true;

        Chart1Testing.ChartAreas["Statistics"].Area3DStyle.Enable3D = true;

        Chart1Testing.ChartAreas[0].Area3DStyle.Enable3D = true;

        Chart1Testing.ChartAreas["Statistics"].Area3DStyle.Inclination = 30;

        Chart1Testing.ChartAreas["Statistics"].Area3DStyle.Rotation = 30;

        Chart1Testing.ChartAreas["Statistics"].Area3DStyle.IsClustered = true;

        #endregion

        int chartPoints = Chart1Testing.Series[0].Points.Count;
        for (int i = 0; i < chartPoints; i++)
        {
            Chart1Testing.Series[0].Label = "#VALX \n #VALY";
            Chart1Testing.Series[0].Points[i].ToolTip = "#VALY";
        }

        pnlStatisricsTesting.Controls.Add(Chart1Testing);
    }

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Mar 16, 2022 08:09 AM

Hi Amol111,

Refer below code.

HTML

<div id="divChart" runat="server" style="width: 100%; float: left; visibility: visible;">
    <table>
        <tr>
            <td>
                <h2>Testing of Chart Control in Diffrent browser -- START</h2>
                <asp:Panel ID="pnlStatisricsTesting" runat="server">
                </asp:Panel>
            </td>
        </tr>
    </table>
</div>

Namespaces

using System.Web.UI.DataVisualization.Charting;

Code

protected void Page_Load(object sender, EventArgs e)
{
    getStatisticsTesting(5000, 4900, 4800);
}

protected void getStatisticsTesting(int RMG, int Facility, int ITIS)
{
    List<statData> objTesting = new List<statData>();
    objTesting.Add(new statData("HRMS", 5000));
    objTesting.Add(new statData("Facility", 4800));
    objTesting.Add(new statData("ITIS", 4900));

    Chart Chart1Testing = new Chart();
    Chart1Testing.Width = 500;
    Chart1Testing.Height = 350;
    Chart1Testing.Palette = ChartColorPalette.None;
    Chart1Testing.PaletteCustomColors = new System.Drawing.Color[] { System.Drawing.ColorTranslator.FromHtml("#b894c8"), System.Drawing.ColorTranslator.FromHtml("#b894c8"), System.Drawing.ColorTranslator.FromHtml("#b894c8") };

    ChartArea areaTesting = new ChartArea();
    areaTesting.Name = "Statistics";
    areaTesting.Position = new ElementPosition(10, 10, 90, 70);
    areaTesting.BackColor = System.Drawing.ColorTranslator.FromHtml("#9e6db4");

    Series AccessTesting = new Series();
    AccessTesting.ChartType = SeriesChartType.Bar;

    AccessTesting.XValueMember = "x";
    AccessTesting.YValueMembers = "y";

    Title t = new System.Web.UI.DataVisualization.Charting.Title("Active Employees");

    Chart1Testing.DataSource = objTesting;
    Chart1Testing.Series.Add(AccessTesting);
    Chart1Testing.ChartAreas.Add(areaTesting);
    Chart1Testing.Titles.Add(t);
    Chart1Testing.DataBind();

    Chart1Testing.ChartAreas[0].AxisX.MajorGrid.Enabled = false;
    Chart1Testing.ChartAreas[0].AxisY.MajorGrid.Enabled = false;
    Chart1Testing.ChartAreas[0].AxisX.Title = "Department";
    Chart1Testing.ChartAreas[0].AxisY.Title = "No. of Employees";

    Chart1Testing.ChartAreas[0].AxisX.LabelStyle.Angle = -90;
    Chart1Testing.ChartAreas[0].AxisX.Interval = 1;

    Chart1Testing.Series[0]["PieLabelStyle"] = "Outside";

    #region 3D CHart
    areaTesting.Area3DStyle.Enable3D = true;

    Chart1Testing.ChartAreas["Statistics"].Area3DStyle.Enable3D = true;

    Chart1Testing.ChartAreas[0].Area3DStyle.Enable3D = true;

    Chart1Testing.ChartAreas["Statistics"].Area3DStyle.Inclination = 30;

    Chart1Testing.ChartAreas["Statistics"].Area3DStyle.Rotation = 30;

    Chart1Testing.ChartAreas["Statistics"].Area3DStyle.IsClustered = true;

    #endregion

    int chartPoints = Chart1Testing.Series[0].Points.Count;
    for (int i = 0; i < chartPoints; i++)
    {
        Chart1Testing.Series[0].Label = "#VALX \n #VALY";
        Chart1Testing.Series[0].Points[i].ToolTip = "#VALY";
    }

    pnlStatisricsTesting.Controls.Add(Chart1Testing);
}

public class statData
{
    public string x { get; set; }
    public int y { get; set; }
    public statData(string a, int b)
    {
        x = a;
        y = b;
    }
}

Tested in Mozilla, Chrome IE and Edge browsers.

Note: Add following line of code in the web config file.

<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>