Drawing multiple charts in a View

Question

Partial View "PiePartial.cshtml":

@model IEnumerable<QLCLDA.Models.Chart.ChartValue>

<script type="text/javascript">
    var chart;
    var legend;

    AmCharts.ready(function () {
        // PIE CHART
        chart = new AmCharts.AmPieChart();
        chart.dataProvider = @Html.Raw(Json.Encode(Model));
        chart.titleField = "name";
        chart.valueField = "value";
        chart.outlineColor = "#FFFFFF";
        chart.outlineAlpha = 0.8;
        chart.outlineThickness = 2;

        // WRITE
        chart.write("piediv");
    });
</script>

Index.cshtml

@model QLCLDA.Models.Chart.ChartDraw

@{
    ViewBag.Title = "Index";
}

<script src="~/Scripts/amcharts/amcharts.js"></script>
<script src="~/Scripts/amcharts/pie.js"></script>

@{
    Html.RenderPartial("PiePartial", Model.ProjectCount);
    Html.RenderPartial("PiePartial", Model.IsFailed);
}

<div id="piediv" style="width: 100%; height: 400px;"></div>

Calling with <div id="piediv"> just only show 1 chart of Model IsFailed, I think they have the same id="piediv" is the cause of it.

I want to show 2 pie charts with Model ProjectCount and IsFailed inside Index.cshtml

Answer 1

You can actually change your code and move holder container directly in PartialView:

Partial View "PieChart.cshtml":

@model Tuple<string, IEnumerable<QLCLDA.Models.Chart.ChartValue>>
@{
  var controlId = Model.First;
}
<div id="@controlId" style="width: 100%; height: 400px;"></div>

<script type="text/javascript">
    var chart;
    var legend;

    AmCharts.ready(function () {
        // PIE CHART
        chart = new AmCharts.AmPieChart();
        chart.dataProvider = @Html.Raw(Json.Encode(Model.Second));
        chart.titleField = "name";
        chart.valueField = "value";
        chart.outlineColor = "#FFFFFF";
        chart.outlineAlpha = 0.8;
        chart.outlineThickness = 2;

        // WRITE
        chart.write("@controlId");
    });
</script>

Index.cshtml

@model QLCLDA.Models.Chart.ChartDraw

@{
    ViewBag.Title = "Index";

    var ProjectCountData = new Tuple<string, IEnumerable<QLCLDA.Models.Chart.ChartValue>>("ProjectCount", Model.ProjectCount);

    var IsFailedData = new Tuple<string, IEnumerable<QLCLDA.Models.Chart.ChartValue>>("ProjectCount",IsFailed);
}

<script src="~/Scripts/amcharts/amcharts.js"></script>
<script src="~/Scripts/amcharts/pie.js"></script>

@{
    Html.RenderPartial("PiePartial", ProjectCountData);
    Html.RenderPartial("PiePartial", IsFailedData);
}

In that case you will have separated logic of creation charts from actual application logic and also you will be able to add as many charts as you want.