google charts vAxis to the right

Asked 2/4, 2013 at 21:45 Answered 30/3, 2017 at 11:7

I'm using google visualization

var data2 = new google.visualization.DataTable();
        data2.addColumn('string', 'time');
        data2.addColumn('number', 'amount');
        data2.addColumn({ type: 'string', role: 'tooltip' });
        data2.addRows(rows_data);
        var options2 = {
            vAxis: { textPosition: 'none', title: '', textStyle: { fontName: 'arial'} },
            hAxis: { slantedText: false, textStyle: { color: '#E6EFFA' }, gridlines: { color: '#E6EFFA', count: 20} },
            backgroundColor: '#E6EFFA',
            legend: 'none',
            chartArea: { top: 0 },
            colors: ['#435988'],
            chartArea: { width: 800 }
        };
        chart2 = new google.visualization.LineChart(document.getElementById('chart_div_volume'));

I want the vAxis position to be on the right. is it possible ?

Cynic answered 2/4, 2013 at 21:45 Comment(0)

Short Answer: Yes, but it's tricky.

Long Answer:

You need to set up a multi-axis chart. Basically, you create a dummy axis with no labels or anything to make it look like an axis. Then you configure a secondary axis. You create one set of dummy values (hidden) to put on the first axis, and plot your real data on the second.

Here is an example:

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Dummy', 'Sales', 'Expenses'],
    ['2004',  0,   1000,      400],
    ['2005',  null,   1170,      460],
    ['2006',  null,   660,       1120],
    ['2007',  null,   1030,      540]
  ]);

  var options = {
    title: 'Company Performance',
    series: { 0: {targetAxisIndex: 0, visibleInLegend: false, pointSize: 0, lineWidth: 0},
              1: {targetAxisIndex: 1},
              2: {targetAxisIndex: 1}
             },
    vAxes: {
      0: {textPosition: 'none'},
      1: {},
    }
  };

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

Sanguinaria answered 3/4, 2013 at 3:5 Comment(1)

@Sanguinaria Is the same possible for BarChart ? – Choose 25/11, 2015 at 12:40

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

        function drawVisualization() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Productivity');
            data.addColumn('number', 'Composite');
            data.addColumn({ type: 'number', role: 'annotation' });
            data.addColumn('number', 'Average(N=5)');
            var compositeDataArry = [];
            compositeDataArry.push(["Ravi", 11, 11, 5]);
            compositeDataArry.push(["Wasif", 5, 5, 5]);
            compositeDataArry.push(["Vipin", 2, 2, 5]);
            compositeDataArry.push(["Ankur", 3, 3, 5]);
            compositeDataArry.push(["Pankaj", 1, 1, 5]);
            compositeDataArry.push(["Dheeraj", 4, 4, 5]);

            data.addRows(compositeDataArry);
            var options = {
                title: 'My Chart',
                titleTextStyle: { color: '#264158', fontSize: 24 },
                seriesType: 'bars',
                annotations: {
                    alwaysOutside: true,
                    textStyle: {
                        color: '#000000',
                        fontSize: 15
                    }
                },
                hAxis: {
                    slantedText: true,
                    slantedTextAngle: -45
                },
                series: {
                    0: { targetAxisIndex: 0, },
                    1: { targetAxisIndex: 1, type: 'line' }
                },
                vAxes: {
                    0: { textPosition: 'none' },
                    1: {}
                }             
            };
            var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            chart.draw(data, options);
           
        }

<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>


</head>
<body>
    <div id="chart_div" style="height: 500px; width: 100%"></div>

</body>
</html>

Koh answered 30/3, 2017 at 11:7 Comment(0)

Recommended topics

Hot tags