function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Sascha DeinertSascha Deinert 

Google Chart bar value

Dear All,

I have the following code and I want to show the value at the top of the bars.
Could you help me.
 
<apex:page controller="Samplepage_class" sidebar="true"> 
    
<apex:includeScript id="a" value="https://www.google.com/jsapi" />

<apex:pageblock title="Samplepage">

<div id="chart_div"></div>
        
<script type="text/javascript">

google.load('visualization', '1.1', {'packages': ['bar']});

google.setOnLoadCallback(drawStuff);

function drawStuff() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Team');
    data.addColumn('number', 'Level 1');
    data.addColumn('number', 'Level 2');
    data.addColumn('number', 'Level 3');
    data.addColumn('number', 'Level 4');
    data.addColumn('number', 'YTD');    
    data.addRows([
        ['Team1',  {!Level1_Team1}, {!Level2_Team1}, {!Level3_Team1}, {!Level4_Team1}, {!YTD_Team1}],
        ['Team2',  {!Level1_Team2}, {!Level2_Team2}, {!Level3_Team2}, {!Level4_Team2}, {!YTD_Team2}],
    ]);

    // Set chart options
    var options = {
        isStacked: true,
        width: 850,
        height: 500,
        backgroundColor: '#F8F8F8',
        
        chartArea: { backgroundColor: '#F8F8F8' },

        chart: {
<!--            title: 'SamplePage', -->
            subtitle: 'SampleSubTitle'
        },        
        vAxis: {
            format: 'decimal',
            viewWindow: {
                min: 0,
                max: 15000000
            }
        },
        series: {
            4: { targetAxisIndex: 1 }, 
            5: { targetAxisIndex: 1 }
        }
    };

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

</script>

</apex:pageblock>

</apex:page>
Thanks,
Sascha
NagendraNagendra (Salesforce Developers) 
Hi Sascha,

First and foremost sincerely regret delayed reply.

included chart library from https://www.gstatic.com/charts/loader.js instead of https://www.google.com/jsapi (https://www.gstatic.com/charts/loader.js instead of https://www.google.com/jsapi). So the includeScript will now be:
<apex:includeScript id="a" value="https://www.gstatic.com/charts/loader.js" />
Then, at the end of the code where you are doing:
var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
Replace the above code as below:
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
          chart.draw(data, options);
One more point is, you have to add the annotation column for each of the row you want to show the annotation. So, here is the complete code.
<apex:page doctype="html-5.0" controller="PieChartController">
<apex:includeScript id="a" value="https://www.gstatic.com/charts/loader.js" />

<apex:pageblock title="Samplepage">

<div id="chart_div"></div>

<script type="text/javascript">

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

google.charts.setOnLoadCallback(drawStuff);

function drawStuff() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Team');
    data.addColumn('number', 'Level 1');
    data.addColumn({type: 'number', role: 'annotation'});
    data.addColumn('number', 'Level 2');
    data.addColumn({type: 'number', role: 'annotation'});
    data.addColumn('number', 'Level 3');
    data.addColumn({type: 'number', role: 'annotation'});
    data.addColumn('number', 'Level 4');
    data.addColumn({type: 'number', role: 'annotation'});
    data.addColumn('number', 'YTD');    
    data.addColumn({type: 'number', role: 'annotation'});

    data.addRows([
        ['Team1',  30, 55, 40, 66, 45, 77, 50, 88, 10, 99],
        ['Team2',  34, 11, 45, 22, 46, 33, 58, 44, 69, 97]
    ]);

    var options = {
        isStacked: true,
        width: 850,
        height: 800,
        backgroundColor: '#F8F8F8',

        chartArea: { backgroundColor: '#F8F8F8' },

        chart: {
            subtitle: 'SampleSubTitle'
        },        
        vAxis: {
            format: 'decimal',
            viewWindow: {
                min: 0,
                max: 100
            }
        },
        series: {
            4: { targetAxisIndex: 1 }, 
            5: { targetAxisIndex: 1 }
        }
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, options);
};   
</script>
</apex:pageblock>
</apex:page>
Kindly mark this post as solved if the information help's so that it gets removed from the unanswered queue which results in helping others who are really in need of it.

Best Regards,
Nagendra.P




 
Sascha DeinertSascha Deinert
Hi Nagendra,

Thanks for your reply, I change my code and it works so far.
But in the meantime I changed my code a bit.
I wanna show the 4 steps stacked and the fifth bar at the right of the 4 steps to compare.
With the code below are all 4 steps and the YTD values stacked.

Sample
 
<apex:includeScript id="a" value="https://www.gstatic.com/charts/loader.js" />
      
<script type="text/javascript">

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

google.charts.setOnLoadCallback(drawStuff);

function drawStuff() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', '');
    data.addColumn('number', 'Step 1');
    data.addColumn({type: 'number', role: 'annotation'});    
    data.addColumn('number', 'Step 2');
    data.addColumn({type: 'number', role: 'annotation'});      
    data.addColumn('number', 'Step 3');
    data.addColumn({type: 'number', role: 'annotation'});      
    data.addColumn('number', 'Step 4');
    data.addColumn({type: 'number', role: 'annotation'});    
    data.addColumn('number', 'YTD');
    data.addColumn({type: 'number', role: 'annotation'});      
    data.addRows([
        ['Team1', 250, 250, 250, 250, 250, 250, 250, 250, 625, 625], 
        ['Team2',  350, 350, 350, 350, 350, 350, 350, 350, 700, 700], 
    ]);

    // Set chart options
    var options = {
        isStacked: true,
        width: 850,
        height: 500,
        backgroundColor: '#F8F8F8',
        
        chartArea: { backgroundColor: '#F8F8F8' },

        chart: {
            subtitle: 'TEST-SubTitle'
        },        
        vAxis: {
            format: 'decimal',
            viewWindow: {
                min: 0,
                max: 1800
            }
        },     
        series: {
            8: { targetAxisIndex: 1 }, 
            9: { targetAxisIndex: 1 }
        }
    };

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

};   

</script>
Thanks for your help.
Sascha