How to Add Point on Visualization: Area Chart

22 views
Skip to first unread message

jp serrano

unread,
Oct 13, 2017, 10:10:11 AM10/13/17
to Google Visualization API


How to add a point inside the Google Charts Visualization: Area chart like the red point in the picture shown above and can i put some label above or beside the point?

Here is the code that outputs the chart above

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

  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Output1');
    data.addColumn('number', 'Height');
    data.addColumn({type:'string', role:'annotation'});
    data.addRows([
      <?php echo"['',  2, null],"; ?>
      <?php echo"['',  2, '1 Kpa ---------->'],"; ?>
      <?php echo"['2',   1, '<---------- 2'],"; ?>
      <?php echo"['3 σ',   0, '<---------- 3 σ']"; ?>
    ]);

    var options = {
      title: 'Total Stress',
      hAxis: {title: '<-------- Direction',  titleTextStyle: {color: '#333'}},
      vAxis: { ticks: [{v:2, f:'1 Kpa ->'}, {v:1, f:'1 m'},{v:0, f:'length ^ 1 m'},{v:0, f:'1 m'}] }
    };

    var chart = new google.visualization.AreaChart(document.getElementById('total_stress'));
    chart.draw(data, options);
  }
Reply all
Reply to author
Forward
0 new messages