Set colors in Google Geochart Laravel?

Asked

Viewed 74 times

1

I’m trying to define the colors of the Brazilian states, which are coming from mysql via json the information, but I’m not having resulted in the return of colors. Ex.:

São Paulo in color Blue - Minas Gerais in color Green - Rio Grande do Sul in color Red

and so on, how can I define these colors? Since I am doing it in the following way:

colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
backgroundColor: '#81d4fa',
datalessRegionColor: '#f8bbd0',
defaultColor: '#f5f5f5',

JSON

 $estados = Estados::selectRaw('SUM(valor) as valor, estado as estado')->groupBy('estado')->get();

    $arrayEstados[] = ['Estado', 'Valor'];

    foreach($estados as $key => $valor) {
        $arrayEstados[++$key] = [$valor->estado, $valor->valor]; 
    }

    dd($arrayEstados);

    return view('home', compact('notasEntrada', 'notasSaida', 'valorNotasEntrada', 'valorNotasSaida'))->with('nome', json_encode($array))->with('estados', json_encode($arrayEstados));

return print JSON

and so I’m not controlling the colors of the states.

Thanks in advance

mysql json laravel google-charts
Show 2 more comments

1 answer

0


For testing was used the string(json) already with the values.

The page will receive the string(json) of controller in the variable treated as $estados in the code. How do you get a json on the page, you need to pass the content to an array. Just pass the array to the API function.

To add colors it is necessary to make settings on options with :

colorAxis:{
    colors:['red','green','blue'],
    minValue: 1,
    maxValue: 210
},

The way the api works is as follows: Colors are placed in degrade form by putting the first color of the setting('red') to the lowest value and the last (in the case 'blue') to the highest.

Working example:

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", {packages:["geochart"]});
        google.setOnLoadCallback(drawRegionsMap);

        function drawRegionsMap() {
            let json = '[{"nome":"Distrito Federal","valor":100}, {"nome":"Goiás","valor":50}, {"nome":"Paraiba","valor":30}, {"nome":"Rio de Janeiro","valor":20}, {"nome":"Rio Grande do Sul","valor":1}, {"nome":"São Paulo","valor":210}]';

            // let estados = JSON.parse('<?php echo $estados ?>'); //seu caso
            let estados = JSON.parse(json); //teste
            let arr_estados = new Array();
            arr_estados.push(['Estado', 'Valor']);

            for (var k in estados) {
                arr_estados.push([estados[k].nome, estados[k].valor]);
            }

            var data = google.visualization.arrayToDataTable(arr_estados);

            var options = {
                region:'BR',
                displayMode: 'auto',
                resolution:'provinces',
                colorAxis:{
                    colors:['red','green','blue'],
                    minValue: 1,
                    maxValue: 210
                },
            };

            var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

            chart.draw(data, options);
        }
    </script>
    </head>
    <body>
        <div id="regions_div" style="width: 900px; height: 500px;"></div>
    </body>
</html>

Discussion to resolve

Browser other questions tagged mysql json laravel google-charts

You are not signed in. Login or sign up in order to post.