Google Liniendiagramm Tool-Tipps mit mehreren Spalte Daten

Question

Ich habe ein Liniendiagramm, das 2 Zeilen zeigt: eine stellt einen Datumsbereich mit Werten und die andere Zeile ist die vorherige Periode (auch Daten) mit den vorherigen Werten.

Ich möchte das relevante Datum und den Wert in den Tool-Tipps für jede Zeile anzeigen.

die Tooltips wird wie folgt aussehen:

das, was ich habe jetzt ist:

function drawChart(chartData, elemId, chartWidth, chartHeight, startDate, endDate) { 
    var chartToDraw = new google.visualization.DataTable(); 
    chartToDraw.addColumn('date', 'Date'); 
    chartToDraw.addColumn('number', 'Value'); 
    chartToDraw.addColumn({ 
     type: 'string', 
     role: 'tooltip', 
     properties: { 
      html: true 
     }, 
     calc: function (dt, row) { //doesn't get called for some reason 
      var date = dt.getValue(row, 2); 
      var val = dt.getValue(row, 1); 
      return '<div>' + date + ' </br><b>value:</b>' + val + '</div>'; 
     } 
    }); 
    chartToDraw.addColumn('number', 'Previous value'); 
    chartToDraw.addColumn({ 
     type: 'string', 
     role: 'tooltip', 
     properties: { 
      html: true 
     }, 
     calc: function (dt, row) { //doesn't get called for some reason 
      var date = dt.getValue(row, 4); 
      var val = dt.getValue(row, 3); 
      return '<div>' + date + ' </br><b>value:</b>' + val + '</div>'; 
      } 
     }); 

     if (chartData['dataPoints'] != undefined) { 
      var currentDataArr = []; 
      for (var point in chartData['dataPoints']) { 
       currentDataArr.push([ 
        chartData['dataPoints'][point].date, 
        chartData['dataPoints'][point].value, 
        chartData['dataPoints'][point].date, 
        chartData['dataPoints'][point].prevValue, 
        chartData['dataPoints'][point].prevDate 
       ]); 
      } 
     } 
     chartToDraw.addRows(currentDataArr); 



    var timeFormatter = new google.visualization.DateFormat({ 
     pattern: "MMM dd" 
    }); 
    timeFormatter.format(chartToDraw, 0); 
    timeFormatter.format(chartToDraw, 2); 
    timeFormatter.format(chartToDraw, 4); 

    var options = { 
     legend: 'none', 
     'width': chartWidth, 
     'height': chartHeight, 
     pointSize: 4, 
     colors: ['#0289cb', '#01af8a'], 
     tooltip: { 
      isHtml: true 
     }, 
     chartArea: { 
      width: '80%' 
     }, 
     hAxis: { 
      slantedText: true, 
      slantedTextAngle: 30, 
      viewWindow: { 
       min: startDate, 
       max: endDate 
      }, 
      gridlines: { 
       count: -1, 
       units: { 
        days: {format: ['MMM dd']}, 
        hours: {format: ['HH:mm', 'ha']} 
       } 
      }, 
      minorGridlines: { 
       units: { 
        hours: {format: ['hh:mm:ss a', 'ha']}, 
        minutes: {format: ['HH:mm a Z', ':mm']} 
       } 
      } 
     }, 
     vAxis: { 
      viewWindow: { 
       min: 0 
      } 
     } 
    }; 

    var chart = new google.visualization.LineChart(document.getElementById(elemId)); 
    chart.draw(chartToDraw, options); 
} 

Das Problem ist, dass alles, was ich jetzt auf der Tool- sehen Tipps sind nur die richtigen Daten und mir fehlt der Wert. Ich bin mir nicht sicher, warum die calc Funktionen nicht aufgerufen werden, wenn ich den Tool-Tip-Typ zu string ändern, bekomme ich nur einen mismatch type Fehler.

Hier ist, was ich bei bisher haben gesucht:

Google Chart HTML Tooltip displays html text

Add tooltips to a Google Line Chart with multiple data series - with simplified test case and screenshot

aber alle Änderungen i resamble tat gescheitert, diese Antworten. Was mache ich falsch?

Answer 1

Berechnete Spalten arbeiten nur mit den DataView Class
die Nicht DataTable Class ...

verwenden zu können, laden Datatable ersten, erstellen Sie dann die Dataview
Verwenden setColumns Ihre Tooltips hinzufügen ...

Zeichnen von der Frage, könnte es in etwa so aussehen ...

var chartToDraw = new google.visualization.DataTable(); 
chartToDraw.addColumn('date', 'Date'); 
chartToDraw.addColumn('number', 'Value'); 
chartToDraw.addColumn('number', 'Previous value'); 
chartToDraw.addColumn('date', 'Previous Date'); 

if (chartData['dataPoints'] != undefined) { 
    var currentDataArr = []; 
    for (var point in chartData['dataPoints']) { 
     currentDataArr.push([ 
      chartData['dataPoints'][point].date, 
      chartData['dataPoints'][point].value, 
      chartData['dataPoints'][point].prevValue, 
      chartData['dataPoints'][point].prevDate 
     ]); 
    } 
} 
chartToDraw.addRows(currentDataArr); 

// create view over data, set columns 
var dataView = new google.visualization.DataView(chartToDraw); 
dataView.setColumns([0, 1, 
    { 
    type: 'string', 
    role: 'tooltip', 
    properties: { 
     html: true 
    }, 
    calc: function (dt, row) { 
     var date = dt.getValue(row, 0); 
     var val = dt.getValue(row, 1); 
     return '<div>' + date + ' </br><b>value:</b>' + val + '</div>'; 
    } 
    }, 
    2, 
    { 
    type: 'string', 
    role: 'tooltip', 
    properties: { 
     html: true 
    }, 
    calc: function (dt, row) { 
     var date = dt.getValue(row, 3); 
     var val = dt.getValue(row, 2); 
     return '<div>' + date + ' </br><b>value:</b>' + val + '</div>'; 
    } 
    } 
]);