What causes the "Unknown renderer type" error in Google charts?

Hello, I am making a program to generate charts and started to appear this error in some, but the strange thing is that, the charts are generated from some selected checkbox, so when you select certain amount of checkbox from right, another amount from wrong, would anyone know how to tell me what causes this to try to fix this error?

Generate the graphs:

 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 graphs:

 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 />
}
Author: Carlos Eduardo, 2017-06-07

1 answers

The Line " google.charts.load ('current', {'packages': ['bar']}); " must be outside the loop.

The google method.charts.load can only be called Once on the page.

 1
Author: Elephpant, 2017-07-07 14:40:59