how do I show loading image on chart

[aonzuza]

I want to show loading image on background image or something that can tell user for keep waiting while event page_load



//show loading image on blackgroud

//set chart on this is event
protected void Page_Load(object sender, EventArgs e)

//hide loading image on blackgroud.

do you have an idea for this ?

[Narcís]

Hi aonzuza,

Yes, you can set and remove backround image as in this example:

Code: Select all

        public Form1()
        {
            InitializeComponent();

            tChart1.Panel.Image = Image.FromFile(@"C:\temp\Image6.jpg");
            tChart1.Panel.Gradient.Visible = false;
            tChart1.Walls.Visible = false;
        }

        private void InitializeChart()
        {
            tChart1.AutoRepaint = false;

            for (int i = 0; i < 10; i++)
            {
                tChart1.Series.Add(new Steema.TeeChart.Styles.FastLine());
                tChart1[i].FillSampleValues(100000);
            }

            tChart1.AutoRepaint = true;
            tChart1.Refresh();
        }

        private void button1_Click(object sender, EventArgs e)
        {
            InitializeChart();

            tChart1.Panel.Gradient.Visible = false;
            tChart1.Panel.Image = null;
            tChart1.Walls.Visible = true;
        }

[aonzuza]

Oh sorry i didn't told you that i'm using asp.net+c# for develop. Could you please show me the solution for this problem again ?

[aonzuza]

one more thing
this code does not support .gif image right???

[Narcís]

Hi aonzuza,

Yes, code in a web application could be this:

Code: Select all

    protected void Page_Load(object sender, EventArgs e)
    {
      Steema.TeeChart.Chart ch1 = WebChart1.Chart;

      //ch1.Series.Add(new Steema.TeeChart.Styles.Bar()).FillSampleValues();
      //ch1.Header.Text = "Steema's test application";

      System.Drawing.Image img = System.Drawing.Image.FromFile(@"C:\temp\Sunflower_as_gif_small.gif");
      ch1.Panel.Image = img;
      ch1.Panel.Gradient.Visible = false;
      ch1.Walls.Visible = false;

      for (int i = 0; i < 10; i++)
      {
        ch1.Series.Add(new Steema.TeeChart.Styles.FastLine());
        ch1[i].FillSampleValues(100000);
      }

      ch1.Panel.Gradient.Visible = false;
      ch1.Panel.Image = null;
      ch1.Walls.Visible = true;
    }

You may split it in different events to achieve what you need. As you can see in the example, GIF images can be used.

Hope this helps!

[aonzuza]

Oh..thank you for your service so much. but what's event that i set loading icon for background and what's event that i set normally background after chart load done. something like this following.

1. what's event before load ? -> set loading icon and show to client
2. what's event-> add data to chart ,add zoom and still show loading icon
3. what's event-> after chart process has been done then show chart and disable loading icon

thank you in advance.

[Sandra]

Hello aonzuza,

I have made a simple example using events of TeeChart. Concretely I have used BeforeDraw and AfterDraw Events, used to treat chart before and after drawing it.

Code: Select all

    Steema.TeeChart.Chart ch1;
    protected void Page_Load(object sender, System.EventArgs e)
    {
        ch1 = WebChart1.Chart;
        ch1.AutoRepaint = false;               
        ch1.Tools.Add(new Steema.TeeChart.Tools.ZoomTool());
       ((Steema.TeeChart.Tools.ZoomTool)ch1.Tools[0]).ZoomPenColor = System.Drawing.Color.OliveDrab;
            //setup Chart
            System.Drawing.Image img = System.Drawing.Image.FromFile(@"C:\temp\Image6.gif");
            ch1.Panel.Image = img;
            ch1.Panel.Gradient.Visible = false;
            ch1.Walls.Visible = false;

            for (int i = 0; i < 10; i  )
            {
                ch1.Series.Add(new Steema.TeeChart.Styles.FastLine());
                ch1[i].FillSampleValues(10);
            }
           CheckZoom(WebChart1);
           ch1.AutoRepaint = true;
           WebChart1.BeforeDrawSeries  = new Steema.TeeChart.PaintChartEventHandler(WebChart1_BeforeDrawSeries);
           WebChart1.AfterDraw  = new Steema.TeeChart.PaintChartEventHandler(WebChart1_AfterDraw);
           ch1.Invalidate();
    }
    void WebChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g)
    {
        ch1.Panel.Gradient.Visible = false;
        ch1.Panel.Image = null;
        ch1.Walls.Visible = true;
    }
    void WebChart1_BeforeDrawSeries(object sender, Steema.TeeChart.Drawing.Graphics3D g)
    {

        System.Drawing.Image img = System.Drawing.Image.FromFile(@"C:\temp\Image6.gif");
        ch1.Panel.Image = img;
        ch1.Panel.Gradient.Visible = false;
        ch1.Walls.Visible = false;
    }
    private void CheckZoom(Steema.TeeChart.Web.WebChart WebChart1)
    {
        System.Collections.ArrayList zoomedState = (System.Collections.ArrayList)Session[WebChart1.ID   "Zoomed"];
        zoomedState = ((Steema.TeeChart.Tools.ZoomTool)WebChart1.Chart.Tools[0]).SetCurrentZoom(Request,
            zoomedState);
        if (zoomedState == null)
            Session.Remove(WebChart1.ID   "Zoomed");
        else
            Session.Add(WebChart1.ID   "Zoomed", zoomedState);
    }

