google visualisation - role: style feature not working?

[jonnyG]

Hi

New to this group...

the style feature looks great but the one described in bar and column chart is not working in the playground (or in my site)...any one any ideas?

Am I missing something obvious??

function drawVisualization() {
  // Create and populate the data table.
   var data = google.visualization.arrayToDataTable([
 

//this bit from the section on how to color in bar charts

 ['Element', 'Density', { role: 'style' }],
        ['Copper', 8.94, '#b87333'],            // RGB value
  ['Silver', 10.49, 'silver'],            // English color name
  ['Gold', 19.30, 'gold'],
  ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

  // Create and draw the visualization.
  new google.visualization.BarChart(document.getElementById('visualization')).
      draw(data,
           {title:"not working",
            width:600, height:400,
           
            vAxis: {title: "Year"},
            hAxis: {title: "Cups"}}
      );
}

Try pasting into the playground - only works occasionally, other times returns 'All series on a given axis must be of the same data type

[Daniel LaLiberte]

Hi Jonny,

I tried your example in the playground, and it seems to work consistently for me.  I wonder if you are seeing a problem due to some caching.  If so, this could clear up on its own as caches get flushed.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, 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.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[asgallant]

If that is the case, then it would work consistently after the cache was flushed.

Jonny, clear your browser cache and try again, that should verify if it is a cache issue.

To unsubscribe from this group and stop receiving emails from it, 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.

--

Daniel LaLiberte  - 978-394-1058

dlali...@Google.com   5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

[jonnyG]

Have cleared the cache. Like Daniel when I tried again last night it worked perfectly and consistently. Now cleared cache but code not working again in playground or site.

Have tried in several browsers but same issue.

[Camille BOISSEL]

I have the same problem.

[Kevin Berry]

I'm having this same issue as well.

[Kevin Berry]

I found the issue for this.  Apparently arrayToDataTable does not assign roles properly.  If you add  "data.setColumnProperty(2, 'role', 'style');" after you create the data table it will assign the role properly.  This error issue for me, but there still seems to be some sort of caching issue.  I never get the error but some more times then not the style is just ignored.  If you find anyway to fix that I would love to know.

[Sergey Grabkovsky]

Hi Kevin, can you give me a case where the arrayToDataTable doesn't assign a column role properly? I tried the example given and it worked perfectly for me. It might be that you guys are getting older versions of the code sometimes, but I don't see why that would be.

- Sergey

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

[Kevin Berry]

I was actually having the issue with the example given in the docs.  Below is what I am doing know.  If I remove the 2 setColumnProperty lines then I get the “All series on a given axis must be of the same data type” error.  With those 2 lines I don’t get that error any longer, but the style and annotation are ignored most of the time.  Every once in  while when I refresh the page it will render the annotation and style properly.

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

      google.setOnLoadCallback(drawChart);

      function drawChart() {

  var data = google.visualization.arrayToDataTable([

            ['Type', 'Laps', { role: 'annotation' },  { role: 'style' }],

                ['Mastersbilt',25, 'Mastersbilt', 'color:green'],

                ['Chevy (32 CI)',25, 'Chevy (32 CI)', 'color:green'],

          ]);

          data.setColumnProperty(2, 'role', 'annotation');

          data.setColumnProperty(3, 'role', 'style');

          var options = {

            title: 'Usage Chart',

            vAxis: {titleTextStyle: {color: 'red'}},

            hAxis: {title:'Laps',minValue:0},

            legend:{position:'none'},

            fontName:"proxima-nova",

            backgroundColor: { fill:'transparent' },

            chartArea: {left:100, width: 400},

          };

          var chart = new google.visualization.BarChart(document.getElementById('testchart'));

          chart.draw(data, options);

      }

Thanks,

  Kevin

- Sergey

To unsubscribe from this group and stop receiving emails from it, 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.

--

Daniel LaLiberte  - 978-394-1058

dlali...@Google.com   5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, 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.

--
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/xfcR1zC0J_A/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Sergey Grabkovsky]

It's really odd that you're seeing that error. Everything works well for me without those lines. What browser and operating system are you using?

- Sergey

[Kevin Berry]

I’m using Chrome on OS X Mavericks.  This is running off my local host with in a rails app.

Thanks,

  Kevin

[Sergey Grabkovsky]

That's really weird. What is the URL that is being requested when you load the library? You can find this in the Network tab of the Chrome developer tools. It should look something like https://www.google.com/uds/api/visualization/1.1/85433ced5f4f5ecf8f1c2c20eb7b5d63/format+en,default+en,ui+en,corechart+en.I.js.

- Sergey

[Kevin Berry]

This is the link that I am seeing.  I am working on a project that was started before me and I have never used google visualizations before.  It appears their is also a local copy of googlechartapi.js should that be there.  Here is the other link I am seeing.

format+en,default,corechart.I.js

www.google.com/uds/api/visualization/1.0/d780f2951a73e815f003b2b487c1d0a3

Thanks,

  Kevin

[Kevin Berry]

Everything starts working if I change the version of the library to load from “1.0” to “1.1”.  This seems to be a problem with the “1.0” version of the library.

Thanks,

  Kevin

[jonnyG]

Hi Guys

Still got the same problem and been testing it on different browsers, pages, servers. Also on different computers so no a cache problem?

Here is a simple webpage that works fine on occasions and gives errors on occasions, in chrome, firefox, IE8, local host and on site server:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript">

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

      google.setOnLoadCallback(drawChart);

      function drawChart() {

 var data2 = google.visualization.arrayToDataTable([

['Element', 'Score', { role: 'style' } ],

        ['You', 60,'color: #aa0000' ],

['Average', 70,'color: #0000ff' ],

      ]);

        var options = {

         title:"How did you do?",

titleTextStyle:{fontSize:16,},

legend: { position: "none" },

      hAxis: {title: "% Score  (vs. World Average)", minValue:0, maxValue:100, titleTextStyle:{fontSize:12,}}

        };

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

chart.draw(data2, options);

      }

    </script>

    

<title>test</title>

<table width="80%">

<tr><td> <div id="chart_div"></div></td></tr>

      </table>

</body>

</html>

 

Still get the same error message about 1 go in 10 then locks for a while.

messs

[Kevin Berry]

If you change the version of the visualisation library from 1.0 to 1.1 it will fix your issue.

[asgallant]

Just to confirm that there's not something weird going on with your servers, try this fiddle: http://jsfiddle.net/asgallant/3VA2t/.  Do you get the same problem there?

The only thing I noticed in your script is that you have a couple of errant commas that will make IE throw a fit:

['Average', 70,'color: #0000ff' ], <-- this comma

and:

{fontSize:12,} <-- this comma

[jonnyG]

Just to check , change it here...

google.load('visualization', '1.1', {packages:['corechart'], callback: drawChart});

As this seems to do the trick 

I got the same problem in the jsfiddle from asgallant until I changed this line...

Thanks both for advice.

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

[asgallant]

That's really odd.  I get no problems with the fiddle at all, in any browser.

[Sergey Grabkovsky]

That's really odd, Kevin. That's not the link that I see when I load 1.0. For me, it loads https://www.google.com/uds/api/visualization/1.0/85433ced5f4f5ecf8f1c2c20eb7b5d63/format+en,default+en,ui+en,corechart+en.I.js. It seems like there is a caching issue or something. Did you say that clearing your cache doesn't help?

- Sergey