<script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'xAxis');
        data.addColumn('number', 'dummySeries');
        data.addColumn('number', 'realSeries');

        data.addRow(['x label', null, 2]); // dummy series value needs to be null, otherwise if interactivity is on, the user can discover the dummy values even if the line is hidden per below
        data.addRow(...iterate & add the rest of your data);

        new google.visualization.LineChart(document.getElementById('graphdiv')).
            draw(data, {curveType: 'function',
                        series:[{lineWidth:0},{targetAxisIndex:1}]} // specify right y-axis for 2nd series, and 'hide' the line for the 1st series as a precaution with lineWidth
                );
      }

      google.setOnLoadCallback(drawVisualization);
    </script>

<script type="text/javascript">
    function singleUserChart() {
        google.charts.load('current', { packages: ['corechart', 'bar'] });
        google.charts.setOnLoadCallback(drawAnnotations);

        function drawAnnotations() {
            var dataPercentage = new google.visualization.DataTable();
            dataPercentage.addColumn('string', 'Productivity');
            dataPercentage.addColumn('number', 'Ravi');
            dataPercentage.addColumn({ type: 'string', role: 'annotation' });
            dataPercentage.addColumn('number', 'Avg Data');
            dataPercentage.addColumn({ type: 'string', role: 'annotation' });

            dataPercentage.addRows([
              ['%Score1', 12, '12%', 15, '15%'],
              ['%Score2', 25, '25%', 21, '21%']
            ]);
            singleUserChartOptions(dataPercentage, 'individualUserPercentageChart', true, 450);
        }
    }
    function singleUserChartOptions(chartData, chartDivId, isShowPercent, chartWidth) {
        var options = {
            annotations: {
                alwaysOutside: true,
                textStyle: {
                    fontSize: 15,
                    color: '#000',
                    auraColor: 'none'
                }
            },
            vAxis: { format: (isShowPercent == true) ? '#'%'' : '', ticks :[0,10,20,30,40,50]},
            hAxis: {
                slantedText: true,
                slantedTextAngle: -45,
                textStyle: { fontSize: 11 }
            },
            series: {
                0: { targetAxisIndex: 0, },
                1: { targetAxisIndex: 1, }
            },
            vAxes: {
                0: { textPosition: 'none' },
                1: {}
            },
            legend: { position: 'top' },
            width: chartWidth,
            height: 400
        };

        var chart = new google.visualization.ColumnChart(document.getElementById(chartDivId));
        chart.draw(chartData, options);
    }
    singleUserChart();
</script>