CODEWITHSUNDEEP
javascriptgoogle-visualization
Adam
Adam

Reputation: 1285

Tooltip html google charts

I have a tooltip setting as below in JS

function createDashboard4() {
      var json_results = getData('http://localhost:9999/countcarbytype')
      data_results = []
      var Header = ['car Type', 'count', 'region',{'type': 'string', 'role': 'tooltip', 'p': {'html': true}}];
      data_results.push(Header)
      for (var i = 0; i < json_results.length; i++) {
        var value = json_results[i];
        var URL = ""+value["imageURL"][0]

        data_results.push([value["_id"]["title"], value["countofcars"], value["_id"]["region"]],createCustomHTMLContent(URL,value["_id"]["title"], value["countofcars"], value["_id"]["region"]))
      }
      console.log(data_results)
      var data = google.visualization.arrayToDataTable(data_results);


      // Define a StringFilter control for the 'Name' column
      var stringFilter = new google.visualization.ControlWrapper({
        'controlType': 'StringFilter',
        'containerId': 'control4',
        'options': {
          'filterColumnLabel': 'region'
        }
      });

      // Define a table visualization
      var table = new google.visualization.ChartWrapper({
        'chartType': 'BarChart',
        'containerId': 'chart4',
        'options': { 'height': 400, 'width': 500, 'title': 'Count of cars by Model Type', 'legend': 'none','tooltip': { isHtml: true } },
        'view': { 'columns': [0, 1] }
      });

      // Create the dashboard.
      var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).
        // Configure the string filter to affect the table contents
        bind(stringFilter, table).
        // Draw the dashboard
        draw(data);

      return stringFilter;
    }

    google.setOnLoadCallback(drawVisualization);

I did an implementation of createCustomHTMLContent

function createCustomHTMLContent(imageURL, title,  totalCount, region) {
  return '<div style="padding:5px 5px 5px 5px;">' +
    '<img src="' + imageURL + '" style="width:75px;height:50px"><br/>' +
    '<table class="medals_layout">' + '<tr>' +
    '<td><img src="https://upload.wikimedia.org/wikipedia/commons/1/15/Gold_medal.svg" style="width:25px;height:25px"/></td>' +
    '<td><b>' + title + '</b></td>' + '</tr>' + '<tr>' +
    '<td><img src="https://upload.wikimedia.org/wikipedia/commons/1/15/Gold_medal.svg" style="width:25px;height:25px"/></td>' +
    '<td><b>' + totalCount + '</b></td>' + '</tr>' + '<tr>' +
    '<td><img src="https://upload.wikimedia.org/wikipedia/commons/5/52/Bronze_medal.svg" style="width:25px;height:25px"/></td>' +
    '<td><b>' + region + '</b></td>' + '</tr>' + '</table>' + '</div>';
}

However its giving me an error Uncaught Error: Row 0 has 3 columns, but must have 4. I am sure i already followed the procedure to add in a HTML tool tip.

What did i do wrong?

EDIT 1: enter image description here EDIT 2:

Sample data:

[{"_id":{"title":"Mercedes Benz C Class 220 CDI Elegance AT (2009) in Mumbai","region":"Mumbai"},"countofcars":2,"imageURL":["https://imguct3.aeplcdn.com/img/340x192/lis/201807/1405424_71524_1_1530437796289.jpeg?v=27","https://imguct3.aeplcdn.com/img/340x192/lis/201807/1405424_71524_1_1530437796289.jpeg?v=27"]},{"_id":{"title":"Mercedes Benz C Class 220 CDI Sport (2012) in Coimbatore","region":"Coimbatore"},"countofcars":2,"imageURL":["https://imguct3.aeplcdn.com/img/340x192/lis/201806/1402641_71493_1_1530177529608.jpeg?v=27","https://imguct3.aeplcdn.com/img/340x192/lis/201806/1402641_71493_1_1530177529608.jpeg?v=27"]}

Upvotes: 1

Views: 186

Answers (1)

WhiteHat
WhiteHat

Reputation: 61232

closing bracket of the array is out of place...

change this... 

data_results.push([value["_id"]["title"], value["countofcars"], value["_id"]["region"]],createCustomHTMLContent(URL,value["_id"]["title"], value["countofcars"], value["_id"]["region"]))

to this... 

data_results.push([value["_id"]["title"], value["countofcars"], value["_id"]["region"],createCustomHTMLContent(URL,value["_id"]["title"], value["countofcars"], value["_id"]["region"])]);

EDIT

also need to add the tooltip column to the chart view...

change... 

'view': { 'columns': [0, 1] }

to... 

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

Upvotes: 1

Related Questions