Develop Reference

How may I change the size of markers in Google Geochart?

I have a basic geochart that charts some world cities.
How May I change the marker size, and make them smaller as they are overlapping right now.
I was able to change the size with this property
defaultColor: 'red'
function drawMarkersMap(div_id, cities_array) {
var data = google.visualization.arrayToDataTable(cities_array);
var options = {
displayMode: 'markers',
**defaultColor: 'red',**
colorAxis: {colors: ['red']},
backgroundColor: '#eaf9ff',
};
var chart = new google.visualization.GeoChart(document.getElementById(div_id));
chart.draw(data, options);
$(window).resize(function(){
draw_map('chart_div', data, options)
});
};

Google chart colors disappeared on live project but works good in offline

After uploading local laravel project to godaddy website, the chart colors are disappeared.
I created a google pie chart in laravel and it works well. I have uploaded my project to live. But in live the google pie chart is not loading
<script type="text/javascript">
var analytics1 = <?php echo $alliance; ?>;
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart1);
/* call pie chart1*/
function drawChart1()
{
var data1 = google.visualization.arrayToDataTable(analytics1);
var options1 = {
title:'2014 National Alliance data',
chartArea:{right:0,top:0,width:"120%",height:"120%"},
pieHole:0.4,
legend: { position: 'top', alignment: 'start' },
};
var chart1 = new google.visualization.PieChart(document.getElementById('chart_div1'));
chart1.draw(data1, options1);
}
</script>
The chart is completely grayed out with single color.
]1
Below is the image in local project

How to apply formats in google charts simple method

I have seen a lot of answers on the web for this question but everybody have answered in a different way. They have answered with examples of code 90+ lines of code so it's hard to understand the method for applying formats. Can somebody please explain the method of applying formats in google charts and there are different methods for different types of charts? I need to apply the formats on bar charts and donut charts. I want to change format to currency and decimals.
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Marketplaces', 'Number Of Orders','Value of Order'],
var chart = new google.visualization.PieChart(document.getElementById('sales_total_quantity'));
chart.draw(data, options);
}

in order to format the chart values, as shown when the bar or pie slice is hovered,
you need to apply a format to the data table.
you can use google's number formatter.
var patternCurrency = '$#,##0.00';
// format third column of data table
var formatCurrency = new google.visualization.NumberFormat({
pattern: patternCurrency
});
formatCurrency.format(data, 2);
if you also want the y-axis of the bar chart to show as currency,
you need to use config option --> vAxis.format
var optionsBar = {
// format y-axis
vAxis: {
format: patternCurrency
}
};
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Marketplaces', 'Number Of Orders', 'Value of Order'],
['A', 10, 100.11],
['B', 20, 200.22],
['C', 30, 300.33],
]);
var patternCurrency = '$#,##0.00';
// format third column of data table
var formatCurrency = new google.visualization.NumberFormat({
pattern: patternCurrency
});
formatCurrency.format(data, 2);
var optionsBar = {
tooltip: {
trigger: 'both'
},
// format y-axis
vAxis: {
format: patternCurrency
}
};
var chartBar = new google.visualization.ColumnChart(document.getElementById('chart-bar'));
google.visualization.events.addListener(chartBar, 'ready', function () {
// show tooltip
chartBar.setSelection([{column: 2, row: 0}]);
});
chartBar.draw(data, optionsBar);
var optionsPie = {
height: 300,
pieHole: 0.2
};
var chartPie = new google.visualization.PieChart(document.getElementById('chart-pie'));
chartPie.draw(data, optionsPie);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart-bar"></div>
<div id="chart-pie"></div>

How to customize google chart with hyperlink in the label?

I have different countries which I get with json and add to google charts. Each country has a link to a specific site. It works for me. But the name of the tooltip/label is a link. How can I remove the link in the tooltip and add the name of the country?
And how can change the country border color to white?
thx in advance.
HTML
<div id="visualization"></div>
JavaScript
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = new google.visualization.arrayToDataTable([
['Country','Link',],
['Canada','http://www.google.ca'],
['Russia','http://www.bbc.com'],
['Australia','http://www.nytimes.com'],
]);
var options = {
colorAxis: {colors: 'white'},
backgroundColor: '#81d4fa',
datalessRegionColor: '#f8bbd0',
defaultColor: 'black',
displayMode:'regions',
tooltip: {textStyle: {color: '#FF0000'}, trigger:'focus',isHtml: true},
legend:'none',
height:300,
width:400
};
var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
google.visualization.events.addListener(chart, 'select', myClickHandler);
chart.draw(data, options);
function myClickHandler(){
var link = data.getValue(chart.getSelection()[0]['row'],1);
// Change the current site
location.href = link;
}
}

first, recommend not using jsapi to load the library
according to the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.
<script src="https://www.gstatic.com/charts/loader.js"></script>
this will only change the load statement, to...
google.charts.load('current', {
callback: drawVisualization,
packages:['geochart']
});
(the callback can be added to the load statement as well)
next, according to the data format for regions mode,
the second column should be a number (not a string / link)
but since the link is needed for the click handler, use a DataView to hide the column from the chart
^ this will fix the tooltip -- adding the name of the country instead of the link
the number column drives the shading of the country, according to the colorAxis
if no number is provided, as in the question, then colorAxis will have no effect
last, there are no standard options to control the country border
see following working snippet...
google.charts.load('current', {
callback: drawVisualization,
packages:['geochart']
});
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Country','Link',],
['Canada','http://www.google.ca'],
['Russia','http://www.bbc.com'],
['Australia','http://www.nytimes.com'],
]);
var view = new google.visualization.DataView(data);
view.hideColumns([1]);
var options = {
backgroundColor: '#81d4fa',
datalessRegionColor: '#f8bbd0',
defaultColor: 'black',
displayMode: 'regions',
tooltip: {textStyle: {color: '#FF0000'}, trigger:'focus',isHtml: true},
legend: 'none',
height:300,
width:400
};
var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
google.visualization.events.addListener(chart, 'select', myClickHandler);
chart.draw(view, options);
function myClickHandler(){
var selection = chart.getSelection();
if (selection.length > 0) {
var link = data.getValue(selection[0].row, 1);
window.open(link, '_blank');
}
}
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="visualization"></div>

Google charts not showing axis labels

This is not for the image charts. I have the following code that generates the right chart but the labels don't show. The chart div is in an other div that is used as a tab on my page. When I run the function when the tab containing the chart is not selected, the chart appears with no labels. When I run the function with the tab selected, the labels appear.
drawChart()
}
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Weeks');
data.addColumn('number', 'Indice');
data.addRows(arrIndice1);
var options = {
width:"900",
height:"500",
legend: "none",
title: 'Indice 1',
chartArea:{left:20,top:50,width:"85%",height:"75%"}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

chartArea options seem to cover the axis labels when they increase the chart size. Try removing the chartArea:{left:20,top:50,width:"85%",height:"75%"} part.