i try to create a pie chart on my Website, i found the example code
<div id="piechart"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['TV', 4],
['Gym', 2],
['Sleep', 8]
]);
// Optional; add a title and set the width and height of the chart
var options = {'title':'My Average Day', 'width':550, 'height':400};
// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
(https://www.w3schools.com/howto/tryit.asp?filename=tryhow_google_pie_chart)
But i only get a Error Message :
Table has no columns.
Can someone help me pls?
Thanks
unfortunatelly I cannot comment.
This code works - fiddle. Could you give more details about this project?
sample of code for fiddle
<div id="piechart"></div>
edit:
Table has no columns.
Is this error message from browser console?
Related
I tried to attach a google chart on the popup of a layer in Leaflet by followed this instruction. However, I keep getting this error:
"Uncaught (in promise) Error: Container is not defined"
Here is my javascript function that I use to bind the popup:
function layer_name(feature, layer) {
//...
var popupContent = L.popup().setContent('<div id="chart_div" align = "center">1</div>')
layer.bindPopup(popupContent, {maxHeight: 400});
}
When I tried setting
<div id="chart_div" align = "center">1</div>
as just an HTML element there is no error raised.
I have also define the chart to be drawn at the very beginning of the script as below:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load Charts and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Draw the pie chart for follower chart when Charts is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that draws the bar
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Title', 'Value'],
['A', 317],
['B', 148],
['C', 67],
['D', 27],
['E', 23]
]);
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data);
}
</script>
How can I fix this?
Your problem is that your HTML Element chart_div is not created until the popup is open. But you try to init the chart on the not created HTML Element.
Call drawChart() after the popup is opened.
Update your layer_name function and add the openpopup event to the layer. It will called when you open the popup.
function layer_name(feature, layer) {
//...
var popupContent = L.popup().setContent('<div id="chart_div" align="center">1</div>')
layer.bindPopup(popupContent, {maxHeight: 400});
layer.on('popupopen',function(e){
drawChart();
})
}
I want to remove y-axis values, I just want 0 and 1 once, but there are multiple 1's.
"gridlines: { count: 2}, " is not applying. Is there any solution for this?
the chart is using numbers for the y-axis that have decimal places,
which obviously aren't shown due to the number format
would need to see code, options used on the chart, etc. to understand why
also, drawing the chart before it's container is visible can cause problems
however, the chart in the image appears to be a Material chart
unfortunately, many of the options you could use to correct the issue
are not supported by Material charts, including...
{hAxis,vAxis,hAxes.*,vAxes.*}.gridlines.count
see --> Tracking Issue for Material Chart Feature Parity
recommend using Core chart instead, with following option...
theme: 'material'
using ticks will guarantee which labels appear...
vAxis: {
ticks: [0, 1]
},
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Category', 'Count'],
['Customers Added', 1.4],
['Posts Created', null],
['Cash Transaction', null],
['Card Transaction', null],
['Buy Incomplete', null],
['Merchant SignUp', null]
]);
var container = document.getElementById('chart_div');
var chartCol = new google.visualization.ColumnChart(container);
chartCol.draw(data, {
vAxis: {
ticks: [0, 1]
},
height: 400,
theme: 'material',
title: 'Agent Report'
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
note:
Material --> google.charts.Bar -- packages: ['bar']
Core --> google.visualization.ColumnChart -- packages: ['corechart']
I am using Google DFP adverts and I want to change the position they are in when the site is viewed on mobile.
I have tried duplicating the advert and showing one/ hiding the other but that still shows both adverts.
Is there any way to accomplish this, please see attached image for an example of what I am after.
Well, this is kind of hard, but not impossible. I will give you even more complicated example, where not only the banner could be in different places, but could be with different sizes depending on the device.
Scenario: You have an Ad Unit called adunit1. You want to show in the content on desktop, but on top on mobile. On desktop you want to be 300x250, and on mobile you want to 320x100 or 320x50. We consider desktop everything with viewport width of 970px and mobile anything smaller (could add more cases, but let's not make it too complicated).
Step 1: Go to the Ad Unit options in DFP and add all sizes that this ad unit will display (in our scenario: 300x250, 320x100, 320x50).
Step 2: Create size mappings variable for each sub-scenario. As bellow:
var adunit1desktop = googletag.sizeMapping().addSize([970, 0], [300, 250]).addSize([0, 0], []).build();
Which means: If viewport width is more than 970 AND viewport height is more than 0, serve banner with size 300x250. If smaller, serve nothing.
Now let us make the same for the mobile version with different name of the variable:
var adunit1mobile = googletag.sizeMapping().addSize([970, 0],[]).addSize([0, 0], [[320,100],[320,50]]).build();
Which means: If viewport width is more than 970 AND viewport height is more than 0, serve nothing. If smaller serve either 320x100 OR 320x50.
We will now define the Ad Units, but will make this twice as will assign different size mapping for desktop and mobile.
For desktop:
gptAdSlots[0] = googletag.defineSlot('/XXX/adunit1', [[300, 250], [320, 100], [320, 50]], 'div-banner-desktop').defineSizeMapping(adunit1desktop).addService(googletag.pubads());
Two details to watch here: div-banner-desktop - this is the div id where we want to show the desktop banner. defineSizeMapping(adunit1desktop) - this is how we tell DFP to show this based on the size rules above (in brief: show the desktop banner, only if viewport width is at least 970px).
Now for the mobile:
gptAdSlots[1] = googletag.defineSlot('/XXX/adunit1', [[300, 250], [320, 100], [320, 50]], 'div-banner-mobile').defineSizeMapping(adunit1mobile).addService(googletag.pubads());
Pay attention to three details: div-banner-mobile, defineSizeMapping(adunit1mobile) and gptAdSlots[1] - we increased with 1 for the next slot rendering. If there are more, each should be increased by 1 as well.
Now go to your web site and put the following code where you want to display the desktop banner:
<div id="div-banner-desktop">
<script>
googletag.cmd.push(function() { googletag.display('div-banner-desktop'); });
</script>
</div>
Now place this code where you want to display the mobile banner:
<div id="div-banner-desktop">
<script>
googletag.cmd.push(function() { googletag.display('div-banner-desktop'); });
</script>
</div>
The whole code block should look something like this
<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
</script>
<script>
var gptAdSlots = [];
googletag.cmd.push(function() {
var adunit1desktop = googletag.sizeMapping().addSize([970, 0], [300, 250]).addSize([0, 0], []).build();
var adunit1mobile = googletag.sizeMapping().addSize([970, 0],[]).addSize([0, 0], [[320,100],[320,50]]).build();
gptAdSlots[0] = googletag.defineSlot('/XXX/adunit1', [[300, 250], [320, 100], [320, 50]], 'div-banner-desktop').defineSizeMapping(adunit1desktop).addService(googletag.pubads());
gptAdSlots[1] = googletag.defineSlot('/XXX/adunit1', [[300, 250], [320, 100], [320, 50]], 'div-banner-mobile').defineSizeMapping(adunit1mobile).addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.pubads().collapseEmptyDivs();
googletag.enableServices();
});
</script>
I have the following data in a Google Spreadsheet:
ColumnA ColumnB
Departament Quantity
01/01/2016 23
02/01/2016 43
04/01/2016 5
06/01/2016 65
10/01/2016 12
11/01/2016 32
13/01/2016 22
15/02/2016 2
And want to draw a linechart using HTML Templates: This is my code so far now
<!DOCTYPE html>
<html>
<head>
<script src="https://www.google.com/jsapi"></script>
</head>
<body>
<div id="main"></div>
<script>
google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(getSpreadsheetData);
function getSpreadsheetData() {
google.script.run.withSuccessHandler(drawChart).getSpreadsheetData();
}
function drawChart(rows) {
var options = {'title':'Example','width':400,'height':300};
var data = google.visualization.arrayToDataTable(rows, false);
var chart = newgoogle.visualization.LineChart(document.getElementById("main"));
chart.draw(data, options)
}
</script>
</body>
</html>
My script to read the sheet:
function getSpreadsheetData() {
var ssID = "12GvIStMKqmRFNBM-C67NCDeb89-c55K7KQtcuEYmJWQ",
sheet = SpreadsheetApp.openById(ssID).getSheets()[0],
data = sheet.getDataRange().getValues();
return data;
}
However i cant draw the plot, this issue dissapear when i change the data to a numeric (i.e. 42370), but thats not what i want!
Question is: what do i have to add in order to change to the right format in x axis?
You can use the hAxis.format configuration option
var options = {'title':'Example','width':400,'height':300,//-->'format':'MM/dd/yyyy'};
The valid format options can be found here...
And if you need to load with a specific locale, see this...
I want to create a map chart in Google Chart with all countries and all states in USA.
Is it possible? How can I do it?
Thanks!
google.load("visualization", "1", {packages:["geochart"]});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700],
// and there I want to add states to the chart
['Texas', 300],
['Ohio', 200]
]);
var options = {};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['geochart']}]}"></script>
<div id="regions_div"></div>
It's not possible, when you want to draw regions you must set the sesolution-option to provinces, but in this case it's not possible to draw countries.