Hi, I’m trying to insert multiple pie charts inside my web page but they don’t load and I don’t understand exactly why.
I put the script to create my charts inside a loop that will feed the different charts with its designated data.
Here is the loop that should create the charts:
for (int i = 0; i < Model.ListButtons.Count(); i++)
{
int ok = (int)Model.ListButtonChart[i][0].Percentage;
int warning = (int)Model.ListButtonChart[i][1].Percentage;
int nok = (int)Model.ListButtonChart[i][2].Percentage;
int na = (int)Model.ListButtonChart[i][3].Percentage;
<span>@Model.ListButtons[i].Name</span>
ViewBag.myId = "button" + i;
<div id="@ViewBag.myId" style="height: 150px; width: 150px;"></div>
<script type="text/javascript">
window.onload = function () {
var test = "test";
console.log(test);
var chartData = @Html.Raw(@JsonConvert.SerializeObject(Model.ListButtonChart));
console.log(chartData[@i]);
var chart = new CanvasJS.Chart(@Html.Raw(@JsonConvert.SerializeObject(@ViewData["myId"])), {
title: {
text: @Html.Raw(@JsonConvert.SerializeObject(@Model.ListButtons[i].Name)),
},
data: [
{ y: chartData[0].Percentage, legendText: chartData[0].Name },
{ y: chartData[1].Percentage, legendText: chartData[1].Name },
{ y: chartData[2].Percentage, legendText: chartData[2].Name },
]
});
chart.render();
};
</script>
}
It seems that the script does not beyond the “windows.onload” line and I have no idea why.
If anybody can help me I would be very grateful!
.
