CODEWITHSUNDEEP
javascriptgoogle-visualization
PovilasID
PovilasID

Reputation: 893

How to add a custom axis line to a google chart?

I have a google scatter chart that has some significant thresholds in it. How do I visualise them?

Do I push some extra ticks on chart axis? If so how do I add just one and how do I style it?

I am aiming for something like this.

Chart

I am using React Google charts

Upvotes: 1

Views: 1275

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

add another column, or series, with the same value for all rows...

this can be added using a data view with calculated columns,

see following working snippet... 

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0'],
    [0,  165],
    [1,  175],
    [2,  185]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
    {
      calc: function () {
        return 150;
      },
      label: 'min',
      type: 'number'
    },
    {
      calc: function () {
        return 175;
      },
      label: 'avg',
      type: 'number'
    },
    {
      calc: function () {
        return 200;
      },
      label: 'max',
      type: 'number'
    }
  ]);

  var options = {
    vAxis: {
      viewWindow: {
        min: 125,
        max: 225
      }
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

EDIT

here's another example...

add additional columns to the data table,
use getColumnRange for find the min and max x-axis values 

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0'],
    [0,  165],
    [1,  175],
    [2,  185]
  ]);

  var xAxisRange = data.getColumnRange(0);
  data.addColumn({label: 'min', type: 'number'});
  data.addColumn({label: 'avg', type: 'number'});
  data.addColumn({label: 'max', type: 'number'});
  data.addRows([
    [xAxisRange.min, null, 150, 175, 200],
    [xAxisRange.max, null, 150, 175, 200]
  ]);

  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, {
    series: {
      1: {
        color: 'cyan'
      },
      2: {
        color: 'cyan'
      },
      3: {
        color: 'cyan'
      }
    }
  });
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Upvotes: 1

Related Questions