CODEWITHSUNDEEP
javascriptcsschartsgoogle-visualization
Priyank Dey
Priyank Dey

Reputation: 1124

How to use image in background instead of color for every column in google chart?

I am using google chart. I have created a column chart. In column chart I want to show the background image instead of background color in every column. Is it possible in google chart? How can I do this? Please share with me if any one have any idea.

My jsfiddle is here: http://jsfiddle.net/8fks1edf/

In image, I have marked where I want changes.

enter image description here

My Codes:

    <div id="e_mcf" style="height: 400px; width: 600px;"></div>

<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 dataTable = new google.visualization.DataTable();
 dataTable.addColumn('string', 'ABCD');
 dataTable.addColumn('number', 'Percentage');
 dataTable.addColumn({type: 'string', role: 'annotation'});
 dataTable.addColumn({type: 'string', role: 'style'});


 dataTable.addRows([
 ['AB', 61, '61%','#FF8B00'],

 ['CD', 90,'90%', '#FF2D00'],

 ['EF', 70,'70%','#0C8E86'],

 ['GH', 85,'85%','#0779CF'],

 ['IJ', 70,'70%','#27486B']
  ]);

var options = {

vAxis: {gridlines: {color: 'transparent', count: 0}, minValue: 0},

legend: 'none',
backgroundColor: { fill:'transparent' },
isStacked: true,
annotations: {
      textStyle: {
      fontName: 'Lucida Fax',
      fontSize: 10,
      bold: true,
      color: '#fff', 
      auraColor: 'transparent', 

    }
  }
  };
 var chart = new google.visualization.ColumnChart(document.getElementById('e_mcf'));
 chart.draw(dataTable, options);
  }


   </script>

Upvotes: 1

Views: 1374

Answers (1)

Tony Pogrebenko
Tony Pogrebenko

Reputation: 26

Creating image via svg pattern, appending it to the def and filling with it via fill attribute. enableInteractivity must be set to false.

   window.google.visualization.events.addListener(chart, 'ready', function () {

        var rectan = $('g g:first-of-type g:nth-of-type(2) rect');
        var patt = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');

        patt.setAttribute('id', 'img1');
        patt.setAttribute('patternUnits', 'userSpaceOnUse');
        patt.setAttribute('width', '20');
        patt.setAttribute('height', '287');




        var image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
        image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '../Images/bar.png');
        image.setAttribute('x', '0');
        image.setAttribute('y', '0');
        image.setAttribute('width', '20');
        image.setAttribute('height', '287');

        var defs = document.getElementsByTagName('defs')[0];

        patt.appendChild(image);
        defs.appendChild(patt);
        for (var i = 0; i < rectan.length; i++) {
            rectan[i].setAttribute("fill", "url(#img1)");
        }}

rectan is a rect element inside the column chart. You just need to change fill attribute for all "pie slices" after first drawing of the chart.

Upvotes: 1

Related Questions