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.