CODEWITHSUNDEEP
javascriptjquerychartsgoogle-visualizationbar-chart
Ninita
Ninita

Reputation: 1249

Barchart/Columnchart - bars with same color on same serie

I think I already tried everything but I can't solve this problem.

For each company I need to group and show 3 bars with the color of that company and show it annotation for each bar.

I only can get something like this:

enter image description here

But what I really need is something like this: enter image description here

I already lost more than 1 day searching about this and I already tried everything but I can't find the solution...

This is my present code:

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

  var chart; var data; var options;

  function drawChart() {
    dataTable = new google.visualization.DataTable();

    dataTable.addColumn('string', 'Company');
    dataTable.addColumn({ label: 'Total', type: 'number', role: 'style', role: 'annotation' });
    dataTable.addColumn({ label: 'Sales', type: 'number', role: 'style', role: 'annotation' });
    dataTable.addColumn({ label: 'Expenses', type: 'number', role: 'style', role: 'annotation' });

    data.addRow(['Cristal',
                { v: 1400, color: '#b87333', annotation: 'All' },
                { v: 1000, color: '#b87333', annotation: 'S' },
                { v: 400, color: '#b87333', annotation: 'E' }]);

    data.addRow(['Disney',
                { v: 1630, color: '#e5e4e2', annotation: 'All' },
                { v: 1170, color: '#e5e4e2', annotation: 'S' },
                { v: 460, color: '#e5e4e2', annotation: 'E' }]);

    data.addRow(['Skoda',
                { v: 1780, color: '#d5d5e2', annotation: 'All' },
                { v: 660, color: '#d5d5e2', annotation: 'S' },
                { v: 1120, color: '#d5d5e2', annotation: 'E' }]);

    data.addRow(['Yamma',
                { v: 1570, color: '#a80c1b', annotation: 'All' },
                { v: 1030, color: '#a80c1b', annotation: 'S' },
                { v: 540, color: '#a80c1b', annotation: 'E' }]);


    options = {
        legend: 'none'
    };

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

JSFiddle code

However this is not working... How can I solve this?

Upvotes: 1

Views: 76

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

recommended changes...

  1. recommend using loader.js to load the library, vs. the older jsapi
    according to the release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.

this will only change the load statement (see snippet)

  1. two variables are used for the DataTable, data and dataTable
    data is never created, probably a typo
    also, when creating the DataTable, need to use the new keyword

dataTable = new google.visualization.DataTable();

  1. finally, both style and annotation should have their own columns
    see following working snippet... 

google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart']
});


function drawChart() {
  var chart; var dataTable; var options;

  dataTable = new google.visualization.DataTable();

  dataTable.addColumn('string', 'Company');
  dataTable.addColumn({label: 'Total', type: 'number'});
  dataTable.addColumn({role: 'style', type: 'string'});
  dataTable.addColumn({role: 'annotation', type: 'string'});

  dataTable.addColumn({label: 'Sales', type: 'number'});
  dataTable.addColumn({role: 'style', type: 'string'});
  dataTable.addColumn({role: 'annotation', type: 'string'});

  dataTable.addColumn({label: 'Expenses', type: 'number'});
  dataTable.addColumn({role: 'style', type: 'string'});
  dataTable.addColumn({role: 'annotation', type: 'string'});

  dataTable.addRow(['Cristal',
    {v: 1400}, {v: '#b87333'}, {v: 'All'},
    {v: 1000}, {v: '#b87333'}, {v: 'S'},
    {v:  400}, {v: '#b87333'}, {v: 'E'}
  ]);

  dataTable.addRow(['Disney',
    {v: 1630}, {v: '#e5e4e2'}, {v: 'All'},
    {v: 1170}, {v: '#e5e4e2'}, {v: 'S'},
    {v:  460}, {v: '#e5e4e2'}, {v: 'E'}
  ]);

  dataTable.addRow(['Skoda',
    {v: 1780}, {v: '#d5d5e2'}, {v: 'All'},
    {v:  660}, {v: '#d5d5e2'}, {v: 'S'},
    {v: 1120}, {v: '#d5d5e2'}, {v: 'E'}
  ]);

  dataTable.addRow(['Yamma',
    {v: 1570}, {v: '#a80c1b'}, {v: 'All'},
    {v: 1030}, {v: '#a80c1b'}, {v: 'S'},
    {v:  540}, {v: '#a80c1b'}, {v: 'E'}
  ]);

  options = {
    legend: 'none'
  };

  chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(dataTable, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 2

Related Questions