Change bar color Chart Bar Google

Question

Change bar color Chart Bar Google

Navigation

#1 by (0 votes)

0

I would like your help to change the color of the bars, I can not even put the colors as parameters.

I'm using the Google Charts API.

Thanks for the help.

<script type="text/javascript">
      google.charts.load('current', {'packages': ['corechart', 'bar']});
      google.charts.setOnLoadCallback(drawStuff);

    function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
            ['Votação', 'Porcentagem'],
            ["King's pawn (e4)", 44],
            ["Queen's pawn (d4)", 31],
            ["Knight to King 3 (Nf3)", 12],
            ["Queen's bishop pawn (c4)", 10],
            ['Other2', 3]
        ]);

        var options = {
            title: 'Gráfico da Votação',
            width: 700,
            height: 400,
            legend: {position: 'none'},
            chart: {
                title: 'Gráfico da Votação',
                subtitle: 'votação por percentual'
            },
            bars: 'horizontal', // Required for Material Bar Charts.
            axes: {
                x: {
                    0: {side: 'top', label: 'Porcentagem'} // Top x-axis.
                }
            },
            bar: {groupWidth: "90%"},
            colors: ['#1b9e77', '#d95f02', '#7570b3', '#7570b3', '#7570b3']
        };

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        chart.draw(data, options);
    }
</script>

google-charts

asked by anonymous 28.09.2017 / 21:41

1 answer

Constant change of dates in CodeIgniter Mount a script of similar information (PHP, Procedure, etc.)

score 0 · Answer 1

It was quite simple to solve the solution I changed google.charts.Bar by google.visualization.BarChart and included in the options theme: 'material', stayed like this

<script>
    var urlSite = "<?php echo esc_url(get_template_directory_uri()); ?>";
    var urlNormalSite = "<?php echo esc_url(home_url()); ?>";

    google.charts.load('current', {'packages': ['corechart', 'bar']});
    google.charts.setOnLoadCallback(drawStuff);

    function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
            ['Votação', 'Porcentagem', {role: 'style'}, {role: 'annotation'}],
            <?php


            foreach ($infoVotacao["listaOpcoesVotacao"] as $opcoes) {
                $r = new ColorsRandomHelper();
                echo "[\"" . $opcoes["descricaoOpcao"] . "\", " . $opcoes["subTotalPercent"] . ",'#".$r->getColorRandom()."','" . $opcoes["subTotalPercent"] . "%'],\n";
            }
            ?>


        ]);

        var options = {
            title: 'Gráfico da Votação',
            width: 700,
            height: 400,
            legend: {position: 'none'},
            theme: 'material',
            chart: {
                title: 'Gráfico da Votação',
                subtitle: 'votação por percentual'
            },
            bars: 'horizontal', // Required for Material Bar Charts.
            axes: {
                x: {
                    0: {side: 'top', label: 'Porcentagem'} // Top x-axis.
                }
            },
            bar: {groupWidth: "90%"}

        };

        var chart = new google.visualization.BarChart(document.getElementById('top_x_div'));
        chart.draw(data, options);
    }
</script>