Mostrando moneda en el gráfico de Google API

Question

Estoy usando Google chart API para mostrar un gráfico de líneas, pero necesito los números para mostrar como moneda. En el gráfico en sí, pude obtener los números para que se muestren como moneda, pero cuando el mouse se desplaza sobre un punto y aparece el cuadro de diálogo, el número no se muestra como se especifica.

 <script type="text/javascript"> 
      google.load("visualization", "1", {packages:["corechart"]}); 
      google.setOnLoadCallback(drawChart); 

      function drawChart() { 

       var data = google.visualization.arrayToDataTable(<?php echo $data; ?>); 


       var options = { 
        chartArea:{left:40,top:10}, 
        pointSize: 6, 
        vAxis: {format:'$###,###,###.00'}, // Money format 
        legend: {position:'none'} 



       }; 

       var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
       chart.draw(data, options); 

      } 
     </script> 

Como se puede ver en esta imagen, la columna vertical visualizan a la izquierda no utilizar los puntos decimales como se especifica usando vAxis.format en el código anterior, pero el cuadro de diálogo no muestra los decimales o el signo de dólar (I agregó el signo de dólar después de la captura de pantalla).

http://i48.tinypic.com/121uznm.jpg

¿Cómo puedo obtener el número en el cuadro de diálogo para mostrar los mismos que los números en la columna vertical alineado a la izquierda?

Traté de actualizar la matriz de PHP que estoy utilizando para completar los datos en formato de moneda allí, pero luego el gráfico de Google no representa, ya que no es un simple dígito.

Answer 1

Hay un formato para especificar tanto el valor bruto como el valor formateado para una celda ahora [1]: al cargar el valor en el gráfico, en lugar de, p. Ej. addRow(['2012-08-31, 4]); sería addRow(['2012-08-31', {v: 4, f: '$4.00'}]); Más ejemplos de esa sintaxis están salpicados a través de los documentos pero no pude encontrar un buen lugar para enlazarlos. No debería ser demasiado difícil cambiar el método por el cual se genera el objeto $ data de su ejemplo para incluir ese formato, pero también hay otras opciones de formato.

Si prefiere definir ese formato en el JS por cualquier razón, puede usar un NumberFormatter.

[1] No creo que tuvieran esta sintaxis cuando comencé a usar las herramientas de gráficos. Sin embargo, no tengo idea de cuándo se agregó, o si simplemente nunca lo noté hasta hace poco.

Answer 2

Otra opción que me pareció muy útil, y similar en concepto al método arrayToDataTable() es la sintaxis de inicializador literal JavaScript de la siguiente manera:

var data = new google.visualization.DataTable(
       { 
        cols: [ 
         {id: 'date', label: 'Date', type: 'string'}, 
         {id: 'parnter1', label: 'Partner A', type: 'number'}, 
         {id: 'partner2', label: 'Partner B', type: 'number'} 
        ], 
        rows: [ 
         { c: [{ v: '06/2012' }, { v: 12345, f: '$12,345' }, { v: 98765, f: '$98,765'}] }, 
         { c: [{ v: '07/2012' }, { v: 10123, f: '$10,123' }, { v: 123123, f: '$123,123'}] } 
        ] 
       } 
      ); 

https://google-developers.appspot.com/chart/interactive/docs/datatables_dataviews

Answer 3

Prueba esto:

var formatter = new google.visualization.NumberFormat({pattern:'###,###'}); formatter.format(data, 1);

Funcionó muy bien para mí. Se encuentra en: Comma Separated Data in Google Visualisation API

Answer 4

Este es el formato perfecto para la moneda brasileña:

var formatter = new google.visualization.NumberFormat({decimalSymbol: ',',groupingSymbol: '.', negativeColor: 'red', negativeParens: true, prefix: 'R$ '}); 
    formatter.format(data, 1); 

Works dólar whit bien también, sólo cambia R$ a $

10500.5 estancia 10.500,50, más prefijo

10500 quedarse 10.500,00, más prefix