CODEWITHSUNDEEP
htmlchartsgoogle-visualization
T.C
T.C

Reputation: 311

How to get all lines to have the same X-axis value when editing tooltips GOOGLE CHARTS

I have a line chart where information will be pulled from database. But for now I am just trying to get it to work by hard coding it.

I have edited the tooltip for the line chart, but when I do each line is separate and the x-axis value is duplicated.

so what I want is for the lines to all go to the same x-axis point 2014, 2015. But instead it gets doubled and thus making each line not crossing each other.

This is how I want it to look: enter image description here

And here is the code I used:

function drawLineChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Orouke', 'feis nara'],
      ['2014',  1,      4],
      ['2015',  11,      46],
      ['2016',  60,       null],
      ['2017',  10,      5]
    ]);

      // build ticks
      var ticks = [];
      for (var i = 0; i <= 60; i = i + 15) {
          addTick(i);
      }
      function addTick(i) {
          var place;
          var digit;
          if (i === 0) {
              i = 1;
          }
          digit = i.toString().substr(i.toString().length - 1);
          switch (digit) {
              case '1':
                  place = 'st place';
                  break;

              case '2':
                  place = 'nd place';
                  break;

              case '3':
                  place = 'rd place';
                  break;

              default:
                  place = 'th place';
          }    ticks.push({
              v: i,
              f: i + place
          });
      }

    var options = {
      title: 'Progress Report: Dancer\'s competition placement',
      tooltip: {isHtml: true},
      width: 600,
      height: 550,
      interpolateNulls: true,
      legend: { 
          position: 'bottom' 
      },
      vAxis: { 
          title: 'Competition Placement', 
          direction: -1, 
          gridlines: {count: 10}, 
          ticks: ticks
      }
    };

    var chart = new google.visualization.LineChart(document.getElementById('line_chart'));

    chart.draw(data, options);
  }

And when I try to edit the tooltip it looks like this:

enter image description here

and here is the code:

