google / google-visualization-issues

288 stars 35 forks source link

Bug: Google Chart Gauge sometimes renders the x,y coordinate of the Value field as NaN, thus hiding the value #1298

Open orwant opened 9 years ago

orwant commented 9 years ago
Google Chart Gauge sometimes renders the x,y coordinate of the Value field as NaN, thus
hiding the value.  I wish I could tell you how to repeat this.  I have two sets of
gauges, one set renders correctly, the second set do not.

This only happened recently.  With no changes on my part, this broke a couple of days
ago.  I think it is a bug in the latest release of visualization.

Here is a capture of the DOM.  Note the last <text> tag, which shows the x and y attributes
as "NaN".

<svg width="116" height="116" style="overflow: hidden;">
  <defs id="defs"></defs>
  <g>
    <circle cx="57.5" cy="57.5" r="52" stroke="#333333" stroke-width="1" fill="#cccccc">
    </circle><circle cx="57.5" cy="57.5" r="46" stroke="#e0e0e0" stroke-width="2" fill="#f7f7f7"></circle>
    <text text-anchor="start" x="36.362532495691646" y="81.73746750430836" font-family="arial"
font-size="6" stroke="none" stroke-width="0" fill="#333333">0</text>
    <text text-anchor="start" x="27.776736777788784" y="55.31310536976894" font-family="arial"
font-size="6" stroke="none" stroke-width="0" fill="#333333">5</text>
    <text text-anchor="start" x="44.107890707969865" y="32.835200359835945" font-family="arial"
font-size="6" stroke="none" stroke-width="0" fill="#333333">10</text>
    <text text-anchor="end" x="71.89210929203013" y="32.83520035983594" font-family="arial"
font-size="6" stroke="none" stroke-width="0" fill="#333333">15</text>
    <text text-anchor="end" x="88.22326322221122" y="55.31310536976893" font-family="arial"
font-size="6" stroke="none" stroke-width="0" fill="#333333">20</text>
    <text text-anchor="end" x="79.63746750430838" y="81.73746750430833" font-family="arial"
font-size="6" stroke="none" stroke-width="0" fill="#333333">25</text>
    <path  d="M26.736354292421556,79.24675168281053L23.262615880468395,81.60750186978947M23.308875149145514,73.01219026599472L19.454305721272803,74.6802114066608M21.11034639871535,66.24581452478932L17.011495998572613,67.16201613865479M20.21865201817534,59.187326693153246L16.020724464639272,59.31925188128139M22.434706933530272,45.19570661472798L18.48300770392253,43.77300734969776M25.463951379250936,38.75823448463595L21.848834865834377,36.62026053848439M29.64580156796862,33.002411490765965L26.495335075520693,30.22490165640663M34.83211337191749,28.1321405321989L32.25790374657499,24.813489480221M47.45413619171712,21.70089868141155L46.28237354635236,17.667665201568397M54.44270575656017,20.36775773800357L54.04745084062241,16.186397486670643M61.55729424343981,20.36775773800357L61.95254915937757,16.186397486670636M68.54586380828286,21.700898681411545L69.71762645364763,17.66766520156839M81.1678866280825,28.13214053219889L83.74209625342499,24.813489480220994M86.35419843203138,33.002411490765965L89.5046649244793,30.224901656406633M90.53604862074906,38.758234484635935L94.15116513416561,36.620260538484374M93.56529306646974,45.19570661472798L97.51699229607746,43.773007349697764M95.78134798182467,59.1873266931532L99.97927553536073,59.31925188128133M94.88965360128465,66.24581452478932L98.98850400142739,67.16201613865479M92.69112485085451,73.01219026599469L96.54569427872723,74.68021140666076M89.26364570757846,79.24675168281051L92.73738411953161,81.60750186978944"
stroke="#666666" stroke-width="1" fill-opacity="1" fill="none"></path>
    <path d="M34.24121215213201,81.758787847868L28.301515190165006,87.698484809835M24.813671756003373,52.74380197464825L16.517089695004216,51.42975246831031M42.745919208751225,28.06218078727084L38.93239901093903,20.577725984088552M73.25408079124877,28.062180787270837L77.06760098906096,20.577725984088545M91.18632824399663,52.743801974648235L99.48291030499578,51.4297524683103M81.75878784786802,81.75878784786798L87.69848480983504,87.69848480983497"
stroke="#333333" stroke-width="2" fill-opacity="1" fill="none"></path>
    <g>
      <text text-anchor="middle" x="NaN" y="NaN" font-family="arial" font-size="12"
stroke="none" stroke-width="0" fill="#000000">1</text>
      <path d="M24.916777029017524,80.48333511408522C56.347474869114734,55.56838311163279,67.92578490012667,49.4771076437387,68.7520474655693,50.692916087922306C69.57831003101194,51.908724532105914,59.652525130885266,60.43161688836721,24.916777029017524,80.48333511408522"
stroke="#c63310" stroke-width="1" fill-opacity="0.7" fill="#dc3912"></path>
      <circle cx="57.5" cy="57.5" r="6" stroke="#666666" stroke-width="1" fill="#4684ee"></circle>
    </g>
  </g>
</svg>

Original issue reported on code.google.com by dzechiel on 2013-08-29 23:30:48

orwant commented 9 years ago
The same with me, I was using the jsapi and a few days ago(maybe a week) it stopped
rendering the text label. There wasn't any recent changes made to the code. Follows
the constructor:

        <script type='text/javascript' src='https://www.google.com/jsapi'></script>
        <script type='text/javascript'>
            if (typeof google == 'object') {
                google.load('visualization', '1', {packages:['gauge']});
                function drawChart() {
                    var Arr = [
                        {'Label':'Utilização Trab', 'Value':<?=($HT_HD) ? $HT_HD :
0 ?>,  'id':'HT_HD', 'low':70, 'high':90}
                    ];
                    for(var i=0; i<Arr.length; i++){
                        var data = google.visualization.arrayToDataTable([
                          ['Label', 'Value'],
                          [Arr[i].Label, Arr[i].Value]
                        ]);

                        var options = {
                            width: 170, height: 160,
                            redFrom: 0, redTo: Arr[i].low,
                            yellowFrom: Arr[i].low, yellowTo: Arr[i].high,
                            greenFrom: Arr[i].high, greenTo: 100,
                            minorTicks: 5, max: 100
                        };
                        var el = document.getElementById(Arr[i].id);
                        var chart = new google.visualization.Gauge(el);
                        chart.draw(data, options);
                    }
                }
                google.setOnLoadCallback(drawChart);
            }
</script>

                            <div id="HT_HD"
                                 title="Utilização do Trabalho = (Horas Trab / Horas
Disp) * 100
                                 <br/><br/>Meta: 90%"/>

Original issue reported on code.google.com by caio.appelt on 2013-09-04 16:55:55

orwant commented 9 years ago
I'm the original reporter.  I note that this issue seems to have fixed itself in the
March 25, 2014 release.  Have others seen the problem disappear?

Original issue reported on code.google.com by dzechiel on 2014-05-13 17:55:56