CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Dody Suhada
Dody Suhada

Reputation: 118

How to set orientation for annotation text or value

I start learning using Google Visualization for my web.

I have some problem with annotation. The annotation text is pile up, in my opinion the data is useless if its cannot read

the annotation text is pile up, in my opinion the data is useless if its cannot read

this is my code for the annotation

var options = {
    width: 1200,
    height: 680,
    vAxis: {title: 'QTY'},
    hAxis: {title: 'DAYS'},
    legend: { position: 'center', maxLines: 3 },
    bar: { groupWidth: '80%' },
    isStacked: true,
    title : 'PRODUCTION BY PROCESS <?php echo $proc;?> SECTION <?php echo $fact;?> <?php echo $Date ?> ',
    series: {20: {type: 'line'}}
};

How to set orientation for annotation text or value to counterclockwise or to make annotation text not pile up like the image.

Upvotes: 1

Views: 413

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

to rotate the annotations, change style to 'line' 

var options = {
  annotations: {
    style: 'line'
  }
};

see following working snippet... 

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    [
      "x",
      "y0",
      "y1",
      "y2",
      "y3"
    ],
    ["29-04-2017", 212558.50, 212558.2, 212558.4, 212555.5],
    ["13-05-2017", 212558.60, 212558.32, 212558.53, 212555.67],
    ["12-06-2017", 212558.30, 212558.72, 212558.13, 212555.37],
    ["23-08-2017", 212558.50, 212558.22, 212558.43, 212555.57]
  ]);

  var viewColumns = [0];
  $.each(new Array(data.getNumberOfColumns() - 1), function (index) {
    viewColumns.push(index + 1);
    viewColumns.push({
      calc: function (dt, row) {
        return dt.getFormattedValue(row, index + 1);
      },
      role: 'annotation',
      type: 'string'
    });
  });
  var view = new google.visualization.DataView(data);
  view.setColumns(viewColumns);

  var options = {
    annotations: {
      style: 'line'
    },
    colors: ["#0F5470", "#8EA3A4", "#3EB8BC", "#98D4F2"]
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(view, options);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions