Would it be possible to view this with the rest of the chart's script?
I'd like to adopt the work done, but I'm having an issue getting the script
to function properly:
<html>
<head>
<!--Load the Ajax API-->
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js";></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";></script>
<script type="text/javascript">
google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var totalData = new google.visualization.DataTable(<?php echo
$jsonTableTotal; ?>);
var leasedData = new google.visualization.DataTable(<?php echo
$jsonTableLeased; ?>);
var colChartDiff = new
google.visualization.ColumnChart(document.getElementById('colchart_diff'));
var options = {title: '<?php echo 'Utilization per service in latest
poll period. \nNote - Previous data represents total available
addresses.\nRouter - ' . htmlspecialchars($_GET["router"]);?>',
diff: { newData: { widthFactor: 0.8 } },
hAxis: { title: 'Leased within Total per Service' },
chartArea: {'width': '70%', 'height': '70%'},
fontSize: 13,
fontName: 'Calibri'};
var diffData = colChartDiff.computeDiff(totalData, leasedData);
colChartDiff.draw(diffData, options);
google.visualization.events.addListener(colChartDiff,
'onmouseover', function (columnRow) {
selectHandler();
});
$("text").each(function () {
if ($(this).text() == "Previous data") {
$(this).text('Proper text');
}
});
function selectHandler()
{
$('#colChartDiff').on('DOMNodeInserted', function (e) {
if ($(e.target).is('.google-visualization-tooltip')) {
{
// now you will have access to the "tooltip"
// and can do the needed changes
}
}
});
}
}
</script>
</head>
<body>
<!--this is the div that will hold the chart-->
<span id='colchart_diff' style='width: 1600px; height: 900px; display:
inline-block'></span>
</body>
</html>
On Tuesday, May 17, 2016 at 3:33:55 PM UTC-4, [email protected] wrote:
>
> I had to do a couple of things to fix this issue:
>
> 1) Put mouseover event on chart with a function called "selectHandler"
> google.visualization.events.addListener(barChartDiff, 'onmouseover',
> function (rowColumn) {
> selectHandler();
> });
>
> 2) After I fixed initiated the grids I used some JQuery selector on the
> "text" element
> $("text").each(function () {
> if ($(this).text() == "Previous data") {
> $(this).text('Proper text');
> }
>
> });
>
> 3) Create a function to trigger when a new element is interested in the
> chart div or "barchart_diff"
>
> function selectHandler()
> {
> $('#barchart_diff').on('DOMNodeInserted', function (e) {
>
> if ($(e.target).is('.google-visualization-tooltip')) {
> {
> // now you will have access to the "tooltip"
> // and can do the needed changes
>
> }
> }
> });
> }
>
> Hope this helps.
>
> Drew
>
> On Thursday, December 5, 2013 at 4:41:39 AM UTC-5, Niko Moilanen wrote:
>>
>> How you can replace those "Current" & "Previous" labels by more
>> informatic ones?
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/c0cc9a52-7570-4c94-9481-5d7ab5c16605%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
