Export google chart in a dashboard as png -


i trying export google chart in dashboard png image through button. following error-

one or more participants failed draw() undefined not function

here code:

<html>   <head>     <!--load ajax api-->     <script type="text/javascript" src="https://www.google.com/jsapi"></script>     <script type="text/javascript">        // load visualization api , controls package.       google.load('visualization', '1.0', {'packages':['controls']});        // set callback run when google visualization api loaded.       google.setonloadcallback(drawdashboard);        // callback creates , populates data table,       // instantiates dashboard, range slider , pie chart,       // passes in data , draws it.       function drawdashboard() {          // create our data table.         var data = google.visualization.arraytodatatable([           ['name', 'donuts eaten'],           ['michael' , 5],           ['elisa', 7],           ['robert', 3],           ['john', 2],           ['jessica', 6],           ['aaron', 1],           ['margareth', 8]         ]);            // create dashboard.         var dashboard = new google.visualization.dashboard(             document.getelementbyid('dashboard_div'));          // create range slider, passing options         var select = new google.visualization.controlwrapper({           'controltype': 'categoryfilter',           'containerid': 'filter_div',           'options': {             'filtercolumnlabel': 'donuts eaten'           }         });          // create pie chart, passing options         var chart = new google.visualization.chartwrapper({           'charttype': 'columnchart',           'containerid': 'chart_div',           'options': {             'width': 500,             'height': 300,             'legend': 'right'           }         });          google.visualization.events.addlistener(chart, 'ready', function(e) {                 document.getelementbyid('png').outerhtml = '<a href="' + chart.getimageuri() + '">printable version</a>';         });          // establish dependencies, declaring 'filter' drives 'piechart',         // pie chart display entries let through         // given chosen slider range.         dashboard.bind(select, chart);          // draw dashboard.         dashboard.draw(data);       }     </script>   </head>    <body>     <div id='png'></div>     <!--div hold dashboard-->     <div id="dashboard_div">               <!--divs hold each control , chart-->       <div id="filter_div"></div>       <div id="chart_div"></div>     </div>   </body> </html> 

please me going wrong.

a fiddle helps!

https://jsfiddle.net/kujxsn7z/

the things changed:

  • created div hold png output attempt call
  • getimageuri() failing because applying on chartwrapper, not on chart object. fix need call, in instance:

    chart.getchart().getimageuri()

so reference chartwrapper, use getchart refer chart contains, , execute getimageiri() on chart object itself.


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -