CODEWITHSUNDEEP
jquerycharts
Pratik Sawant
Pratik Sawant

Reputation: 35

How to show Label on Google Column Charts

We have implemented google column charts in our application & we are binding data dyanmically to charts.

I want to show value of the graph on the top of each column charts.

enter image description here

var cols = [{ id: 'task', label: 'Employee Name', type: 'string' },
            { id: 'startDate', label: 'col1', type: 'number' },
            { id: 'startDate2', label: 'col2', type: 'number' },
            { id: 'startDate3', label: 'col3', type: 'number' }];

var rows = [{ c: [{ v: 'Frank' }, { v: 40 }, { v: 50 }, { v: 40 }] },
            { c: [{ v: 'Floyd' }, { v: 50 }, { v: 60 }, { v: 30 }] },
            { c: [{ v: 'Fritz' }, { v: 10 }, { v: 40 }, { v: 20 }] }];

var data = new google.visualization.DataTable({
   cols: cols,
   rows: rows
 })

var options = {
    height: 300,
    width: 900,
    chart: {
        title: 'Demand'
        //subtitle: 'distance on the left, brightness on the right'
    },        
};

var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, options);

Upvotes: 1

Views: 1825

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

in order to label the bars, you can use an annotation column.
see Column Roles

unfortunately, annotations don't work on Material Charts

the following example uses a DataView to add the annotation columns

google.charts.load('current', {
  callback: function () {
    var cols = [{ id: 'task', label: 'Employee Name', type: 'string' },
                { id: 'startDate', label: 'col1', type: 'number' },
                { id: 'startDate2', label: 'col2', type: 'number' },
                { id: 'startDate3', label: 'col3', type: 'number' }];

    var rows = [{ c: [{ v: 'Frank' }, { v: 40 }, { v: 50 }, { v: 40 }] },
                { c: [{ v: 'Floyd' }, { v: 50 }, { v: 60 }, { v: 30 }] },
                { c: [{ v: 'Fritz' }, { v: 10 }, { v: 40 }, { v: 20 }] }];

    var data = new google.visualization.DataTable({
     cols: cols,
     rows: rows
    });

    var view = new google.visualization.DataView(data);
    view.setColumns([0,
      1,
      {
        calc: "stringify",
        sourceColumn: 1,
        type: "string",
        role: "annotation"
      },
      2,
      {
        calc: "stringify",
        sourceColumn: 2,
        type: "string",
        role: "annotation"
      },
      3,
      {
        calc: "stringify",
        sourceColumn: 3,
        type: "string",
        role: "annotation"
      }
    ]);

    var options = {
        height: 300,
        width: 900,
        chart: {
          title: 'Demand'
          //subtitle: 'distance on the left, brightness on the right'
        },
    };

    // material chart
    var chart = new google.charts.Bar(document.getElementById('chart_div0'));
    chart.draw(view, options);

    // core chart
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div1'));
    chart.draw(view, options);
  },
  packages: ['bar', 'corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<h1>Core Chart</h1>
<div id="chart_div1"></div>
<h1>Material Chart</h1>
<div id="chart_div0"></div>

Upvotes: 2

Related Questions