Google Chart pass ID of a bank column

Question

I would like to know how to pass a value transparently to the graph, I have to get the ID of a column in the bank. The way I’m doing I need to pass this way: Column Title | ID <- This data comes from the database.

<script>
function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Unidade');
    data.addColumn('number', 'Quantidade');

    data.addRows([
        <?php echo gerarGrafico();?>
    ]);


    var chart = new google.visualization.ColumnChart(document.querySelector('#chart_div'));

    google.visualization.events.addListener(chart, 'select', function () {
        var selection = chart.getSelection();
        if (selection.length) {
            var row = selection[0].row;
            //pega o id da unidade
            var unidadeID = (data.getValue(row, 0));
            var pegaIDUnidade = unidadeID.split("|");
            var idUnidade = pegaIDUnidade[1].trim();

            //filtra somente processos da unidade
            window.location.href = "processos_cadastrado.php?id_unidade="+idUnidade;

            var view = new google.visualization.DataView(data);
            view.setColumns([0, 1, {
                type: 'string',
                role: 'style',
                calc: function (dt, i) {
                    return (i == row) ? 'color: red' : null;
                }
            }]);

            chart.draw(view, {
                height: 400,
                title: 'Processos por Unidade'
            });
        }
    });

    chart.draw(data, {
        height: 400,
        title: 'Processos por Unidade'
    });
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
</script>

Answer 1

Use Wrapper to insert all Googlechart packages, so you don’t have to pass dependencies on load:

google.visualization.events.addListener(chart, 'select', function () {
//dentro do seu método de events listener, insira o wrapper
  var wrapper = new google.visualization.ChartWrapper();
      wrapper.draw();
   ...
}

On the call just load this:

google.load('visualization', '1.1', {callback: drawChart});

And instead of using DataView(data) to assemble the data list, use in array format, then you assemble your collection this way, which can be the database data, in a json via $.ajax({}):

var collection = [
                   ["Unidade", "Quantidade"],
                   ["A",  519368.43],
                   ["B", 2645777.75],
                   ["C", 2227381.79]
                 ];

var numberFormat =  {
                fractionDigits: 0,
                groupingSymbol: '.',
                negativeColor: 'red',
                negativeParens: true,
                prefix: ''};
        }

var dateFormat = { pattern: "dd/MM/yyyy" };

var options = {
                title: "titulo do chart",
                animation: {easing: 'inAndOut', duration: 2000},
                pointSize: 15,
                fontSize: 10,
                bar: {groupWidth: '75%'},
                titleFontSize: 26,
                tooltip: {isHtml: true, fontSize: 12},
                hAxis: {
                    direction: 1,
                    slantedText: true,
                    slantedTextAngle: 15
                },
                width: 800,
                height: 400,
                legend: {position: 'top', maxLines: 3},
                isStacked: true
            };



var data = new google.visualization.arrayToDataTable(collection);

var formatter = new google.visualization.NumberFormat(numberFormat);

for (var i in collection) {
     formatter.format(data, i);
 }

var dateFormatter = new google.visualization.DateFormat(dateFormat);
                    dateFormatter.format(data, 0);
 wrapper.setChartType('BarChart');
 wrapper.setContainerId('#id_elemento_div');
 wrapper.setDataTable(data);
 wrapper.setOptions(options);
 /* se precisar criar uma ação secundária...
 wrapper.getChart().setAction({
                       id: 2,
                       text: 'um texto aqui',
                       action: function () { //seus métodos }
                   });
*/

In PHP you cast a type: (string) "noma da unidade"; (int) 123; Here’s an example of how to manipulate subtitle texts:

$('svg').bind('DOMSubtreeModified', function () {
  var elems = $('svg').find('text:contains("%)")');
  if (elems.length == 0) return;
  var elem = $(elems.first());
  elem.text("<SEU TEXTO AQUI>");
});