So, previous code is done with some events of TeeChart use to treat it. But, if you don’t like this solution or doesn't work as you want you can use events of asp.net gives, as example, Init, PreLoad ,PreInit...

I hope will helps.

Thanks,

[aonzuza]

I try to use your example. but i did't see anything happen while chart is loading.so i upload my test page for asking you to show the right way and the test way. thank you in advace.i feel so good for your support.


here this is my code and loading image
testpage.aspx

Code: Select all

    		<form id="form1" runat="server">
    	<tchart:WebChart Height="370px" 
	Width="620px" ID="WebChart1" 
	runat="server" TempChart="Session" 
	BorderStyle="Solid"
	BorderWidth="1px"
	AutoPostback="true" 
	/>

and this one is .cs code

Code: Select all

    Steema.TeeChart.Chart ch1;
    protected void Page_Load(object sender, EventArgs e)
    {

        ch1 = WebChart1.Chart;
        ch1.AutoRepaint = false;
        ch1.Tools.Add(new Steema.TeeChart.Tools.ZoomTool());
        ((Steema.TeeChart.Tools.ZoomTool)ch1.Tools[0]).ZoomPenColor = System.Drawing.Color.OliveDrab;
     

        //setup Chart
        System.Drawing.Image img = System.Drawing.Image.FromFile(@"D:\work\PEC_TECH\BMoS\Image\loading_icons\loading3.gif");
        
       
        ch1.Panel.Image = img;
        ch1.Panel.Gradient.Visible = false;
        ch1.Walls.Visible = false;


        ch1.Chart.Aspect.View3D = false;
       // System.Threading.Thread.Sleep(3000);

        for (int i = 0;  i < 400; i++)
        {
            ch1.Series.Add(new Steema.TeeChart.Styles.FastLine());
            ch1[i].FillSampleValues(1000);
        }
        CheckZoom(WebChart1);
        ch1.AutoRepaint = true;
        
        WebChart1.BeforeDrawSeries += new Steema.TeeChart.PaintChartEventHandler(WebChart1_BeforeDrawSeries);
        WebChart1.AfterDraw += new Steema.TeeChart.PaintChartEventHandler(WebChart1_AfterDraw);
        ch1.Invalidate();
    }

    protected void WebChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g)
    {
//i want to see loading image so can i use this code ???
       //System.Threading.Thread.Sleep(3000);
        ch1.Panel.Gradient.Visible = false;
        ch1.Panel.Image = null;
        ch1.Walls.Visible = true;
    }
    protected void WebChart1_BeforeDrawSeries(object sender, Steema.TeeChart.Drawing.Graphics3D g)
    {

        System.Drawing.Image img = System.Drawing.Image.FromFile(@"D:\work\PEC_TECH\BMoS\Image\loading_icons\loading3.gif");
        ch1.Panel.Image = img;
        ch1.Panel.Gradient.Visible = false;
        ch1.Walls.Visible = false;
        
    }
    private void CheckZoom(Steema.TeeChart.Web.WebChart WebChart1)
    {
        System.Collections.ArrayList zoomedState = (System.Collections.ArrayList)Session[WebChart1.ID+"Zoomed"];
        zoomedState = ((Steema.TeeChart.Tools.ZoomTool)WebChart1.Chart.Tools[0]).SetCurrentZoom(Request,
            zoomedState);
        if (zoomedState == null)
            Session.Remove(WebChart1.ID+"Zoomed");
        else
            Session.Add(WebChart1.ID+"Zoomed", zoomedState);
    }

[aonzuza]

i've been waiting for it.

[Sandra]

Hello aonzuza,

TeeChart does not have a native way to do this so we're running some tests to see what we can suggest. We'll post back to this thread.

Thanks,

[Sandra]

Hello aonzuza,

Sorry for the delay. I have been investigating and I think that the best form to do it is loading your image in the Client Side using JavaScript events. Also, you have enabled it before to load the page and you have disabled after load it. In the Zoom event you have do same enable or disable image, how you are interested. Please try to do my recommendation; if you have any problem with it please let me know.

Thanks,