A new version of the Google Visualization API was released to production on September 24, 2012

[visigoth]

We have pushed a new release to production.

Documentation (and the release notes page) will soon be updated to reflect the changes made in this release.

In the meantime, here is a short overview of what has been introduced:

Prominent changes

• HTML Tooltip - Support for custom HTML tooltip content for data points, categories and annotations (certain core charts only).
• Look Mom, No IFrame! - With the exception of IE 8, charts are no longer drawn inside an IFrame by default. If you're feelin' retro you can bring it back by setting the option forceIFrame: true.

Other changes

• Removed the strictFirstColumnType option. As you recall this was a temporary remedy for backward compatibility. Please refer to this help section for proper solutions.
• GeoChart: New option, tooltip.trigger, which works the same way as in the core charts.
• GeoChart: Improved border colors.
• ChartRangeFilter: You can now leave the control area while panning/zooming.
• ChartRangeFilter: Fixed occasional crash when moving one handles over another.
• Significant performance improvements when drawing charts with a domain axis of type date.

Enjoy,

The Google Chart Tools team

[visigoth]

Although complete documentation of the HTML tooltip is not ready yet, here is a teaser for those who really cannot wait.

Open the ColumnChart example in the visualization playground, replace the content of the example with the following, then press "Run Code":

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

function drawVisualization() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'Country');
  // Use custom HTML content for the domain tooltip.
  dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
  dataTable.addColumn('number', 'Gold');
  dataTable.addColumn('number', 'Silver');
  dataTable.addColumn('number', 'Bronze');

  dataTable.addRows([
    ['USA', createCustomHTMLContent('http://upload.wikimedia.org/wikipedia/commons/2/28/Flag_of_the_USA.svg', 46, 29, 29), 46, 29, 29],
    ['China', createCustomHTMLContent('http://upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg', 38, 27, 23), 38, 27, 23],
    ['UK', createCustomHTMLContent('http://upload.wikimedia.org/wikipedia/commons/a/ae/Flag_of_the_United_Kingdom.svg', 29, 17, 19), 29, 17, 19]
  ]);

  var options = {
    title: 'London Olympics Medals',
    colors: ['#FFD700', '#C0C0C0', '#8C7853'],
    focusTarget: 'category',
    // Use the new HTML tooltip (default SVG one does not support HTML content).
    tooltip: {isHtml: true}
  };

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('visualization')).draw(dataTable, options);
  }

function createCustomHTMLContent(flagURL, totalGold, totalSilver, totalBronze) {
  return '<div style="padding:5px 5px 5px 5px;">' +
      '<img src="' + flagURL + '" style="width:75px;height:50px"/><br/>' +
      '<table>' +
      '<tr>' +
      '<td><img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Gold_medal.svg" style="width:25px;height:25px"/><td/>' +
      '<td><b>' + totalGold + '<b/><td/>' +
      '<tr/>' +
      '<tr>' +
      '<td><img src="http://upload.wikimedia.org/wikipedia/commons/0/03/Silver_medal.svg" style="width:25px;height:25px"/><td/>' +
      '<td><b>' + totalSilver + '<b/><td/>' +
      '<tr/>' +
      '<tr>' +
      '<td><img src="http://upload.wikimedia.org/wikipedia/commons/5/52/Bronze_medal.svg" style="width:25px;height:25px"/><td/>' +
      '<td><b>' + totalBronze + '<b/><td/>' +
      '<tr/>' +
      '<table/>' +
      '<div/>';
}

---------------------------------------------------------------------------------------------------------------------------------------------------------------------
​

[mrishadali]

Hi, 

Thanks for the information. I was wondering bout the iFrame thing as I want to draw charts into the iFrame. After reading your topic I tried setting the AreaChart option  forceIFrame: true  but still it does not draw the chart in the iFrame.

I am usnig these functions  https://gist.github.com/1333906 to draw image in the iFrame.

Can you help me with that???

Thanks

[Eyal Cohen]

Could you please send me an example page of the AreaChart that ignores the forceIFrame option?

What browser are you using? What OS?

For me it works just fine (rechecked it right now with Chrome on Linux).

When I open the AreaChart example and add the forceIFrame flag to the options I see the IFrame added to the DOM. Without it, the IFrame is missing.

BTW, why do you need an IFrame?

