CODEWITHSUNDEEP
javascriptchartsgoogle-visualizationscatter-plot
gustafbstrom
gustafbstrom

Reputation: 1933

Google Charts: how do I style one point in a scatter chart?

By using the scatter chart API at Google Charts, together with this example on how to change the shape/color/etc for one point, I've been trying hard to accomplish this. However, while the point that is supposed to be individually styled shows up, it is not changed according to the given style. Here is a small example:

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
  google.charts.load('current', {'packages':['scatter']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart () {

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X-axis');
    data.addColumn('number', 'A data');
    data.addColumn({'type': 'string', 'role': 'style'});
    data.addColumn('number', 'B data');
    data.addColumn({'type': 'string', 'role': 'style'});

    data.addRows([
      [1.1, 12, null, null, null],
      [1.3, 13, null, null, null],
      [0.1, null, null, 0, null],
      [0.3, null, null, 3, null],
      [1.2, 13, 'point {size: 13; shape-type: star; fill-color: #00ffff;}', null, null],
      [0.2, null, null, 4, 'point {size: 13; shape-type: star; fill-color: #ff00ff;}'],

    ]);

    var options = {
      width: 800,
      height: 500,
      chart: {
        title: 'Small example'
      },
      hAxis: {title: 'X-axis'},
      vAxis: {title: 'Y-axis'}
    };

    var chart = new google.charts.Scatter(document.getElementById('example_scatter_chart'));

    chart.draw(data, google.charts.Scatter.convertOptions(options));
  }
  </script>
  </head>
  <body>
    <div id="example_scatter_chart" style="width: 500px; height: 500px;"></div>
  </body>
</html>

What am I missing here?

Upvotes: 0

Views: 1358

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

role: 'style' simply doesn't work on a Material chart
google.charts.Scatter

need to use 'packages':['corechart'] and google.visualization.ScatterChart

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-axis');
  data.addColumn('number', 'A data');
  data.addColumn({'type': 'string', 'role': 'style'});
  data.addColumn('number', 'B data');
  data.addColumn({'type': 'string', 'role': 'style'});

  data.addRows([
    [1.1, 12, null, null, null],
    [1.3, 13, null, null, null],
    [0.1, null, null, 0, null],
    [0.3, null, null, 3, null],
    [1.2, 13, 'point {size: 13; shape-type: star; fill-color: #00ffff;}', null, null],
    [0.2, null, null, 4, 'point {size: 13; shape-type: star; fill-color: #ff00ff;}']
  ]);

  var options = {
    width: 800,
    height: 500,
    chart: {
      title: 'Small example'
    },
    hAxis: {title: 'X-axis'},
    vAxis: {title: 'Y-axis'},
    theme: 'material'
  };

  var chart = new google.visualization.ScatterChart(document.getElementById('example_scatter_chart'));

  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example_scatter_chart"></div>

Upvotes: 1

Related Questions