AJAX and zooming

[Wieslaw]

Hi,
Sorry for my English.

We have commercial version of TeeChart Pro 7.0 VCL.
TeeChart Pro 7.0 works great in our desktop application writen in Delphi 2005.
Now we want to buy TeeChart ASP.NET and translate our application in ASP.NET in Visual Studio 2010.
I downloaded trial version of TeeChart 2010 ASP.NET and started translate our application from Object Pascal to ASP.NET, C#

I have some questions:

1. How to implement AJAX data loading to WebChart ?
When chart is showing on the brower the first time, there should be visible only preview chart, with data loading at either position, for example, every hundredth
When the chart is zooming, component should download via AJAX more detailed data on the graph, and delete data from memory outside the scope of actual zoomlevel. In desktop program when data is loading to the chart an progressbar is displaying, but on website I would like to display data such as GoogleMaps for example - only when I zoom, the map appear more detailed data. Is it possible in newest TeeChart ?

2. How to translate this code ?:

procedure TfrmFuelChart.bZoomINClick(Sender: TObject);
var rect: TRect;
width: Integer;
begin
rect := Chart.ChartRect;
width := rect.Right - rect.Left;
rect.Left := rect.Left + Trunc(width / 10);
rect.Right := rect.Right - Trunc(width / 10);
Chart.ZoomRect(rect);
end;

after translating to C#

protected void bZoomIn_Click(object sender, EventArgs e)
{
Rectangle rect = WebChart1.Chart.ChartRect;
int width = rect.Right - rect.Left;
rect.X = rect.Left + (width / 10);
rect.Width = rect.Right - (width / 10);
WebChart1.Chart.Zoom.ZoomRect(rect);
}

WebChart1.Chart.ChartRect is {left: 0, top: 0, width: 0, height: 0}

3. Very simple example of programatically zooming also doesn't work:
http://carnet.sqnc.pl/teechart/

Please help.

Best Regards

Wieslaw Kubala
Sequence
http://sqnc.pl

[Sandra]

Hello Wieslaw,

1. How to implement AJAX data loading to WebChart ?
When chart is showing on the brower the first time, there should be visible only preview chart, with data loading at either position, for example, every hundredth
When the chart is zooming, component should download via AJAX more detailed data on the graph, and delete data from memory outside the scope of actual zoomlevel. In desktop program when data is loading to the chart an progressbar is displaying, but on website I would like to display data such as GoogleMaps for example - only when I zoom, the map appear more detailed data. Is it possible in newest TeeChart ?

I recommend that take a look in DemoProject of TeeChart.Net concretly in example All Features\Welcome !\Functions\Extended\Reducing number of points\DownSampling Additions is and example made in .net but I think you can help you to achieve do you want. Moreover, also serve see in Asp.Net Demo as you can find more specifics examples. About ajax, we will investigate if is possible do as you want.

2. How to translate this code ?:
procedure TfrmFuelChart.bZoomINClick(Sender: TObject);
var rect: TRect;
width: Integer;
begin
rect := Chart.ChartRect;
width := rect.Right - rect.Left;
rect.Left := rect.Left + Trunc(width / 10);
rect.Right := rect.Right - Trunc(width / 10);
Chart.ZoomRect(rect);
end;

I think the problem is that you need repaint webChart before use its chartRect properties. You can do it using next lines of code:

Code: Select all

 protected void Page_Load(object sender, EventArgs e)
  {
     .......
     Bitmap bmp = WebChart1.Chart.Bitmap((int)WebChart1.Width.Value,(int)WebChart1.Height.Value);
    }
    protected void bZoomIn_Click(object sender, EventArgs e)
    {
         Rectangle rect = WebChart1.Chart.ChartRect;
        int width = rect.Right - rect.Left;
        rect.X = rect.Left + (width / 10);
        rect.Width = rect.Right - (width / 10);
        WebChart1.Chart.Zoom.ZoomRect(rect);
    }

Could you tell us if previous code works as you expected?

