ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  ASP.NET MVC?
Posted by Brian on Feb-05-2011 01:12
| Reply | Monitor
Anyone get chart director to work in ASP.NET MVC 3.0?

I have been trying with no success. Problem seems to be in the image url when the webchartviewer control is rendered. I'm not even sure if chart director will work in MVC, but it seems like it ought to.

I have this in-line code (mostly a copy paste from documentation) which renders a blank(broken image - red "X"). This method is the same method used for competing products (dundas, .net Chart, etc.)

Fiddler 2 shows this request being made for the image url.
/Home/About?ChartDirectorChartImage=chart_&cacheId=f6f857ca14304ebbb48c8fb13f8a3f63&cacheDefeat=634324055583591033 HTTP/1.1


   <% WebChartViewer WebChartViewer1 = new WebChartViewer();

          // The data for the line chart
          double[] data = {30, 28, 40, 55, 75, 68, 54, 60, 50, 62, 75, 65, 75, 91, 60, 55,
        53, 35, 50, 66, 56, 48, 52, 65, 62};

          // The labels for the line chart
          string[] labels = {"0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11",
        "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24"}
              ;

          // Create a XYChart object of size 250 x 250 pixels
          XYChart c = new XYChart(250, 250);

          // Set the plotarea at (30, 20) and of size 200 x 200 pixels
          c.setPlotArea(30, 20, 200, 200);

          // Add a line chart layer using the given data
          c.addLineLayer(data);

          // Set the labels on the x axis.
          c.xAxis().setLabels(labels);

          // Display 1 out of 3 labels on the x-axis.
          c.xAxis().setLabelStep(3);

          // Output the chart
          WebChartViewer1.Image = c.makeWebImage(ChartDirector.Chart.PNG);

          //include tool tip for the chart
          WebChartViewer1.ImageMap = c.getHTMLImageMap("", "",
              "title='Hour {xLabel}: Traffic {value} GBytes'");


          WebChartViewer1.Page = this;
          HtmlTextWriter writer = new HtmlTextWriter(Page.Response.Output);
          WebChartViewer1.RenderControl(writer);


           %>

Thanks.

  Re: ASP.NET MVC?
Posted by Peter Kwan on Feb-05-2011 23:24
| Reply | Monitor
Hi Brian,

In your current code, the chart image is generated in memory. The URL you see in Fiddler is to retrieve the chart image from memory and send it to the browser. For that URL to work, the WebChartViewer must exist on the web page at page init time. For your case, your code creates the WebChartViewer during rendering. As a result, the WebChartViewer cannot see earlier events (Page Init, Page Load, etc).

To solve the problem, there are two methods:

(a) Please put the following line of code in the Init event handler (usually called Page_Init or OnInit on a Web Form - not sure what it is called in ASP.NET MVC though). This line activates allow the WebChartViewer to listen to Page Init.

WebChartViewer.OnPageInit(this);

or

(b) Output the chart image as a temporary file using BaseChart.makeTmpFile. If a temporary file is used, the URL you see in Fiddler is not needed, and the problem should not occur. For more details, please refer to the documentation on BaseChart.makeTmpFile.

Hope this can help.

Regards
Peter Kwan

  Re: ASP.NET MVC?
Posted by Brian on Feb-08-2011 03:09
| Reply | Monitor
Hi Peter -

Thanks very much for your response. We were able to get it to work using a temporary file location. I don't believe there is a page_init event in MVC as there is no webform and no code-behind. But we are just investigating MVC  as it solves some other challenges for us unrelated to this and wanted to see what impact this change would have on chart director if we chose to use it. MVC is very new to me - so if I'm wrong please don't hesitate to correct me.

Here is the code that works for me. This is currently in one of the views in our test app. Also the image map seems to work fine in MVC if anyone is wondering.

       <% WebChartViewer WebChartViewer1 = new WebChartViewer();

          // The data for the line chart
          double[] data = {30, 28, 40, 55, 75, 68, 54, 60, 50, 62, 75, 65, 75, 91, 60, 55,
        53, 35, 50, 66, 56, 48, 52, 65, 62};

          // The labels for the line chart
          string[] labels = {"0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11",
        "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24"}
              ;

          // Create a XYChart object of size 250 x 250 pixels
          XYChart c = new XYChart(250, 250);

          // Set the plotarea at (30, 20) and of size 200 x 200 pixels
          c.setPlotArea(30, 20, 200, 200);

          // Add a line chart layer using the given data
          c.addLineLayer(data);

          // Set the labels on the x axis.
          c.xAxis().setLabels(labels);

          // Display 1 out of 3 labels on the x-axis.
          c.xAxis().setLabelStep(3);

          // Output the chart
          string chartFile = c.makeTmpFile(Server.MapPath("/TempImages"), ChartDirector.Chart.PNG, 600);

          WebChartViewer1.ImageUrl = "/TempImages/" + chartFile;
          //include tool tip for the chart
          WebChartViewer1.ImageMap = c.getHTMLImageMap("", "",
              "title='Hour {xLabel}: Traffic {value} GBytes'");




          WebChartViewer1.Page = this;
          HtmlTextWriter writer = new HtmlTextWriter(Page.Response.Output);
          WebChartViewer1.RenderControl(writer);
           %>

Brian

  Re: ASP.NET MVC?
Posted by Peter Kwan on Feb-09-2011 03:37
| Reply | Monitor
Hi Brian,

Thanks a lot for your valuable feedback and code sample. This can certainly help a lot of people using ASP.NET MVC with ChartDirector.

Again, thanks a lot.

Regards
Peter Kwan