CODEWITHSUNDEEP
asp.net-mvchighchartsasp.net-mvc-5
User
User

Reputation: 1363

how to display multiple chart on same page in mvc5

Using 

  using DotNet.Highcharts;

Controller Code

 //First Part
 Highcharts columnChart = new Highcharts("columnchart");
       ************************
   columnChart.SetPlotOptions(new PlotOptions
   {
       Column =  new PlotOptionsColumn
           {
          DataLabels = new PlotOptionsColumnDataLabels { Enabled = true,
          Crop = true, Overflow = "none",
          Rotation= -50, Padding=200,X=5,Y=-10  }  }
   });
      columnChart.SetXAxis(new XAxis()
        {
            Type = AxisTypes.Category,
            Title = new XAxisTitle() { Text = "Years", Style = "fontWeight: 'bold', fontSize: '17px'" },
            Categories = tcMX.ToArray()
        });
        columnChart.SetSeries(tcMASt.ToArray());
       **********************
  ViewData["chartYear"]=columnChart;

 //Second Part
  Highcharts columnChartState = new Highcharts("columnchart");
   ************************
       other code same like above
       **********************
   ViewData["chartState"]=columnChartState;

cshtml page 

  @(ViewData["chartYear"])    
  <br/> <br/>
  @(ViewData["chartState"])

From above code I have to display both year wise chart and state wise chart but only display second chart. if i tried on separate page then it worked fine but when try on same page then only display last chart.

how to solve it?

Upvotes: 0

Views: 605

Answers (1)

Tetsuya Yamamoto
Tetsuya Yamamoto

Reputation: 24957

Probably you're assigning both charts with same name in Highcharts initialization constructor, which second chart overrides the first one during rendering inside view as in code below:

Highcharts columnChart = new Highcharts("columnchart");

Highcharts columnChartState = new Highcharts("columnchart");

Instead, try using different name for second chart (the chart names should be unique to avoid overriding problem):

Highcharts columnChartState = new Highcharts("columnchartstate");

Also I recommend to strip out ViewData usage and put the charts as viewmodel properties with different <div> placeholders as in example below:

Model

public class ChartsViewModel
{
    public Highcharts ColumnChart { get; set; }

    public Highcharts ColumnChartState { get; set; }
}

Controller Action

public ActionResult ActionName()
{
    Highcharts columnChart = new Highcharts("columnchart");
    Highcharts columnChartState = new Highcharts("columnchartstate");

    // other stuff

    var charts = new ChartsViewModel
    {
        ColumnChart = columnChart,
        ColumnChartState = columnChartState
    };

    return View(charts);
}

View

@model ChartsViewModel

<div>@Model.ColumnChart</div>
<br /><br />
<div>@Model.ColumnChartState</div>

Reference: DotNet.Highcharts Class

Upvotes: 2

Related Questions