Geochart- DataView affecting marker size and color

20 views
Skip to first unread message

Daniel Jones

unread,
May 9, 2019, 4:56:34 PM5/9/19
to Google Visualization API
I'm having a weird issue occur when using DataView to modify columns.  I'm using Geochart with markers as the display mode.  I want each marker to be the same size and, currently, the color to be blue.  The options that I pass work correctly, except when calling setColumns or hideColumns.  The markers go from being smaller and blue to green and two or three times bigger (see screenshots).

I'm passing in an id with the data that is used to make the markers a clickable link.  I do not want the id column to be displayed in the tooltip, which is why I am using the DataView class.  In the code below, I'm using setColumns, but the issue also occurs when calling hideColmns.

<script type="text/javascript">
   
$(function(){
        google
.charts.load('current', {
           
'packages': ['geochart'],
           
'mapsApiKey': '{!! $apiKey !!}'
        });
        google
.charts.setOnLoadCallback(drawMap);
   
});

   
function drawMap(){
       
var zoneData = {!! json_encode($zoneData) !!};
       
zoneData.unshift(['Address', 'Name', 'accountID']);

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

       
var options = {
           
displayMode: 'markers',
           
region: 'US',
           
legend: 'none',
           
colorAxis: {colors: ['#4374e0', '#4374e0']},
           
sizeAxis: {minSize: 5, maxSize: 5}
       
};

       
var view = new google.visualization.DataView(data);
       
view.setColumns([1]);
       
var chart = new google.visualization.GeoChart(document.getElementById('accountMap'));

        google
.visualization.events.addListener(chart, 'select', function(){
           
var selection = chart.getSelection();
           
if(selection.length > 0){
               
var url = '{{route('account.details.route', 'ACCOUNT_ID')}}';

               
var accountID = data.getValue(selection[0].row, 2);
               
url = url.replace('ACCOUNT_ID', accountID);
               
window.open(url, '_blank');
           
}
       
});
       
chart.draw(view, options);
   
}
</script>


Screen Shot 2019-05-09 at 4.49.24 PM.png
Screen Shot 2019-05-09 at 4.49.53 PM.png
Reply all
Reply to author
Forward
0 new messages