google.visualization.arrayToDataTable IE8 not working

[Alex Felix]

Hi Guys!

I have this code below to draw charts. It works fine on IE10/11 Firefox e Chrome.

var array_data=[['Dia', 'Sucesso', 'Erro']];

var teste=[];

  

      google.load("visualization", "1.0", {packages:["corechart"]});

      google.setOnLoadCallback(drawChartSucess);     

      google.setOnLoadCallback(drawChartSucessMonthTotal);

      google.setOnLoadCallback(drawChartSucessMonth);   

      google.setOnLoadCallback(drawChartSucessPercent); 

      google.setOnLoadCallback(drawChartSucessPercentMonth);

      google.setOnLoadCallback(drawChart);

      google.setOnLoadCallback(drawChart2);

     function drawChartSucess() {

        var array_tmp3 = array_sucess.slice(Math.max(1,array_sucess.length-20),array_sucess.length);

        array_data = array_data.concat(array_tmp3);

        var options = {

          title: 'Logins Portal AutoAtendimento - Sucesso Vs Erro - Diario',

          hAxis: {title: 'Dia', titleTextStyle: {color: 'blue'}},

          yAxis: {title: 'Acessos', titleTextStyle: {color: 'blue'}},

          bar:   {groupWidth:   '90%'},

          colors:['#109618','#dc3912']

        };

var data = google.visualization.arrayToDataTable(array_data,options);

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div_sucesso'));

        chart.draw(data, options);

      }

    function drawChartSucessMonthTotal() {

        var array_data=[['Dia', 'Sucesso', 'Erro']];

        var array_tmp134 = array_sucess_month_total.slice(Math.max(1,array_sucess_month_total.length-12),array_sucess_month_total.length);

        array_data = array_data.concat(array_tmp134);

        var data = google.visualization.arrayToDataTable(array_data);

        var options = {

          title: 'Logins Portal AutoAtendimento - Sucesso Vs Erro - Total - Mensal',

          hAxis: {title: 'Mes', titleTextStyle: {color: 'blue'}},

          yAxis: {title: 'Acessos', titleTextStyle: {color: 'blue'}},

          bar:   {groupWidth:   '90%'},

          colors:['#109618','#dc3912']

        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div_sucesso_month_total'));

        chart.draw(data, options);

      }

     function drawChartSucessMonth() {

        var array_data=[['Dia', 'Sucesso', 'Erro']];

        var array_tmp14 = array_sucess_month.slice(Math.max(1,array_sucess_month.length-12),array_sucess_month.length);

        array_data = array_data.concat(array_tmp14);

        var data = google.visualization.arrayToDataTable(array_data);

        var options = {

          title: 'Logins Portal AutoAtendimento - Sucesso Vs Erro - Media - Mensal',

          hAxis: {title: 'Mes', titleTextStyle: {color: 'blue'}},

          yAxis: {title: 'Acessos', titleTextStyle: {color: 'blue'}},

          bar:   {groupWidth:   '90%'},

          colors:['#109618','#dc3912']

        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div_sucesso_month'));

        chart.draw(data, options);

      }

  function drawChartSucessPercent() {

        var array_data=[['Dia', 'Sucesso', 'Erro']]; 

        var array_tmp4 = array_sucess_percent.slice(Math.max(1,array_sucess_percent.length-20),array_sucess_percent.length);

        array_data = array_data.concat(array_tmp4);

        var data = google.visualization.arrayToDataTable(array_data);

        var options = {

          title: 'Logins Portal AutoAtendimento - Sucesso Vs Erro - Percentagem - Diario',

          hAxis: {title: 'Dia', titleTextStyle: {color: 'blue'}},

          yAxis: {title: 'Acessos', titleTextStyle: {color: 'blue'}},

          bar:   {groupWidth:   '90%'},

          colors:['#109618','#dc3912']

        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div_sucesso_percent'));

        chart.draw(data, options);

      }

function drawChartSucessPercentMonth() {

        var array_data=[['Dia', 'Sucesso', 'Erro']];

        var array_tmp47 = array_sucess_percent_month.slice(Math.max(1,array_sucess_percent_month.length-20),array_sucess_percent_month.length);

        array_data = array_data.concat(array_tmp47);

        var data = google.visualization.arrayToDataTable(array_data);

        var options = {

          title: 'Logins Portal AutoAtendimento - Sucesso Vs Erro - Percentagem - Mensal',

          hAxis: {title: 'Mes', titleTextStyle: {color: 'blue'}},

          yAxis: {title: 'Acessos', titleTextStyle: {color: 'blue'}},

          bar:   {groupWidth:   '90%'},

          colors:['#109618','#dc3912']

        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div_sucesso_percent_month'));

        chart.draw(data, options);

      }

      function drawChart() {

        var array_data=[['Dia', 'Sucesso', 'Erro', 'Usuario Invalido', 'Senha Errada', 'Usuario Bloqueado']];

var array_tmp = array.slice(Math.max(1,array.length-20),array.length);

array_data = array_data.concat(array_tmp);

        var data = google.visualization.arrayToDataTable(array_data);

        var options = {

          title: 'Logins Portal AutoAtendimento - Todos os casos',

          hAxis: {title: 'Dia', titleTextStyle: {color: 'blue'}},

          yAxis: {title: 'Acessos', titleTextStyle: {color: 'blue'}},

 bar:   {groupWidth: '90%'},

 colors:['#109618','#dc3912','#ff9900','#3366cc','#990099']

        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

        chart.draw(data, options);

      }

      function drawChart2() {

var array_data=[['Dia', 'Erro', 'Usuario Invalido', 'Senha Errada', 'Usuario Bloqueado']];

var array_tmp2 = array_percent.slice(Math.max(1,array_percent.length-20),array_percent.length);

array_data = array_data.concat(array_tmp2);

        var data2 = google.visualization.arrayToDataTable(array_data);

        var options = {

          title: 'Tipos de Erros de Logins em Percentagem',

          hAxis: {title: 'Dia', titleTextStyle: {color: 'blue'}},

          yAxis: {title: 'Acessos', titleTextStyle: {color: 'blue'}},

 bar:   {groupWidth: '90%'},

 colors:['#dc3912','#ff9900','#3366cc','#990099']

        };

        var chart2 = new google.visualization.ColumnChart(document.getElementById('chart_div2'));

        chart2.draw(data2, options);

      }

When the var data is declared, I get this error:

SCRIPT5022: Invalid row type for row 19 Arquivo: format+pt_BR,default+pt_BR,ui+pt_BR,corechart+pt_BR.I.js Linha: 173 Coluna: 455

Do you guys have any idea of what should be done to fix my code?

Any help will be appreciated. 

[asgallant]

What does array_data contain when that error is thrown?

As an aside, using multiple calls to google.setOnLoadCallback is not supported.  You need to use one callback that then calls your other functions:

google.setOnLoadCallback(function () {     

    drawChartSucessMonthTotal();

    drawChartSucessMonth();   

    drawChartSucessPercent(); 

    drawChartSucessPercentMonth();

    drawChart();

    drawChart2();

});

[Alexandro Felix]

Hi asgallant!

This is what array_data has by the time I get the error:

array_data [Dia,Sucesso,Erro,01-2014,3025909,52644,09-2013,3653911,78671,10-2013,4561530,147099,11-2013,3602919,89064,12-2013,3467523,56605,]

I already set the callback as you told me to do, but it remains the same.

Thanks for your help!

Regards,

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/QiJzV7RNH5o/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

--

Alexandro Felix

[asgallant]

First, the reason IE8 is not working is because you have an errant comma at the end of the array:

[...56605,] <-- this comma causes IE8 to bomb

Second, you need to quote the strings in the array.  Third, the array is not correct for using with the arrayToDataTable method.  Each row of data needs to be a sub-array inside the main array, like this:

[

     ['Dia','Sucesso','Erro'],

     ['01-2014',3025909,52644],

     ['09-2013',3653911,78671],

     ['10-2013',4561530,147099],

     ['11-2013',3602919,89064],

     ['12-2013',3467523,56605]

]

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

--

Alexandro Felix

[Alexandro Felix]

Nice! I got your point.

This line is not working as expected and is return this: [01-2014,3025909,52644,09-2013,3653911,78671,10-2013,4561530,147099,11-2013,3602919,89064,12-2013,3467523,56605,]

So when I use concat it become this: [Dia,Sucesso,Erro,01-2014,3025909,52644,09-2013,3653911,78671,10-2013,4561530,147099,11-2013,3602919,89064,12-2013,3467523,56605,]

I'll how to threat this code.

I'm not that familiar with js, so if you have anything to add so I could get it done. It would be very nice!

Thanks!

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

--

Alexandro Felix

[asgallant]

How are you creating that array?

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.

Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

--

Alexandro Felix

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/QiJzV7RNH5o/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

--

Alexandro Felix

[Alexandro Felix]

Hi asgallant!

These arrays are defined in the js imported.

<script type="text/javascript" src="dados.js"></script>

    <script type="text/javascript" src="dados_percent.js"></script>

    <script type="text/javascript" src="dados_sucess.js"></script>

    <script type="text/javascript" src="dados_sucess_month.js"></script>

    <script type="text/javascript" src="dados_sucess_month_total.js"></script>

    <script type="text/javascript" src="dados_sucess_percent.js"></script>

    <script type="text/javascript" src="dados_sucess_percent_month.js"></script>

    <script type="text/javascript">

He are how the arrays look like:

var array_sucess_month=[

        ['Dia', 'Sucesso', 'Erro'],

        ['01-2014',116381,2025],

        ['09-2013',121797,2622],

        ['10-2013',147146,4745],

        ['11-2013',120097,2969],

        ['12-2013',111856,1826]

]

I removed the last comma from the array. The content of the array is ok now. But the message changed and now it gives me this:   'google.visualization.ColumnChart' is null or not an object

Thanks!

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

--

Alexandro Felix

[asgallant]

I would expect to see that error if the API is not finished loading, or if you loaded the wrong package, when you try to create the chart object.  Can you post the full code as it is now?

[Alexandro Felix]

Sure!

That's the entire code right here.

I'm also attaching the js with the arrays so you can test everything as it is. And also the api.

Thanks!

<html>

  <head>

   <!-- <script type="text/javascript" src="../../jsapi.js"></script>-->

    <script type="text/javascript" src="jsapi1.js"></script>

    <script type="text/javascript" src="dados.js"></script>

    <script type="text/javascript" src="dados_percent.js"></script>

    <script type="text/javascript" src="dados_sucess.js"></script>

    <script type="text/javascript" src="dados_sucess_month.js"></script>

    <script type="text/javascript" src="dados_sucess_month_total.js"></script>

    <script type="text/javascript" src="dados_sucess_percent.js"></script>

    <script type="text/javascript" src="dados_sucess_percent_month.js"></script>

    <script type="text/javascript">

<!--var array_data=[]-->  

      google.load("visualization", "1.0", {packages:["corechart"]});

 

 google.setOnLoadCallback(function () {     

drawChartSucessMonthTotal();

drawChartSucessMonth();   

drawChartSucessPercent(); 

drawChartSucessPercentMonth();

drawChart();

drawChart2();

});

      

     function drawChartSucess() {

        var array_tmp3 = array_sucess.slice(Math.max(1,array_sucess.length-15),array_sucess.length);

        array_data = array_data.concat(array_tmp3);

        var options = {

          title: 'Logins Portal AutoAtendimento - Sucesso Vs Erro - Diario',

          hAxis: {title: 'Dia', titleTextStyle: {color: 'blue'}},

         yAxis: {title: 'Acessos', titleTextStyle: {color: 'blue'}},

          bar:   {groupWidth:   '90%'},

          colors:['#109618','#dc3912']

        };

var data = new google.visualization.arrayToDataTable(array_data);

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div_sucesso'));

        chart.draw(data, options);

      }

    function drawChartSucessMonthTotal() {

        var array_data=[['Dia', 'Sucesso', 'Erro']];

        var array_tmp134 = array_sucess_month_total.slice(Math.max(1,array_sucess_month_total.length-12),array_sucess_month_total.length);

        array_data = array_data.concat(array_tmp134);

       var options = {

          title: 'Logins Portal AutoAtendimento - Sucesso Vs Erro - Total - Mensal',

          hAxis: {title: 'Mes', titleTextStyle: {color: 'blue'}},

          yAxis: {title: 'Acessos', titleTextStyle: {color: 'blue'}},

          bar:   {groupWidth:   '90%'},

          colors:['#109618','#dc3912']

        };

        var data = new google.visualization.arrayToDataTable(array_data);

    </script>

  </head>

  <body>

    <h1 align="center">Login - Estatisticas</h1>

    <div id="chart_div_sucesso" style="width: 980px; height: 500px;"></div>

    <div id="chart_div_sucesso_month_total" style="width: 980px; height: 500px;"></div>

    <div id="chart_div_sucesso_month" style="width: 980px; height: 500px;"></div>

    <div id="chart_div_sucesso_percent" style="width: 980px; height: 500px;"></div>

    <div id="chart_div_sucesso_percent_month" style="width: 980px; height: 500px;"></div>

    <div id="chart_div" style="width: 980px; height: 500px;"></div>

    <div id="chart_div2" style="width: 980px; height: 500px;"></div>

  </body>

</html>

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

--

Alexandro Felix

[asgallant]

I made a jsfiddle based on that code, and it seems to be working fine for me: http://jsfiddle.net/asgallant/5pbF2/embedded/result/.  I tested it in Chrome, Firefox, IE 8/9/10.  The only thing I see that might trip things up is your local copy of the jsapi.js file.  Is there a reason you have a local copy?  Does the problem persist if you remove that line?

[Alexandro Felix]

Hey man! it worked great! You are my hero now! Just saved my life!

Thanks!

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

--

Alexandro Felix