Add total label ChartWrapper Google Chart

2
votes

How can I add total label on each column to ChartWrapper google chart? I tryed to search into documentation from google charts, but I'm new in google chart and is not so easy for me.

The link of image below it's a example I want. example I want

Follow my code below, it's a simple code.

<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {
            callback: drawChart_var,
            packages: ['corechart']
        });
        function drawChart_var() {
            var dataChart = new google.visualization.arrayToDataTable(
                [[{ label: 'Category', type: 'string' },{ label: '', type: 'number' },
                { label: 'Base 2', type: 'number' },{ label: 'Base 3', type: 'number' },
                { label: 'Base 4', type: 'number' },{ role: 'style', type: 'string', p: { role: 'style' } }],
                ['VAR', 0, 0, 3.42, 0, '#EEB14C'],['MIX', 0, 3.42, 3.73, 0, '#69AA51'],
                ['BNS', 0, 3.73, 3.42, 0, '#D53C38'],['MTRL', 0, 3.42, 2.34, 0, '#D53C38'],
                ['OTHER', 0, 2.34, 2.69, 0, '#69AA51'],['CORP', 0, 2.69, 0.7, 0, '#D53C38'],
                ['COST', 0, 0.7, 1.94, 0, '#69AA51'],['PNL', 0, 1.94, 0, 0, '#EEB14C']]
            );
            var options = {
                animation: {duration: 1500,easing: 'inAndOut',startup: true},
                backgroundColor: 'transparent',bar: {group: {width: '85%'}},
                chartArea: {left: 50,right: 20,bottom: 60,top: 50,width: "100%",height: "70%"},
                hAxis: {textStyle: {fontSize: 12}},
                height: 400,
                legend: 'none',
                seriesType: 'bars',
                series: {0: {type: 'candlesticks'}},
                tooltip: {isHtml: true,trigger: 'both'},
                vAxis: {format: 'short',textStyle: {color: '#616161'},viewWindow: {min: 0,max: 11}},
                width: '100%',
                annotations: {stem: {color: "transparent",length: 100},
                textStyle: {color: "#000000",fontSize: 16,}}
            };
            var chart = new google.visualization.ChartWrapper();
            chart.setChartType('ComboChart');
            chart.setDataTable(dataChart);
            chart.setContainerId('chart_var');
            chart.setOptions(options);
            chart.draw();
        }
    </script>
</head>
<body>
    <div id="chart_var"></div>
</body>
</html>
1
javascriptchartsgoogle-visualization

1 Answers

1
votes

to add labels above the bars, you can use an annotation column role. 

{ role: 'annotation', type: 'string' }

however, in this case, candle stick series do not support annotations.
you can check which roles are supported by reviewing the data format for each chart type.

as such, we need to add a second bar series, then add the annotation column. 

{ label: 'bar series', type: 'number' },{ role: 'annotation', type: 'string' }

see following working example, for the bar series, we just use a value of zero... 

