CODEWITHSUNDEEP
chartsgoogle-visualization
Jason
Jason

Reputation: 163

Data annotations arrangement

I wanted to arrange data annotations on google chart following the instructions I found here, and google documentation. And this is what I have now:

https://jsfiddle.net/u6tn97km/

I couldn't place the data values and data points together. Instead data values are all stacked together. How can I fix this problem? 

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'values');
  data.addColumn({id:'i0', type:'number', role:'interval'});
  data.addColumn({id:'i1', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});

  data.addRows([
[1, 19,4,7,17,20,24,26],
[2, 13,2,10,11,15,20,25],
[3, 14,7,10,10,17,20,25],
[4, 14,4,8,11,16,26,27],
[5, 12,5,8,10,13,19,21],
[6, 13,1,10,10,15,20,25],
[7, 18,7,11,13,22,23,24],
[8, 17,3,9,12,22,25,26],
[9, 25,12,20,24,26,26,27],
[10, 16,6,8,15,16,17,23],
[11, 12,1,3,6,18,18,26],
[12, 12,1,3,12,12,18,19]]);

  // The intervals data as narrow lines (useful for showing raw source data)

  var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
    calc: 'stringify',
    sourceColumn: 1,
    type: 'string',
    role: 'annotation'
}, 2, {
    calc: 'stringify',
    sourceColumn: 2,
    type: 'string',
    role: 'annotation'
}, 3, {
    calc: 'stringify',
    sourceColumn: 3,
    type: 'string',
    role: 'annotation'
},  4, {

    calc: 'stringify',
    sourceColumn: 4,
    type: 'string',
    role: 'annotation'
}, 5, {

    calc: 'stringify',
    sourceColumn: 5,
    type: 'string',
    role: 'annotation'
}, 6, {

    calc: 'stringify',
    sourceColumn: 6,
    type: 'string',
    role: 'annotation'
}, 7, {

    calc: 'stringify',
    sourceColumn: 7,
    type: 'string',
    role: 'annotation'
} ]);

 var options_bars = {
      title: 'Bars, default',
      curveType: 'function',
      series: [{'color': '#D9544C'}],
      intervals: { style: 'bars',  pointSize: 9,  barWidth: 1, shortBarWidth:0.5},
     'tooltip' : { trigger: 'none'}, 
      enableInteractivity: false,  
      annotations: { stemColor: 'white', textStyle: { fontSize: 10 } },
        pointSize: 8, 
      legend: 'none',
  };

  var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));
 // chart_lines.draw(data, options_bars);
   chart_lines.draw(view, options_bars); 
}

and HTML:

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_lines" style="width: 900px; height: 500px;"></div>

Upvotes: 2

Views: 269

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

annotations are placed above the series they represent,
since the interval columns are roles and not series,
all the annotations are stacked above the one point

to place the annotations in the desired location,
we can add additional, hidden series to the chart,
and an annotation above the new series

add the new series as a column on the data view,
then add the annotation after the new series... 

view.setColumns([0, 1, {
  calc: 'stringify',
  sourceColumn: 1,
  type: 'string',
  role: 'annotation'
}, 2, 3, 4, 5, 6, 7, {  // new series start here, after all the original columns
  calc: function (dt, row) {
    return dt.getValue(row, 2);
  },
  type: 'number'
}, {
  calc: 'stringify',
  sourceColumn: 2,
  type: 'string',
  role: 'annotation'
}, {
  calc: function (dt, row) {
    return dt.getValue(row, 3);
  },
  type: 'number'
}, {
  calc: 'stringify',
  sourceColumn: 3,
  type: 'string',
  role: 'annotation'
}, {
...

to hide the new series, use the series option to change the type to scatter, and set the pointSize to zero 

series: {
  1: {
    pointSize: 0,
    type: 'scatter'
  },
  2: {
    pointSize: 0,
    type: 'scatter'
  },
  ...

see following working snippet... 

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'values');
  data.addColumn({id:'i0', type:'number', role:'interval'});
  data.addColumn({id:'i1', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});

  data.addRows([
    [1, 19,4,7,17,20,24,26],
    [2, 13,2,10,11,15,20,25],
    [3, 14,7,10,10,17,20,25],
    [4, 14,4,8,11,16,26,27],
    [5, 12,5,8,10,13,19,21],
    [6, 13,1,10,10,15,20,25],
    [7, 18,7,11,13,22,23,24],
    [8, 17,3,9,12,22,25,26],
    [9, 25,12,20,24,26,26,27],
    [10, 16,6,8,15,16,17,23],
    [11, 12,1,3,6,18,18,26],
    [12, 12,1,3,12,12,18,19]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: 'stringify',
    sourceColumn: 1,
    type: 'string',
    role: 'annotation'
  }, 2, 3, 4, 5, 6, 7, {
    calc: function (dt, row) {
      return dt.getValue(row, 2);
    },
    type: 'number'
  }, {
    calc: 'stringify',
    sourceColumn: 2,
    type: 'string',
    role: 'annotation'
  }, {
    calc: function (dt, row) {
      return dt.getValue(row, 3);
    },
    type: 'number'
  }, {
    calc: 'stringify',
    sourceColumn: 3,
    type: 'string',
    role: 'annotation'
  }, {
    calc: function (dt, row) {
      return dt.getValue(row, 4);
    },
    type: 'number'
  }, {
    calc: 'stringify',
    sourceColumn: 4,
    type: 'string',
    role: 'annotation'
  }, {
    calc: function (dt, row) {
      return dt.getValue(row, 5);
    },
    type: 'number'
  }, {
    calc: 'stringify',
    sourceColumn: 5,
    type: 'string',
    role: 'annotation'
  }, {
    calc: function (dt, row) {
      return dt.getValue(row, 6);
    },
    type: 'number'
  }, {
    calc: 'stringify',
    sourceColumn: 6,
    type: 'string',
    role: 'annotation'
  }, {
    calc: function (dt, row) {
      return dt.getValue(row, 7);
    },
    type: 'number'
  }, {
    calc: 'stringify',
    sourceColumn: 7,
    type: 'string',
    role: 'annotation'
  }]);

  var options_bars = {
    title: 'Bars, default',
    colors: ['#d9544c'],
    curveType: 'function',
    series: {
      1: {
        pointSize: 0,
        type: 'scatter'
      },
      2: {
        pointSize: 0,
        type: 'scatter'
      },
      3: {
        pointSize: 0,
        type: 'scatter'
      },
      4: {
        pointSize: 0,
        type: 'scatter'
      },
      5: {
        pointSize: 0,
        type: 'scatter'
      },
      6: {
        pointSize: 0,
        type: 'scatter'
      },
      7: {
        pointSize: 0,
        type: 'scatter'
      }
    },
    intervals: {style: 'bars', pointSize: 9, barWidth: 1, shortBarWidth: 0.5},
    tooltip : {trigger: 'none'},
    enableInteractivity: false,
    annotations: {stemLength: 2, stemColor: 'transparent', textStyle: {fontSize: 10}},
    pointSize: 8,
    legend: 'none',
  };

  var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));
  chart_lines.draw(view, options_bars);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_lines" style="width: 900px; height: 500px;"></div>

Upvotes: 1

Related Questions