function drawLineChart() {
      var data = google.visualization.arrayToDataTable([

        ["Year", "Orouke", {type: 'string', role: 'tooltip'}, "Feis Nara", {type: 'string', role: 'tooltip'}, "Garden State Feis", {type: 'string', role: 'tooltip'},],
          ["2014",  1, "Feis: Orouke Feis Date: 10-12-2014 Rank: 1st Place", null, "", null, ""],
          ["2015",  11, "Feis: Orouke Feis Date: 1-12-2015 Rank: 11th Place", null, "", null, ""],
          ["2016",  60, "Feis: Orouke Feis Date: 8-30-2016 Rank: 60th Place", null, "", null, ""],
          ["2017",  10, "Feis: Orouke Feis Date: 9-25-2017 Rank: 10th Place", null, "", null, ""],
          ["2014",  null, "", 4, "Feis: Feis Nara Feis Date: 2-1-2014 Rank: 4th Place", null, ""],
          ["2015",  null, "", 46, "Feis: Feis Nara Feis Date: 3-26-2015 Rank: 46th Place", null, ""],
          ["2016",  null, "", null, "", null, ""],
          ["2017",  null, "", 5, "Feis: Feis Nara Feis Date: 1-25-2017 Rank: 5th Place", null, ""],
          ["2014",  null, "", null, "", 12, "Feis: Garden State Feis Date: 5-17-2014 Rank: 12th Place"],
          ["2016",  null, "", null, "", 26, "Feis: Garden State Feis Date: 8-27-2016 Rank: 26th Place"],

    ]);





      // build ticks
  var ticks = [];
  for (var i = 0; i <= 60; i = i + 15) {
    addTick(i);
  }
  function addTick(i) {
    var place;
    var digit;
    if (i === 0) {
      i = 1;
    }
    digit = i.toString().substr(i.toString().length - 1);
    switch (digit) {
      case '1':
        place = 'st place';
        break;

      case '2':
        place = 'nd place';
        break;

      case '3':
        place = 'rd place';
        break;

      default:
        place = 'th place';
    }
    ticks.push({
      v: i,
      f: i + place
    });
  }

    var options = {
      title: 'Progress Report',
      tooltip: {isHtml: true},
      //pointSize: 5,
      width: 600,
      height: 550,
      interpolateNulls: true,
      legend: { 
          position: 'bottom' 
      },
      vAxis: { 
          title: 'Competition Placement', 
          direction: -1, 
          gridlines: {count: 10}, 
          ticks: ticks
      }
    };

Upvotes: 1

Views: 55

Answers (1)

WhiteHat
WhiteHat

Reputation: 61230

try using numbers instead of strings for the x-axis values... 

var data = google.visualization.arrayToDataTable([
  ["Year", "Orouke", {type: 'string', role: 'tooltip'}, "Feis Nara", {type: 'string', role: 'tooltip'}, "Garden State Feis", {type: 'string', role: 'tooltip'},],
  [2014,  1, "Feis: Orouke Feis Date: 10-12-2014 Rank: 1st Place", null, "", null, ""],
  [2015,  11, "Feis: Orouke Feis Date: 1-12-2015 Rank: 11th Place", null, "", null, ""],
  [2016,  60, "Feis: Orouke Feis Date: 8-30-2016 Rank: 60th Place", null, "", null, ""],

instead of... 

var data = google.visualization.arrayToDataTable([
  ["Year", "Orouke", {type: 'string', role: 'tooltip'}, "Feis Nara", {type: 'string', role: 'tooltip'}, "Garden State Feis", {type: 'string', role: 'tooltip'},],
  ["2014",  1, "Feis: Orouke Feis Date: 10-12-2014 Rank: 1st Place", null, "", null, ""],
  ["2015",  11, "Feis: Orouke Feis Date: 1-12-2015 Rank: 11th Place", null, "", null, ""],
  ["2016",  60, "Feis: Orouke Feis Date: 8-30-2016 Rank: 60th Place", null, "", null, ""],

strings on the axis create a discrete axis, vs. numbers a continuous axis,
see --> discrete vs. continuous

a discrete axis will repeat values and display in the same order as the data table.

a continuous axis will sort the rows accordingly,
however, a continuous axis may repeat labels as well.
this all depends on the number format.

in this case, the chart doesn't realize we're working with years
if we convert to numbers, the default x-axis values might result in... 

2,014.0, 2,014.5, 2,015.0, 2,015.5, 2,016.0, ...

if we change the format to '0', we still get the same number of labels,
but now the decimal is hidden, so we get repeated labels. 

2014, 2014, 2015, 2015, 2016, ...

as such, we just provide our own ticks using --> data.getDistinctValues(0)

see following working snippet... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ["Year", "Orouke", {type: 'string', role: 'tooltip'}, "Feis Nara", {type: 'string', role: 'tooltip'}, "Garden State Feis", {type: 'string', role: 'tooltip'},],
    [2014,  1, "Feis: Orouke Feis Date: 10-12-2014 Rank: 1st Place", null, "", null, ""],
    [2015,  11, "Feis: Orouke Feis Date: 1-12-2015 Rank: 11th Place", null, "", null, ""],
    [2016,  60, "Feis: Orouke Feis Date: 8-30-2016 Rank: 60th Place", null, "", null, ""],
    [2017,  10, "Feis: Orouke Feis Date: 9-25-2017 Rank: 10th Place", null, "", null, ""],
    [2014,  null, "", 4, "Feis: Feis Nara Feis Date: 2-1-2014 Rank: 4th Place", null, ""],
    [2015,  null, "", 46, "Feis: Feis Nara Feis Date: 3-26-2015 Rank: 46th Place", null, ""],
    [2016,  null, "", null, "", null, ""],
    [2017,  null, "", 5, "Feis: Feis Nara Feis Date: 1-25-2017 Rank: 5th Place", null, ""],
    [2014,  null, "", null, "", 12, "Feis: Garden State Feis Date: 5-17-2014 Rank: 12th Place"],
    [2016,  null, "", null, "", 26, "Feis: Garden State Feis Date: 8-27-2016 Rank: 26th Place"],
  ]);

  // build ticks
  var ticks = [];
  for (var i = 0; i <= 60; i = i + 15) {
    addTick(i);
  }
  function addTick(i) {
    var place;
    var digit;
    if (i === 0) {
      i = 1;
    }
    digit = i.toString().substr(i.toString().length - 1);
    switch (digit) {
      case '1':
        place = 'st place';
        break;

      case '2':
        place = 'nd place';
        break;

      case '3':
        place = 'rd place';
        break;

      default:
        place = 'th place';
    }
    ticks.push({
      v: i,
      f: i + place
    });
  }

  var options = {
    title: 'Progress Report',
    tooltip: {isHtml: true},
    //pointSize: 5,
    width: 600,
    hAxis: {
      format: '0',
      ticks: data.getDistinctValues(0)
    },
    height: 550,
    interpolateNulls: true,
    legend: {
      position: 'bottom'
    },
    vAxis: {
      title: 'Competition Placement',
      direction: -1,
      gridlines: {count: 10},
      ticks: ticks
    }
  };

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

Upvotes: 1

Related Questions