google.charts.load('current', {
  callback: drawChart_var,
  packages: ['corechart']
});
function drawChart_var() {
  var dataChart = new google.visualization.arrayToDataTable(
    [[{ label: 'Category', type: 'string' },{ label: '', type: 'number' },
    { label: 'Base 2', type: 'number' },{ label: 'Base 3', type: 'number' },
    { label: 'Base 4', type: 'number' },{ role: 'style', type: 'string', p: { role: 'style' } },
    { label: 'bar series', type: 'number' },{ role: 'annotation', type: 'string' }],
    ['VAR', 0, 0, 3.42, 0, '#EEB14C', 0, '3.42'],['MIX', 0, 3.42, 3.73, 0, '#69AA51', 0, '0.31'],
    ['BNS', 0, 3.73, 3.42, 0, '#D53C38', 0, '-0.31'],['MTRL', 0, 3.42, 2.34, 0, '#D53C38', 0, '-1.08'],
    ['OTHER', 0, 2.34, 2.69, 0, '#69AA51', 0, '0.35'],['CORP', 0, 2.69, 0.7, 0, '#D53C38', 0, '-1.99'],
    ['COST', 0, 0.7, 1.94, 0, '#69AA51', 0, '1.24'],['PNL', 0, 1.94, 0, 0, '#EEB14C', 0, '1.94']]
  );
  
  var options = {
    animation: {duration: 1500,easing: 'inAndOut',startup: true},
    backgroundColor: 'transparent',bar: {group: {width: '85%'}},
    chartArea: {left: 50,right: 20,bottom: 60,top: 50,width: "100%",height: "70%"},
    hAxis: {textStyle: {fontSize: 12}},
    height: 400,
    legend: 'none',
    seriesType: 'bars',
    series: {0: {type: 'candlesticks'}},
    tooltip: {isHtml: true,trigger: 'both'},
    vAxis: {format: 'short',textStyle: {color: '#616161'},viewWindow: {min: 0,max: 11}},
    width: '100%',
    annotations: {stem: {color: "transparent",length: 100},
    textStyle: {color: "#000000",fontSize: 16,}}
  };
 
  var chart = new google.visualization.ChartWrapper();
  chart.setChartType('ComboChart');
  chart.setDataTable(dataChart);
  chart.setContainerId('chart_var');
  chart.setOptions(options);
  chart.draw();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_var"></div>

EDIT

as for the position of the annotation. given we are using a value of zero for the column the annotation is for, the position is being set by option --> annotations.stem.length = 100 meaning it will always be 100 pixels from the bottom of the chart.

to make the position dynamic, we need to remove the length option, and give the column a value greater than zero. the column value should be the max value of the candlesticks.

to find the max value, we can use data table method --> getColumnRange(colIndex) this method will return an object with properties for the min & max values of the column we provide.

we need to find the max between the Base 2 and Base 3 columns.

// find max height
var maxBase2 = dataChart.getColumnRange(2);
var maxBase3 = dataChart.getColumnRange(3);
var maxColumn = Math.max(maxBase2.max, maxBase3.max);

then update our annotation column with the max value.

// update column values to max
for (var i = 0; i < dataChart.getNumberOfRows(); i++) {
  dataChart.setValue(i, 6, maxColumn);
}

to ensure the annotation displays on top of the column, add option --> alwaysOutside

annotations: {
  alwaysOutside: true,
  stem: {color: 'transparent'},
  textStyle: {color: '#000000',fontSize: 16}
}

again, remove the length option.

and also set the color of the column series to transparent.

  1: {color: 'transparent'}

this will cause the annotation to always appear just above the candlesticks.

see following working snippet...

google.charts.load('current', {
  callback: drawChart_var,
  packages: ['corechart']
});
function drawChart_var() {

  var dataChart = new google.visualization.arrayToDataTable(
    [[{ label: 'Category', type: 'string' },{ label: '', type: 'number' },
    { label: 'Base 2', type: 'number' },{ label: 'Base 3', type: 'number' },
    { label: 'Base 4', type: 'number' },{ role: 'style', type: 'string', p: { role: 'style' } },
    { label: 'bar series', type: 'number' },{ role: 'annotation', type: 'string' }],
    ['VAR', 0, 0, 3.42, 0, '#EEB14C', 0, '3.42'],['MIX', 0, 3.42, 3.73, 0, '#69AA51', 0, '0.31'],
    ['BNS', 0, 3.73, 3.42, 0, '#D53C38', 0, '-0.31'],['MTRL', 0, 3.42, 2.34, 0, '#D53C38', 0, '-1.08'],
    ['OTHER', 0, 2.34, 2.69, 0, '#69AA51', 0, '0.35'],['CORP', 0, 2.69, 0.7, 0, '#D53C38', 0, '-1.99'],
    ['COST', 0, 0.7, 1.94, 0, '#69AA51', 0, '1.24'],['PNL', 0, 1.94, 0, 0, '#EEB14C', 0, '1.94']]
  );

    // find max height
    var maxBase2 = dataChart.getColumnRange(2);
    var maxBase3 = dataChart.getColumnRange(3);
    var maxColumn = Math.max(maxBase2.max, maxBase3.max);

    // update column values to max
    for (var i = 0; i < dataChart.getNumberOfRows(); i++) {
      dataChart.setValue(i, 6, maxColumn);
    }

  var options = {
    animation: {duration: 1500,easing: 'inAndOut',startup: true},
    backgroundColor: 'transparent',bar: {group: {width: '85%'}},
    chartArea: {left: 50,right: 20,bottom: 60,top: 50,width: '100%',height: '70%'},
    hAxis: {textStyle: {fontSize: 12}},
    height: 400,
    legend: 'none',
    seriesType: 'bars',
    series: {
      0: {type: 'candlesticks'},
      1: {color: 'transparent'}
    },
    tooltip: {isHtml: true,trigger: 'both'},
    vAxis: {format: 'short',textStyle: {color: '#616161'},viewWindow: {min: 0,max: 11}},
    width: '100%',
    annotations: {
      alwaysOutside: true,
      stem: {color: 'transparent'},
      textStyle: {color: '#000000',fontSize: 16}
    }
  };

  var chart = new google.visualization.ChartWrapper();
  chart.setChartType('ComboChart');
  chart.setDataTable(dataChart);
  chart.setContainerId('chart_var');
  chart.setOptions(options);
  chart.draw();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_var"></div>