Close Icon
How to create Image of Google Chart

How to create of Google PNG Chart on your .

TO create image of on your website now it is easy with the help of Java Script. Now a we can add PNG charts on our website in the Java Script there is to add the PNG Charts. **NOTE** This will only work in browsers that support the HTML5element, and so won't work on Internet Explorer 9 or earlier.

// <![CDATA[
google.load("visualization", '1', {packages:['corechart']});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Element', 'Density', { role: 'style' }],
        ['ASP.NET', 15.49, 'silver'],
        ['JavaScript', 19.30, 'color: #e5e4e2'],
        ['PHP', 21.45, 'gold' ],
      ]);
      var options = {
        title: "What's the best language to build a website???",
        bar: {groupWidth: '95%'},
        legend: 'none',
      };

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

      // Wait for the chart to finish drawing before calling the getImageURI() method.
      <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15498732923586390863506">google</gwmw><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15498732923586062373120">.</gwmw>visualization<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15498732923581272571199">.</gwmw>events<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15498732923586571369262">.</gwmw><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15498732923585878085041">addListener</gwmw><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15498732923583682163208">(</gwmw>chart, 'ready', function () <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15498732923583974169108">{
        </gwmw>chart_div<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15498732923582629103030">.</gwmw><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15498732923598686044182">innerHTML</gwmw> = '<<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15498732923599977959853">img</gwmw> <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15498732923593563441606">src</gwmw>="' + chart<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15498732923599351423136">.</gwmw><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15498732923592900953284">getImageURI</gwmw><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15498732923593378777445">(</gwmw>) + '">';
        console.log<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15498732923595144476441">(</gwmw>chart_div<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15498732923597872648370">.</gwmw><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15498732923599211915293">innerHTML</gwmw>);<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15498732923592601960155">
      }</gwmw>);

      chart<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15498732923592130895404">.</gwmw>draw<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15498732923591739943440">(</gwmw>data, options);<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15498732923594939328899">

  }</gwmw>
//<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15498732923592023699736"> ]</gwmw><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15498732923596425027743">]</gwmw>>
// ]]>

When that URI is placed directly into a browser address bar, modern browsers will render the image: languageChart

Previous Post Next Post

Thank you for contacting us !

Our Team will get in touch with you soon or call 9205004404 now to get answer for all your queries !

Like Our Facebook page to be up to date in industry !