CODEWITHSUNDEEP
google-visualization
CoDeGiRl
CoDeGiRl

Reputation: 174

How to not show x axis value in tooltip

I would like to not show the x axis value in tooltip for line chart using google visualization api. Does anyone know how to do that? I would like series 1 and 2 in the code below to have a tooltip that shows only the vertical axis value (Test)

var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date Logged');
        data.addColumn('number', 'Test');
        data.addColumn('string', 'State');
         data.addColumn('number', null);
          data.addColumn('number', null);



        for (var i = 0; i < dataValues.length; i++) {
            data.addRow(//getting this from db);
        }

     var monthformatter = new google.visualization.DateFormat({pattern: "MMM d, y"});
    monthformatter.format(data, 0);

      // Define a category picker control 
   var categoryPicker2 = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'control2',
      'options': {
        'filterColumnLabel': 'State',
        'ui': {
        'labelStacking': 'vertical',
          'allowTyping': false,
          'allowMultiple': false,
          'caption' : 'All'

        }
      }
    });

    chart = new google.visualization.ChartWrapper({
      'chartType': 'ScatterChart',
      'containerId': 'chart1',
      'options': {
        'title': 'Test',
          'width': 500,
          'height': 500,
          'legend': 'none',
          'pointSize': 5,
          'vAxis': { 'title': 'Test', 'titleTextStyle': { 'color': 'red'}},
          'hAxis': { 'format': 'MMM d, y', 'title': 'Date', 'titleTextStyle': { 'color': 'red'} },
         'interpolateNulls': true,
        'pieSliceText': 'label',
        'series': {
          '0': { 'color': 'blue' },
          '1': { 'color': 'red', 'lineWidth': 3, 'pointSize': 0, 'visibleInLegend': 'false' },
          '2': { 'color': 'red', 'lineWidth': 3, 'pointSize': 0, 'visibleInLegend': 'false'},
        }
      },


      'view': {'columns': [0, 1, 3, 4]}
    });



     // Create a dashboard
    new google.visualization.Dashboard(document.getElementById('dashboard')).
        bind([categoryPicker2], [chart]).
        // Draw the entire dashboard.
        draw(data);

Upvotes: 1

Views: 1203

Answers (1)

asgallant
asgallant

Reputation: 26340

You can either set the formatted values of those columns to the value in "Test", or you can add custom tooltip columns to your view.

Set the formatted value of columns 3 and 4 to the value of column 1

view: {
    columns: [0, 1, {
        sourceColumn: 3,
        calc: function (dt, row) {
            return {v: dt.getValue(row, 3), f: dt.getFormattedValue(row, 1)};
        }
    }, {
        sourceColumn: 4,
        calc: function (dt, row) {
            return {v: dt.getValue(row, 4), f: dt.getFormattedValue(row, 1)};
        }
    }]
}

Create custom tooltip columns:

view: {
    columns: [0, 1, 3, {
        type: 'string',
        role: 'tooltip',
        calc: function (dt, row) {
            // return to whatever text you want in the tooltip
            return dt.getFormattedValue(row, 1);
        }
    }, 4, {
        type: 'string',
        role: 'tooltip',
        calc: function (dt, row) {
            // return to whatever text you want in the tooltip
            return dt.getFormattedValue(row, 1);
        }
    }]
}

Upvotes: 1

Related Questions