Generate the graphics:
for (int j = 0; j < @Model.pdisAno.Count; j++)
{
<script type="text/javascript">
google.charts.load('current', { 'packages': ['bar'] });
var teste = "teste" + @j
google.charts.setOnLoadCallback(teste)
function teste() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Ano');
data.addColumn('number', 'Quantidade de Operadores');
@for (int i = 0; i < @Model.AnosPdi[j].Count; i++)
{
@: data.addRow(['@Model.AnosPdi[j][i]',@Model.conAnos[j][i]]);
}
var options = {
chart: {
title: '@Model.pdisAno[j]',
subtitle: 'Quantidade de Operarios por ano'
},
chartArea: { width: '100%', height: '50%' }
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material' + '@j'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
}
This part to generate the divs and show the graphics:
for (int i = 0; i < @Model.pdisAno.Count; i = i + 3)
{
string nome1 = "columnchart_material" + i;
string nome2 = "columnchart_material" + (i + 1);
string nome3 = "columnchart_material" + (i + 2);
<table style="width:100%">
<tr>
<td style="width:30%">
<div id="@nome1" style="height:250px;"></div>
</td>
<td style="width:30%">
<div id="@nome2" style="height:250px;"></div>
</td>
<td style="width:30%">
<div id="@nome3" style="height:250px;"></div>
</td>
</tr>
</table>
<br />
}