CODEWITHSUNDEEP
javascriptgraphchartsgoogle-visualizationscatter
Ynnad
Ynnad

Reputation: 303

Google Chart - Points with text inside and interval

I'm trying to have something like that enter image description here

But for the moment I only have on serie per person and I'm not able to display the text inside the point...

enter image description here

I'm using a Google Scatter Chart but if you know another tool to achieve this, I'm right here :)

    var data = new google.visualization.DataTable();

    data.addColumn('string', 'Element');
    data.addColumn('number', 'Left');
    data.addColumn({type: 'number', role: 'interval'});
    data.addColumn({type: 'number', role: 'interval'});
    data.addColumn('number', 'Right');
    data.addColumn({type: 'number', role: 'interval'});
    data.addColumn({type: 'number', role: 'interval'});

    for( var i=0; i < dataToInsert.length; i++){
            data.addRow([
                dataToInsert[i].name,
                dataToInsert[i].L.mean,
                dataToInsert[i].L.min,
                dataToInsert[i].L.max,
                dataToInsert[i].R.mean,
                dataToInsert[i].R.min,
                dataToInsert[i].R.max 
            ]);
    }

    var view = new google.visualization.DataView(data);
            view.setColumns([0, 1, 2,3,4, 5,6]);    

    var options = {
      pointSize: 30,
      legend: 'none',
      orientation: 'horizontal',
      vAxis: {
          minValue: -1.0,
          ticks: [-1.0, -0.8, -0.6, -0.4, -0.2, 0.0, 0.2, 0.4, 0.6, 0.8, 1.0]
      },
    };

    var chart = new google.visualization.ScatterChart(document.getElementById('chart'));
    chart.draw(data, options);

Upvotes: 1

Views: 475

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

you can use an annotation column to display text within the point

set the following options, to remove the stem and move the text down
you can also change the text style

annotations: {
  stem: {
    color: 'transparent',
    length: -6
  },
  textStyle: {
    auraColor: '#ffffff',
    color: '#000000'
  }
},

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();

    data.addColumn('string', 'Element');
    data.addColumn('number', 'Left');
    data.addColumn({type: 'string', role: 'annotation'});
    data.addColumn({type: 'number', role: 'interval'});
    data.addColumn({type: 'number', role: 'interval'});
    data.addColumn('number', 'Right');
    data.addColumn({type: 'number', role: 'interval'});
    data.addColumn({type: 'number', role: 'interval'});

    data.addRows([
      ['Person A', -.2, 'L', -.6, .2, -.2, -.6, .2],
      ['Person B', -.2, 'R', -.6, .2, -.2, -.6, .2]
    ]);

    var options = {
      annotations: {
        stem: {
          color: 'transparent',
          length: -6
        },
        textStyle: {
          auraColor: '#ffffff',
          color: '#000000'
        }
      },
      pointSize: 30,
      legend: 'none',
      orientation: 'horizontal',
      vAxis: {
        minValue: -1.0,
        ticks: [-1.0, -0.8, -0.6, -0.4, -0.2, 0.0, 0.2, 0.4, 0.6, 0.8, 1.0]
      },
    };

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions