Diff chart: "Current" & "Previous" labels customization

[Niko Moilanen]

How you can replace those "Current" & "Previous" labels by more informatic ones?

[Tiago Piccinin]

I'm looking for this information as well. Please let me know if u have some news.

[Jon Orwant]

You're talking about customizing tooltips, and information on how to do that is here:

https://developers.google.com/chart/interactive/docs/customizing_tooltip_content

If you have any trouble, let me know and I'll try to help.

Jon

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

[Jorge Lanzarotti]

I'm still figuring how to do this... I have tried to add the tooltip as role (see code), but the diff charts shows All series on a given axis must be of the same data type×

<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", '1.1', {packages:['corechart']});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var oldData = new google.visualization.DataTable();
    oldData.addColumn('string', 'Year');
    oldData.addColumn('number', 'Sales');
    // A column for custom tooltip content
    oldData.addColumn({type: 'string', role: 'tooltip'});
    oldData.addRows([
      ['2010', 600,'$600K in our first year!'],
      ['2011', 1500, 'Sunspot activity made this our best year ever!'],
      ['2012', 800, '$800K in 2012.'],
      ['2013', 1000, '$1M in sales last year.']
    ]);

    var newData = new google.visualization.DataTable();
    newData.addColumn('string', 'Year');
    newData.addColumn('number', 'Sales');
    // A column for custom tooltip content
    newData.addColumn({type: 'string', role: 'tooltip'});
    newData.addRows([
      ['2010', 600,'$600K in our first year!'],
      ['2011', 1500, 'Sunspot activity made this our best year ever!'],
      ['2012', 800, '$800K in 2012.'],
      ['2013', 1000, '$1M in sales last year.']
    ]);

    

    var colChartBefore = new google.visualization.ColumnChart(document.getElementById('colchart_before'));
    var colChartAfter = new google.visualization.ColumnChart(document.getElementById('colchart_after'));
    var colChartDiff = new google.visualization.ColumnChart(document.getElementById('colchart_diff'));
    var barChartDiff = new google.visualization.BarChart(document.getElementById('barchart_diff'));

    var options = {
      tooltip: {isHtml: true},
      legend: 'none'
    };
    colChartBefore.draw(oldData, options);
    colChartAfter.draw(newData, options);

    var diffData = colChartDiff.computeDiff(oldData, newData);
    colChartDiff.draw(diffData, options);
    barChartDiff.draw(diffData, options);
  }
</script>

<span id='colchart_before' style='width: 450px; height: 250px; display: inline-block'></span>
<span id='colchart_after' style='width: 450px; height: 250px; display: inline-block'></span>
<span id='colchart_diff' style='width: 450px; height: 250px; display: inline-block'></span>
<span id='barchart_diff' style='width: 450px; height: 250px; display: inline-block'></span>​

El miércoles, 11 de diciembre de 2013 15:25:32 UTC-3, orw...@google.com escribió:

You're talking about customizing tooltips, and information on how to do that is here:

https://developers.google.com/chart/interactive/docs/customizing_tooltip_content

If you have any trouble, let me know and I'll try to help.

Jon

On Wed, Dec 11, 2013 at 12:14 PM, Tiago Piccinin <tiagop...@gmail.com> wrote:

I'm looking for this information as well. Please let me know if u have some news.

Em quinta-feira, 5 de dezembro de 2013 07h41min39s UTC-2, Niko Moilanen escreveu:

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 google-visualization-api+unsub...@googlegroups.com.

[asgallant]

Annotations are either not supported, or they are broken for Diff charts.  I filed a bug report on this (here), you can "star" the issue to get updates on it.

[letus...@gmail.com]

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

[Chad Geary]

Would it be possible to see these lines in context with the rest of the chart script/HTML?

I'd like to adopt this fix, this is what I've setup (everything is fine otherwise) - I'm just not seeing the changes to the 'Previous data' label(s):

<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 'IP 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 (rowColumn) {

            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>

[Nisha J]

This is still not working. I have tried with the above solution. Not helpful. Spent so much time on this. Feels like google google chart is not good. Anybody got solution for this or any other good diff charts? Help me please

[jebaraj Pernatshaw]

$("text").each(function () {

      if ($(this).text() == "Previous data") {

          $(this).text('Popularity');

      }

  });

Try this it will work.