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

Message ListMessage List     Post MessagePost Message

  Chart with ASP.NET MVC4
Posted by Mittal on Jun-19-2013 15:14
| Reply | Monitor
I have tried to create a Line chart using the ASP.NET MVC4 but did not get success. have tried using below code where I am rendering chart viewer on the page.

@{
  ChartDirector.WebChartViewer WebChartViewer1 = new ChartDirector.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
  ChartDirector.XYChart c = new ChartDirector.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;
  var writer = new HtmlTextWriter(Page.Response.Output);
  Model.RenderControl(writer);
}

Please note that I am using the Razor engine(Cshtml file) . Hence it throws the error on
"WebChartViewer1.Page = this", as this page is not a type of the System.Web.UI.Page

Is it possible to create a chart using in ASP.NET MVC4 using razor engine in ChartDirector?

  Re: Chart with ASP.NET MVC4
Posted by Peter Kwan on Jun-20-2013 14:15
| Reply | Monitor
Hi Mittal,

I have not tried the Razor engine myself. If I were you, I will probably use ChartDirector without the WebChartViewer control at all. It is like:

@{
  // 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
  ChartDirector.XYChart c = new ChartDirector.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);

  string filename = c.makeTmpFile(Server.MapPath("/tmpcharts"));
  string url = "/tmpcharts/" + filename;

  // output the chart
  string imageMap = c.getHTMLImageMap("", "", "title='Hour {xLabel}: Traffic {value} GBytes'");
}

<img src="@url" usemap="#map1" border="0" /><map name="map1">@Html.Raw(imageMap)</map>

Hope this can help.

Regards
Peter Kwan

  Re: Chart with ASP.NET MVC4
Posted by Mittal Patel on Jun-21-2013 12:37
| Reply | Monitor
Thank you Peter. It works.

I am able to create a graph using above code.