Visigoth

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/ym5XEyAKzPkJ.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[mrishadali]

Q: BTW, why do you need an IFrame? 

A: I need to save the charts as static images.

I have tried Chrome,IE,Firefox and safari on both Windows and Linux. I used to work before this release.

I sent you this example. When you click the button 'Convert to Image' it shows the chart image in the iFrame. But now its not working.

Can you please try this and let me know if this is working for you or can you?

Here is the Example code:

<html>
  <head>
    <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
    <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
    <script>
      function getImgData(chartContainer) {
        var chartArea = chartContainer.getElementsByTagName('iframe')[0].
          contentDocument.getElementById('chartArea');
        var svg = chartArea.innerHTML;
        var doc = chartContainer.ownerDocument;
        var canvas = doc.createElement('canvas');
        canvas.setAttribute('width', chartArea.offsetWidth);
        canvas.setAttribute('height', chartArea.offsetHeight);
        canvas.setAttribute(
            'style',
            'position: absolute; ' +
            'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
            'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
        doc.body.appendChild(canvas);
        canvg(canvas, svg);
        var imgData = canvas.toDataURL("image/png");
        canvas.parentNode.removeChild(canvas);
        return imgData;
      }
      
      function saveAsImg(chartContainer) {
        var imgData = getImgData(chartContainer);
        
        // Replacing the mime-type will force the browser to trigger a download
        // rather than displaying the image in the browser window.
        window.location = imgData.replace("image/png", "image/octet-stream");
      }
      
      function toImg(chartContainer, imgContainer) { 
        var doc = chartContainer.ownerDocument;
        var img = doc.createElement('img');
        img.src = getImgData(chartContainer);
        
        while (imgContainer.firstChild) {
          imgContainer.removeChild(imgContainer.firstChild);
        }
        imgContainer.appendChild(img);
      }
    </script>
    <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() {
        // Area chart
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addRows(4);
        data.setValue(0, 0, '2004');
        data.setValue(0, 1, 1000);
        data.setValue(0, 2, 400);
        data.setValue(1, 0, '2005');
        data.setValue(1, 1, 1170);
        data.setValue(1, 2, 460);
        data.setValue(2, 0, '2006');
        data.setValue(2, 1, 860);
        data.setValue(2, 2, 580);
        data.setValue(3, 0, '2007');
        data.setValue(3, 1, 1030);
        data.setValue(3, 2, 540);

        var chart = new google.visualization.AreaChart(document.getElementById('line_div'));
        chart.draw(data, {width: 450, height: 300, forceIFrame: true, title: 'Company Performance'});
              
      }
    </script>
  </head>
  <body>
    <div id="img_div" style="position: fixed; top: 0; right: 0; z-index: 10; border: 1px solid #b9b9b9">
      Image will be placed here
    </div>
  <button onclick="toImg(document.getElementById('line_div'), document.getElementById('img_div'));">Convert to image</button>
    <div id="line_div"></div>    
      
</body>
</html>​ 

Thanks

[mrishadali]

Q: BTW, why do you need an IFrame? 

A: I need to convert the charts as static images, and I display those images into an IFrame.

[Eyal Cohen]

OK, so addition of forceIFrame: true to the LineChart fixes the first problem of the code searching for an 'iframe' element.

The next problem is that we used to have a div named 'chartArea', and this ID has been dropped from the div in this release.

Not sure if this was done intentionally or not (I'll further investigate on Thursday once the rest of the team is back from vacation).

In the meantime you can either change the code to traverse the DOM without assuming there is a 'chartArea' div, or use an older version of the library, such as 1.26 (the latter is less recommended).

HTH,

Visigoth

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/7KNUQu6sGkAJ.

[mrishadali]

OK, Thank you very much for your quick response. I will be waiting for the solution!!!

[mrishadali]

Hi  Visigoth,

Sorry to bother you again. Can you please tell me the package name of the release before this one. I tried {packages:["areachart","linechart"]} but they are very old and I need some features from the last version. Is it possible to load the version before this release. and how to do that???

Thanks

[Eyal Cohen]

No problem :)

The packages areachart, linechart etc. are over two years old and deprecated, please do not use them.

You can load package corechart just as you did, only specify "1.XX" instead of "1" to get release XX. Current release is 32.

Please note that we do not have frozen versions of all releases, so 1.31 for example will not work. I tried with 1.26 and it worked, but that release is about 9 months old.

You can start from 1.30 and go back until you find a release that works for you.

Sorry that I cannot be more specific, but I don't have access to the list of frozen versions we have from here (already home).

Please let me know how you are doing,

Visigoth

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/3MN8s9m6NpYJ.

[mrishadali]

Great..... Package 1.30 worked for me. 

 Thanks for your help. 

 Cheers

[mrishadali]

This is a great API but when you guys are adding a polar/Radar chart in the API. This would be great. I hope the next release will have polar charts as well something like this.....

I know everything cannot be available in one API but just wondering.

Thanks for you work. Great Job 

[asgallant]

I can't replicate the problem (see http://jsfiddle.net/asgallant/3kMXV/).  Can you post code that reproduces the issue?

On Tuesday, September 25, 2012 5:03:36 PM UTC-4, jlanz wrote:

I can confirm the problem with corechart package drawing lines and areas with dates (versions 1 and 1.1), you get different errors in different browsers, this one is in Chrome has no method 'getTime'

Version 1.30 is working for me also.

Thanks.

To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

[jlanz]

mmm interesting... I'm usign DataTables with setValue, something like this:

function drawc60() {

    data_c60 = new google.visualization

        .DataTable();

    data_c60.addColumn('string', 'id');

    data_c60.addColumn('date', 'date');

    data_c60.addColumn('number', 'total');

    data_c60.addRows(2);

    data_c60.setValue(0, 0, '0');

    data_c60.setValue(0, 1, new Date(2012, 8, 24));

    data_c60.setValue(0, 2, 167);

    data_c60.setValue(1, 0, '0');

    data_c60.setValue(1, 1, new Date(2012, 8, 25));

    data_c60.setValue(1, 2, 117);

addRows seems to be working in your example!

Best.

[asgallant]

I don't see any problem with that code either: http://jsfiddle.net/asgallant/3kMXV/3/ 

[Eyal Cohen]

For everyone facing the "Has no method getTime()" problem please see issue 1029 for assistance.

Release 32 performs stricter enforcement of option types, instead of simply ignoring wrongly specified ones.

If, for example, you specify a numeric baseline value for a date axis, this error will appear.


Please let me know if this solves your issues.


I will fix our own pages tomorrow. Thanks for drawing our attention to it!


Visigoth

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/5n0_IgIA0n8J.

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

To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

[jlanz]

OK! I figured the problem. The stricter enforcement in the newer relases bug me the setting I had for the hAxis for the graph.

 hAxis: {
            title: 'Totals',
            
            textPosition: 'out',
            
            minValue: 'auto',
            viewWindow: {
                min: 0    <--- THIS WAS THE PROBLEM! THE NUMBER IS ADDED AND PRODUCES THE ERROR
            }
        }

Removing that line will fix up all.

Thanks 

[asgallant]

You can use other data types for setting the viewWindow.min/max options, so if you have a Date type column, you can use a Date object for the min/max values.

[rio]

Thanks guys for your help. When i read about iframes being removed i was like QQ. Knew right away something would be broken.

Rolling back to corecharts 1.30 is a great makeshift solution.

[asgallant]

Try setting the "forceIFrame" option to true first, and then work on ironing out any issues with going iframe-less - it's a better long-term solution to the problem (though you should be aware that at some point in the future, the "forceIFrame" option will be removed entirely).

[Eyal Cohen]

Taking Andrew's suggestion one step further, I recommend limiting the usage of fixed versions to emergencies only.

As soon as a workaround is available for the latest version (stable or beta), please apply it and forsake any older version.

Note that we may delete fixed versions from time to time (there is a limit as to how many versions we can serve).

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/hMKzeVKY4bMJ.

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

To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

[visigoth]

I will post the list with the documentation (hopefully by tomorrow).

This is:

   LineChart, AreaChart, ComboChart, ColumnChart, BarChart, CandlestickChart, ScatterChart

Not supported yet:

  BubbleChart, PieChart, GeoChart

HTH,

Visigoth

On Thursday, October 4, 2012 1:29:37 AM UTC+2, ekanks wrote:

Is there a list of charts that support HTML tooltip? I don't see it in the documentation yet.

Thanks!