Steema Central

Posted: **Thu Aug 18, 2011 8:48 am**

I am working on a ASP .NET MVC2.0 project, I use the following method to let teechart show the chart to browser.

1. in the controller, I write a public void function and do something like

Code: Select all

Steema.TeeChart.Web.WebChart WebChart1 = new Steema.TeeChart.Web.WebChart();
WebChart1.Chart.Header.Text = "Chart for blah blah";
Steema.TeeChart.Styles.FastLine Line1 = new FastLine();
WebChart1.Chart.Series.Add(Line1);
Line1.Title = "blah blah blah";
Line1.Color = Color.Black;
WebChart1.Width = 640;
WebChart1.Height = 480;
WebChart1.Chart.Legend.Visible = false;
/*
 * skip how I get the data from database
 * and assign into List<string> xvalue and yvalue
 */
for (var i = 0; i < xvalue.Count(); i++)
{
      Line1.Add(Convert.ToDateTime(xvalue.ElementAt(i).ToString()), Convert.ToDouble(yvalue.ElementAt(i).ToString()));
}
Response.Clear();
Response.ContentType = "image/jpeg";
Response.BufferOutput = true;

using (MemoryStream ms = new MemoryStream())
{
                    WebChart1.Chart.Export.Image.JPEG.Save(ms);
                    
                    ms.WriteTo(Response.OutputStream);
                    ms.Flush();
                    ms.Dispose();
                    ms.Close();
}

GC.Collect();

And in the view, I just do something like

Code: Select all

<img src="/GetChart" width="640" height="480">

It show up the chart correctly, working fine. But when the client ask for more function like zoom,scroll,show value when clicked
it become

...
for scroll, maybe I can just export a very large chart and put it into a div...let the client scroll the div...
but I would like to know if there are any easier way to export a zoomed image? (cause i don't want to do all the calculation myself...)
I am thinking to do something like this, write some javascript in the view handle how to trigger the zoom/scroll and use ajax to call the controller.
In the controller, before I save the chart to the stream, I save it in the session, so that when zoom is trigger,
it get the chart from session, do the zoom, export it to the stream and let the javascript handle the rest.

Before I try this, I need to make sure I can zoom a chart and export as a image.
I modify the code of the GetChart function so that every chart will be zoomed once it load...
The problem is, when i try to do something like this before export it to stream

Code: Select all

WebChart1.Chart.Zoom.ZoomPercent(120.0);

I also try 1.0,0.8,100.0,120.0 ... etc
it seems it is not doing the zoom, the image export to the stream is a empty chart
with the min and max are both 0 can't see the FastLine.

Anyone have done something like this before?

Posted: **Thu Aug 18, 2011 9:59 am**

ok...seems i can make it work now...
add a ZoomTools, and use the ZoomTools to do the zoom...export it...
seems ok...will try to make it work with ajax

Posted: **Tue Aug 23, 2011 10:38 am**

Hello porsia,

Thanks for information. I am glad that you can solve your problem.

Posted: **Tue Aug 19, 2014 11:08 am**

Hi,

Picking up on this older thread. A code proposal prompted by recent new features in TeeChart for .NET gives live charts (zoomable/scrollable) on the page via MVC in a fairly straightforward manner. Please note that TeeChart only supports a limited number of Series types for live Javascript/HTML5. See the demo here (http://www.steema.net/TeeChartForNET/index.aspx under 'Interacting with Charts::Javascript-HTML5 Charts') for a fuller preview. TeeChart Javascript/HTML5 output supports modifications to the native Javascript features of the Chart.

If you're new to MVC you could add this code sample to the HelloWorld sample described here: http://www.asp.net/mvc/tutorials/mvc-5/ ... controller

Add a reference to TeeChart to the project, open the HelloWorldController.cs file and these 'uses' to the unit:
using Steema.TeeChart;
using Steema.TeeChart.Web;
using Steema.TeeChart.Styles;
using System.IO;

Changing the Helloworld 'Index' clause to:

Code: Select all

public class HelloWorldController : Controller
    {
        public string Index()
        {

            MemoryStream ms = new MemoryStream();
            WebChart wChart1 = new WebChart();

            wChart1.Chart.Width = 600;
            wChart1.Chart.Height = 300;

            Bar bar = new Bar(wChart1.Chart);

            bar.Marks.Visible = true;
            bar.FillSampleValues(10);

            string[] cCode = new string[]{
                 "chart1.applyTheme(\"minimal\");"
            };

            wChart1.Chart.Export.Image.JScript.CustomCode = cCode;

            wChart1.Chart.Export.Image.JScript.Save(ms);

            ms.Position = 0;
            StreamReader sR = new StreamReader(ms);
            var javaScr = sR.ReadToEnd();

            return javaScr;
        }

//.... etc...
}

You could use TChart in place of WebChart in this example if System.Windows.Forms references in the project are acceptable to you. The Chart export code in this example generates an autonomous page but export options also support chart-only code allowing TeeChart to be placed within other page features.

To export TeeChart as an image in MVC page, see the code contributions earlier in this thread.

Regards,
Marc Meumann

Steema Central

zoom problem with MVC project

zoom problem with MVC project

Re: zoom problem with MVC project

Re: zoom problem with MVC project

Re: zoom problem with MVC project