3. Very simple example of programatically zooming also doesn't work:
http://carnet.sqnc.pl/teechart/

I have tested your project and seems bZoomIn_Click doesn't works if you don't redraw WebChart before click the button, so you need do the same as do in previous answer. And also I have given the code of Zoom demo example and add here. Please, could you check if next code works as you expected and zooming works fine for you?

Code: Select all

    private Steema.TeeChart.Styles.Points points1, points2;
    protected void Page_Load(object sender, System.EventArgs e)
    {
       
        // Put user code to initialize the page here
        // ****************************************************
        // The data load code for WebChart1 demostrates a technique to save 
        // data between page calls. The Chart is saved as a TeeChart template 
        // to a session variable.
        // ****************************************************
        Steema.TeeChart.Chart ch1 = WebChart1.Chart;
        MemoryStream tmpChart = new MemoryStream();

        if (Session["ch1"] == null)
        {
            points1 = new Points(WebChart1.Chart);
            points2 = new Points(WebChart1.Chart);
    
                ch1.Tools.Add(new Steema.TeeChart.Tools.ZoomTool());
           
            ((Steema.TeeChart.Tools.ZoomTool)ch1.Tools[0]).ZoomPenColor = Color.OliveDrab;
            //((Steema.TeeChart.Tools.SeriesHotspot)ch1.Tools[1]).Style = MarksStyles.LabelPercentTotal;
             points1.Pointer.Pen.Visible = false;
             points1.Pointer.HorizSize = 2;
             points1.Pointer.VertSize = 2;
             points2.Pointer.Pen.Color = Color.FromArgb(79, 79, 255);
             points2.Pointer.HorizSize = 2;
             points2.Pointer.VertSize = 2;

            points1.Color = Color.FromArgb(255, 199, 26);
            points2.Color = Color.FromArgb(106, 106, 255);

             points1.FillSampleValues(36);
             points2.FillSampleValues(36);
            //export Chart to a MemoryStream template
            ch1.Export.Template.Save(tmpChart);
            //save template to a Session variable
            Session.Add("ch1", tmpChart);
        }
        else
        {
            //retrieve the session stored Chart
            tmpChart = (MemoryStream)Session["ch1"];
            //set the Stream position to 0 as the last read/write
            //will have moved the position to the end of the stream
            tmpChart.Position = 0;
            //import saved Chart
            WebChart1.Chart.Import.Template.Load(tmpChart);

            //check whether zoom request is being sent
            CheckZoom(WebChart1);
        }
    }
    private void CheckZoom(WebChart wChart)
    {
        ArrayList zoomedState = (ArrayList)Session[wChart.ID + "Zoomed"];
        zoomedState = ((Steema.TeeChart.Tools.ZoomTool)wChart.Chart.Tools[0]).SetCurrentZoom(Request,
            zoomedState);
        if (zoomedState == null)
            Session.Remove(wChart.ID + "Zoomed");
        else
            Session.Add(wChart.ID + "Zoomed", zoomedState);
    }

Thanks
I hope will helps.

[Sandra]

Hello Wieslaw,

I have investigated and I recommend that if you want use Ajax with WebChart add WebChart into the UpDatePanel so you can work easy with the code ajax and code of TeeChart without lost their connection.

On the other hand, I modify the last code I have given you for next.

Code: Select all

protected void Page_Load(object sender, EventArgs e)
  {
     .......
   WebChart1.Chart.Bitmap((int)WebChart1.Width.Value,(int)WebChart1.Height.Value);
    }
    protected void bZoomIn_Click(object sender, EventArgs e)
    {
         Rectangle rect = WebChart1.Chart.ChartRect;
        int width = rect.Right - rect.Left;
        rect.X = rect.Left + (width / 10);
        rect.Width = (width / 8);
        WebChart1.Chart.Zoom.ZoomRect(rect);
    }

I think is more optimal than previous and is a good solution for you.

I hope will helps.

Thanks,