Birden çok sütun verisi ile google çizgi grafik araç ipuçları

Question

2 satır gösteren bir çizgi grafiğim var: biri değerlerle tarih aralığını temsil ediyor ve diğer satır önceki değerlerle (tarihler de) önceki değerdir.

Her satıra ilişkin araç ipuçlarındaki ilgili tarihi ve değeri göstermek istiyorum.

alet uçları aşağıdaki gibi görünecektir:

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); 
} 

sorun tüm i araç-üzerinde Şu anda görmek şudur:

bu ben şu anda ne var ipuçları sadece doğru tarihler ve değeri kaçırıyorum. calc işlevlerinin neden çağrılmadığından emin değilim, araç ipucu türünü string olarak değiştirirseniz bir mismatch type hatası alıyorum.

Google Chart HTML Tooltip displays html text

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

ama bu cevapları resamble için yaptığı tüm değişiklikleri başarısız oldu: İşte

ı şimdiye kadar baktım budur. Neyi yanlış yapıyorum?

Answer 1

Hesaplanan sütunlar yalnızca

yüklemek, kullanmak için ... DataView Class
Değil DataTable Class ile çalışmak senin DataTable, sonra ... senin ipuçları eklemek DataViewDataGrid
Kullanım setColumns oluşturmak

Sorudan çizim, bu gibi bir şey olabilir ...

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>'; 
    } 
    } 
]);