We Keep Coding

Prefix inside Google geo chart

I'm trying to get "$" next to amount. Should look like: "$0.005"
How to do that?
PS. prefix: '$' doesn't work.
<script>
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Spent', 'Clicks'],
['US', 0.005, 1],
]);
var options = {
colorAxis: {
colors: ['grey','#444']
},
prefix: '$'
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>

you can use object notation to provide both the value (v) and formatted value (f)...
{v: 0.005, f: '$0.005'}
see following working snippet...
google.charts.load('current', {
packages: ['geochart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Country', 'Spent', 'Clicks'],
['US', {v: 0.005, f: '$0.005'}, 1],
]);
var options = {
colorAxis: {
colors: ['grey','#444']
},
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="regions_div"></div>
or use a number formatter to format the data table (which does the same as above)...
var formatTooltip = new google.visualization.NumberFormat({
pattern: '$#,##0.000'
});
formatTooltip.format(data, 1);
see following working snippet...
google.charts.load('current', {
packages: ['geochart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Country', 'Spent', 'Clicks'],
['US', 0.005, 1],
]);
var options = {
colorAxis: {
colors: ['grey','#444']
},
};
var formatTooltip = new google.visualization.NumberFormat({
pattern: '$#,##0.000'
});
formatTooltip.format(data, 1);
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="regions_div"></div>

TypeError: google.visualization is undefined

I've been trying to use the Google Charts API to my Dashboard and see these error on firebug.
TypeError: google.visualization is undefined
Here is my JS code:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Title', 'Values'],
['TBK', 8],
['Fluor Corp', 12],
['Fluor Group', 41],
['Bechtel', 39]
]);
var options = {
legend: 'none',
pieSliceText: 'none',
chartArea: {
width: '90%',
height: '90%',
},
colors:['#fa424a','#ac6bec','#fdad2a','#00a8ff','#46c35f','#e84f9a'],
slices: {
0: { color: '#fa424a' },
1: { color: '#ac6bec' },
2: { color: '#fdad2a' },
3: { color: '#00a8ff' }
},
pieHole: 0.8,
tooltip: { trigger: 'none' }
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
</script>

need to load the library before using the callback...
google.charts.load('current', {packages:['corechart']}); // <-- load
google.charts.setOnLoadCallback(drawChart);
you can also add the callback to the load statement...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
or use the promise the load statement returns...
google.charts.load('current', {
packages:['corechart']
}).then(drawChart);

Its a bit later but i have the same problem.
My problem was that the object google.visualization wasn`t ready when i call the function (i call in execution time, not with setOnLoadCallback).
So i call the function a bit later with an interval and its works for me:
function drawChart(){
timeout1 = setInterval(
function () {
data = new google.visualization.DataTable();
data.addColumn('string', 'Colum1');
data.addColumn('number', 'Colum2');
data.addColumn('number', 'Colum3');
data.addColumn('number', 'Colum4');
chart = new google.visualization.LineChart(document.getElementById('div_Chart'));
.
.
.
clearInterval(timeout1);
}, 100);
}
I hope its help u.

Change google charts options not working

I've created a google chart and the data is pulled from a database and structured to meet the requirements of the chart, however, for some reason, whenever I try change the options for the chart it just wont work.
I need to move the legend to below the chart and make the point size on the chart 30 pixels.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Aspect');
data.addColumn('number', 'Leaner');
data.addColumn('number', 'Norm');
data.addColumn('number', 'Grade');
data.addRows([['Agility ', 11.5, 10, 11.5]]);
var options =
{
legend: { position: 'bottom' },
chart: {title: 'Student Results'},
legend:{position: 'bottom', textStyle: {color: 'black', fontSize: 16}},
pointSize:30,
};
var chart = new google.charts.Line(document.getElementById('line_chart'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>
<div id="line_chart" style='width:calc(100% - 80px); height:400px; margin:auto;'></div>
Any suggestions on why the legend wont move or point size wont change, the chart data can have many aspects (x axis value), I need to point-size to change so that it wont look blank with just a aspect (x axis value)

there are several options that simply don't work in Material charts
and it appears Line requires two data points per series before drawing anything
I would recommend using 'corechart' instead
there is an option for theme: 'material' to get the base look and feel close to a Material chart
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Aspect');
data.addColumn('number', 'Leaner');
data.addColumn('number', 'Norm');
data.addColumn('number', 'Grade');
data.addRows([['Agility 1', 11.5, 10, 11.5]]);
var options = {
chartArea: {
width: '90%'
},
height: 600,
legend: {
position: 'bottom',
textStyle: {
color: 'black',
fontSize: 16
}
},
pointSize: 30,
theme: 'material',
title: 'Student Results',
vAxis: {
viewWindow: {
min: 0,
max: 15
}
},
width: '100%'
};
var chart = new google.charts.Line(document.getElementById('line_chart'));
chart.draw(data, google.charts.Line.convertOptions(options));
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages:['line', 'corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>Core Chart</div>
<div id="chart_div"></div>
<div>Material Chart</div>
<div id="line_chart"></div>

Multiple Google Charts

I am attempting to create multiple Google Charts, but I can't get it to work. I've tried everything I could find on Stack Overflow. I most recently attempted this fix, but it didn't work. I think I may be missing something. Can anyone see anything wrong with the code as it stands now?
Expected Behavior:
Page displays bar graph. Then, a line graph is displayed underneath the bar graph.
Current Behavior:
Page displays bar graph. Line graph does not display.
Here is JSFiddle. On a side note, the JavaScript only seems to work inline on JSFiddle. If I moved it into the JavaScript section, it did not function properly. Maybe this has something to do with the external resource that was called?
Regardless, I am currently doing this all inline for this experiment.
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://www.google.com/jsapi" type="text/javascript">
</script>
<script type="text/javascript">
// Load the Visualization API and the chart packages.
google.load('visualization', '1.1', {
packages: ['line', 'bar', 'corechart']
});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the charts, passes in the data and
// draws them.
function drawChart() {
// Create the data table.
var BarData = new google.visualization.arrayToDataTable([
['', 'Customer', 'Segment Avg'],
['TTM Sales', 4, 2],
['TTM Orders', 5, 3],
['TTM Categories', 7, 4]
]);
// Create the data table.
var LineData = new google.visualization.arrayToDataTable([
['Year', 'Customer', 'Segment Avg'],
['2011', 4, 5],
['2012', 5, 3],
['2013', 4, 2]
]);
// Set chart options
var BarOptions = {
chart: {
title: 'Performance',
},
width: 900,
height: 500
};
// Set chart options
var LineOptions = {
chart: {
title: 'Sales History'
},
width: 900,
height: 500
};
// Instantiate and draw our chart, passing in some options.
var BarChart = new google.charts.Bar(document.getElementById(
'bar_chart'));
BarChart.draw(BarData, BarOptions);
var LineChart = new google.charts.Line(document.getElementById(
'line_chart'));
LineChart.draw(LineData, LineOptions);
};
</script>
<title>Test Chart Page</title>
</head>
<body>
<!--Divs that will hold the charts-->
<div id="bar_chart"></div>
<div id="line_chart"></div>
</body>
</html>

It seems some changes have been made in the latest version of Google Charts API that causes this behavior, but there is a reliable way to render multiple charts on a single page. The idea is to render the next chart once the previous one is rendered, for that purpose you could utilize ready event handler.
Having said that, replace
var barChart = new google.charts.Bar(document.getElementById('bar_chart'));
barChart.draw(barData, barOptions);
var lineChart = new google.charts.Line(document.getElementById('line_chart'));
lineChart.draw(lineData, lineOptions);
with
var barChart = new google.charts.Bar(document.getElementById('bar_chart'));
google.visualization.events.addOneTimeListener(barChart, 'ready', function () {
var lineChart = new google.charts.Line(document.getElementById('line_chart'));
lineChart.draw(lineData, lineOptions);
});
barChart.draw(barData, barOptions);
Working example
google.load('visualization', '1.1', {
packages: ['line', 'bar', 'corechart']
});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawCharts);
function drawCharts() {
// Create the data table.
var barData = new google.visualization.arrayToDataTable([
['', 'Customer', 'Segment Avg'],
['TTM Sales', 4, 2],
['TTM Orders', 5, 3],
['TTM Categories', 7, 4]
]);
// Create the data table.
var lineData = new google.visualization.arrayToDataTable([
['Year', 'Customer', 'Segment Avg'],
['2011', 4, 5],
['2012', 5, 3],
['2013', 4, 2]
]);
// Set chart options
var barOptions = {
chart: {
title: 'Performance',
},
width: 900,
height: 500
};
// Set chart options
var lineOptions = {
chart: {
title: 'Sales History'
},
width: 900,
height: 500
};
var barChart = new google.charts.Bar(document.getElementById('bar_chart'));
google.visualization.events.addOneTimeListener(barChart, 'ready', function () {
var lineChart = new google.charts.Line(document.getElementById('line_chart'));
lineChart.draw(lineData, lineOptions);
});
barChart.draw(barData, barOptions);
};
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<div id="bar_chart"></div>
<div id="line_chart"></div>

Works with setTimeout:
// Instantiate and draw our chart, passing in some options.
var BarChart = new google.charts.Bar(document.getElementById(
'bar_chart'));
setTimeout(function() {
BarChart.draw(BarData, BarOptions);
}, 0);
var LineChart = new google.charts.Line(document.getElementById(
'line_chart'));
setTimeout(function() {
LineChart.draw(LineData, LineOptions);
}, 1e3);
Updated JSFiddle

The code below works by creating the second chart inside of setTimeout.
I don't know what is causing the problem,
but at least you have a workaround.
fiddle
<script type="text/javascript">
// Load the Visualization API and the chart packages.
google.load('visualization', '1.1', {
packages: ['line', 'bar', 'corechart']
});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the charts, passes in the data and
// draws them.
function drawChart() {
// Create the data table.
var BarData = new google.visualization.arrayToDataTable([
['', 'Customer', 'Segment Avg'],
['TTM Sales', 4, 2],
['TTM Orders', 5, 3],
['TTM Categories', 7, 4]
]);
// Create the data table.
var LineData = new google.visualization.arrayToDataTable([
['Year', 'Customer', 'Segment Avg'],
['2011', 4, 5],
['2012', 5, 3],
['2013', 4, 2]
]);
// Set chart options
var BarOptions = {
chart: {
title: 'Performance',
},
width: 900,
height: 500
};
// Set chart options
var LineOptions = {
chart: {
title: 'Sales History'
},
width: 900,
height: 500
};
// Instantiate and draw our chart, passing in some options.
var BarChart = new google.charts.Bar(document.getElementById(
'bar_chart'));
var LineChart = new google.charts.Line(document.getElementById(
'line_chart'));
LineChart.draw(LineData, LineOptions);
setTimeout(function(){
BarChart.draw(BarData, BarOptions);
},50);
};
</script>
<body>
<!--Divs that will hold the charts-->
<div id="bar_chart"></div>
<div id="line_chart"></div>
</body>

Google fixed this timing issue in a recent release, available with the frozen version loader: https://developers.google.com/chart/interactive/docs/library_loading_enhancements#frozen-versions
Relevant thread: https://groups.google.com/forum/?utm_medium=email&utm_source=footer#!msg/google-visualization-api/KulpuT418cg/yZieM8buCQAJ

Scatter google chart - string values in Y axis

Since yesterday i try to draw chart with google charts. I have one problem. I tried to put strings on Y-axis, and script doesn't display anything.
I tried to do this with code:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['scatter']});
google.setOnLoadCallback(drawChart);
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'document');
data.addColumn('string', 'term');
data.addRows([
[1 , 'word1'] , [3 , 'word2']
]);
var options = {
width: 900,
height: 500,
chart: {
title: 'weight of terms'
},
axes: {
x: {
0: {side: 'bottom'}
}
}
};
var chart = new google.charts.Scatter(document.getElementById('scatter_top_x'));
chart.draw(data, google.charts.Scatter.convertOptions(options));
}
</script>
That gives me a result: http://darium.linuxpl.eu/chart/
The goal: I wanna draw sometnig like this-
https://www.imageupload.co.uk/images/2015/08/25/asd.png
Is there any way to draw what I want?

Data column(s) for axis #0 cannot be of type string
So you need to change the axis,
google.load('visualization', '1.1', {packages: ['scatter']});
google.setOnLoadCallback(drawChart);
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'term');
data.addColumn('number', 'document');
data.addRows([
['word1', 1] , ['word2', 3]
]);
var options = {
width: 900,
height: 500,
chart: {
title: 'weight of terms'
},
axes: {
x: {
0: {side: 'bottom'}
}
}
};
var chart = new google.charts.Scatter(document.getElementById('scatter_top_x'));
chart.draw(data, google.charts.Scatter.convertOptions(options));
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="scatter_top_x"></div>