CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
user1888955
user1888955

Reputation: 626

Add description in column chart by Google Charts?

I would like to replace "Step 1" in the screenshot below with the actual text in the table.

I think tooltip probably could help, but just didn't figure it out yet... Here is my code: 

initGoolgeChart : function() {
    // Load the Visualization API and the corechart package.
    google.charts.load("current", {"packages": ["bar"] });

    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(MigrationMonitor.drawCharts);
},

drawCharts : function() {
    if(MigrationMonitor.dynamicFields.chartData != null && MigrationMonitor.dynamicFields.chartData.length > 0) {

        var data = google.visualization.arrayToDataTable(MigrationMonitor.dynamicFields.chartData);

        // won't work, don't know how i can add steps here then...
        // data.addColumn({type:"string", role: "tooltip"});

        // // Set chart options
        var options = {
            chart : {
                title : "Build: " + MigrationMonitor.dynamicFields.chartTitle[1] + " VS " + MigrationMonitor.dynamicFields.chartTitle[2]
            }
        };

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

enter image description here

Upvotes: 3

Views: 1188

Answers (2)

vishva8kumara
vishva8kumara

Reputation: 355

This can be easily accomplished if you could iterate the data and add to a blank google.visualization.DataTable

Simply initialize it like this:

var data = new google.visualization.DataTable()

Then you can add columns like this:

data.addColumn('number', 'time');

For the column that will be used for the ToolTip:

 data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

Then you can add rows to this blank DataTable as follows:

dataTable.addRows([[10, 'tooltip for 10'], [20, 'tooltip for 20']]);

Probably your MigrationMonitor.dynamicFields.chartData will fit in there without the need to iterate.

Also there is an option tooltip: { isHtml: true } if you want to make tooltips HTML.

This is fully documented on the following link https://developers.google.com/chart/interactive/docs/customizing_tooltip_content

Upvotes: 0

WhiteHat
WhiteHat

Reputation: 61222

use object notation to provide the value (v:) and formatted value (f:)
for the first column

the tooltip will display the formatted value (f:) by default

see following working snippet... 

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Step', 'Build: 22850', 'Build: 22852'],
      [{v: 'Step 1', f: 'Pre-migration tasks'}, {v: 66, f: '66 (s)'}, {v: 67, f: '67 (s)'}],
      [{v: 'Step 2', f: 'Dropping SP, Triggers, Views, and Functions'}, {v: 6, f: '6 (s)'}, {v: 7, f: '7 (s)'}]
    ]);

    var container = document.getElementById('chart_div');
    var chart = new google.charts.Bar(container);
    chart.draw(data);
  },
  packages: ['bar']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

if you're not able to provide the value using object notation, or it's just too inconvenient,
use the setFormattedValue method,

see following working snippet... 

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Step', 'Build: 22850', 'Build: 22852'],
      ['Step 1', 66, 67],
      ['Step 2', 6, 7]
    ]);

    var formatNumber = new google.visualization.NumberFormat({
      pattern: '0 (s)'
    });
    formatNumber.format(data, 1);

    for (var i = 0; i < data.getNumberOfRows(); i++) {
      switch (data.getValue(i, 0)) {
        case 'Step 1':
          data.setFormattedValue(i, 0, 'Pre-migration tasks');
          break;

        case 'Step 2':
          data.setFormattedValue(i, 0, 'Dropping SP, Triggers, Views, and Functions');
          break;
      }
    }

    var container = document.getElementById('chart_div');
    var chart = new google.charts.Bar(container);
    chart.draw(data);
  },
  packages: ['bar']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 3

Related Questions