Customize tool tip text

[jaijil]

Hi,

I am new to Google Visualization API. I am creating a line chart. I
need to customize the text in the tool tip box just like in google
analytics. How is it possible.

Thanks in advance
Jais

[visigoth]

Custom formatting of the tooltip text is not currently supported.

Please read this thread for a possible workaround.

Also, if you tell us more about the exact Google Analytics behaviour you are trying to mimic maybe we can come up with ideas.

[jaijil]

Hi ,

This is the thing exactly I need.

http://stackoverflow.com/questions/6013053/how-to-change-tooltip-text-for-google-chart-api

Instead of a single date, I need to show a starting and end date as a range.

Any thoughts?

Thanks,

Jais

[asgallant]

How is your data organized?  Can you show us an example of your chart?  This may be possible if your data is stored in certain ways.

[jaijil]

Hi,

This is the code I am using.

google.load("visualization", "1", {packages:["corechart"]});

 google.setOnLoadCallback(drawVisualization);

 var callCount = "<?= $chartCount?>";

 var callDate = "<?= $chartDate?>";

 var callCountPre = "<?= $chartCountPre?>";

 var newCount = callCount.split("-");

 var newDate = callDate.split("-");

    for (var i = 0; i<7;i++) {

     if (!newCount[i])

     newCount[i] = 0;

       eval("callCounts" + i + " = newCount[i]");

       eval("callDates" + i + " = newDate[i]");      

     }

 var newCountPre = callCountPre.split("-");

    for (var i = 0; i<7;i++) {

     if (!newCountPre[i])

     newCountPre[i] = 0;

       eval("callCountsPre" + i + " = newCountPre[i]");

     }

  function drawVisualization() {

      var data = new google.visualization.DataTable();

    data.addColumn('string', 'Range');

      data.addColumn('number', '<?= $selectedRange?>');

      data.addColumn('number', '<?= $selectedRangePre?>');  

      data.addRow([callDates0, parseInt(callCounts0), parseInt(callCountsPre0)]);

      data.addRow([callDates1, parseInt(callCounts1), parseInt(callCountsPre1)]);

      data.addRow([callDates2, parseInt(callCounts2), parseInt(callCountsPre2)]);

      data.addRow([callDates3, parseInt(callCounts3), parseInt(callCountsPre3)]);

      data.addRow([callDates4, parseInt(callCounts4), parseInt(callCountsPre4)]);      

      data.addRow([callDates5, parseInt(callCounts5), parseInt(callCountsPre5)]);

      data.addRow([callDates6, parseInt(callCounts6), parseInt(callCountsPre6)]);

  // Create and draw the visualization.

      new google.visualization.LineChart(document.getElementById('visualization')).

      draw(data, {curveType: "function",

                  width: 500, height: 200,

                  colors:['#1770CB','#F4C741'],

                  vAxis: {maxValue: <?= $maxChartValue ?>}

      });

   }

    </script>

    <div id="visualization"></div>

[asgallant]

Can you post the javascript generated by the PHP (ie, view the page in a browser an copy-paste the source)?

Going with what you posted, though, I would guess that you are passing a string of dash-separated dates to callDate, which would make each callDatesi (incidentally, why not just use the newDate array for this?) a single date.  Assuming then, that you want your date range for the tooltip to be newDate[i] - newDate[i+1], try replacing your data.addRow lines with this (for my own sanity, I am using arrays instead of your method, but this is easily enogh adapted to your method:

var rows = [];
for (i = 0; i < 7; i++) {
    rows[i] = [
        {v: callDates[i], f: callDates[i] + " - " + callDates[i+1]},
        parseInt(callCounts[i]),
        parseInt(callCountsPre[i])
    ];
}
data.addRows(rows);

You will have to pass one more date in your chartDate list (for the end range of the 7th date).  Note that I haven't tested this, it may mess with the axis as well as the tooltips.

[jais]

Hi,

Thanks for your support.

Is it possible to change the tool tip text alone so that x-axis value and tool tip value will be different. So the tool tip text show the range(Mon - Tue) and the axis point it should Mon.

Thanks,

Jais

[Viz Kid]

At the moment this is not supported.

  Viz Kid

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/Tj0QmG6jT44J.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.