I am trying to make the background transparent for some charts I have made with google charts. They work perfectly in everything except IE7 and 8, I get a white backgound.
I have tried every combination I can find for the color attribute to change it but nothing works.
The only thing left to try was a suggesting that someone made on here a few months ago for someone else with the same issue. Their suggestion was...
For a transparent background, use chf=bg,s,FFFFFF00
But I have no idea how to implement this?
chf=bg,s,FFFFFF00
is a code for the old Google Image Charts.
Those codes will only work with the non-SVG versions of charts. Google Image Charts have been deprecated (as you can see from their help pages), so unless you want to implement the old-style charts, you won't be able to implement the above code on your new, fancy, interactive SVG charts.
For the new fancy SVG charts, I have luck with
backgroundColor: "transparent"
Copy-paste this in to Google Playground to test:
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Bulgaria', 'Denmark', 'Greece'],
['2003', 1336060, 400361, 1001582, 997974],
['2004', 1538156, 366849, 1119450, 941795],
['2005', 1576579, 440514, 993360, 930593],
['2006', 1600652, 434552, 1004163, 897127],
['2007', 1968113, 393032, 979198, 1080887],
['2008', 1901067, 517206, 916965, 1056036]
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Cups"},
backgroundColor: "transparent"}
);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;" bgcolor="#E6E6FA">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
This is just the standard bar chart example with two things added:
bgcolor="#E6E6FA" to the body element (make it blue so we can tell if transparent)
backgroundColor="transparent" to the options (make it transparent)
This works in FireFox. I don't know if it works in IE7 (no testing environment). Let us know if it works.
change as appropriate in the config file that the pie chart is located on.
I had this chart under a donate.php as example:
FROM
$chartURL = 'http://chart.apis.google.com/chart?chf=bg,s,f9faf7&cht=p&chd=t:'.$percent.',-'.(100-$percent).'&chs=200x200&chco=639600&chp=1.57';
TO
$chartURL = 'http://chart.apis.google.com/chart?chf=bg,s,FFFFFF00&cht=p&chd=t:'.$percent.',-'.(100-$percent).'&chs=200x200&chco=639600&chp=1.57';
that code let me have transparency when it was a white background! thank you.
Related
I am having a problem getting Chart.js to display a Chart when using the Chart.min.js file that was installed as a result of using:
npm install chart.js --save (However, if use the CDN supplied file - the chart will display)
To avoid putting paths into my code, I copied the Chart.min.js file from the install directory: ./node_modules/chart_js/dist/Chart.min.js to the directory where my web page is. Was this the right file to copy? Anyways, when I reload the App into the Browser, I get a blank display. There are no error messages at all.
However, if I instead use the CDN supplied file: <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script>
Everything works. The Chart fully displays.
Here is the HTML file:
<html>
<head>
<meta charset="utf-8"/>
<title>Chart.js demo</title>
<script src="Chart.min.js" </script>
</head>
<body>
<h1>Chart.js Sample</h1>
<canvas id="countries" width="600" height="400"></canvas>
<script>
var pieData = [
{
value: 20,
color:"#878BB6"
},
{
value : 40,
color : "#4ACAB4"
},
{
value : 10,
color : "#FF8153"
},
{
value : 30,
color : "#FFEA88"
}
];
// Get the context of the canvas element we want to select
var countries= document.getElementById("countries").getContext("2d");
new Chart(countries).Pie(pieData);
</script>
</body>
</html>
So, what am I doing wrong? Is there an issue with the download?
Appreciate any help with this!
I am running on Mac OS X 10.10.5
I have tried this using both the Safari and FireFox browsers,
and have the same issue of the local Chart.min.js file not working.
You better use the latest syntax for creating your chart, instead of old one.
also, this is the correct directory where chart.js file resides, when installed through npm :
./node_modules/chart.js/dist/Chart.min.js
Here is the full code that works perfectly on Chrome, Firefox and Safari :
<html>
<head>
<meta charset="utf-8" />
<title>Chart.js demo</title>
<script src="./node_modules/chart.js/dist/Chart.min.js"></script>
</head>
<body>
<h1>Chart.js Sample</h1>
<div class="chart-container" style="width: 600px; height: 400px">
<canvas id="countries"></canvas>
</div>
<script>
var pieData = {
datasets: [{
data: [20, 40, 10, 30],
backgroundColor: ["#878BB6", "#4ACAB4", "#FF8153", "#FFEA88"]
}]
};
// Get the context of the canvas element we want to select
var countries = document.getElementById("countries").getContext("2d");
new Chart(countries, {
type: 'pie',
data: pieData
});
</script>
</body>
</html>
I think the problem must be the improper closing of the script tag. See below.
Before:
<script src="Chart.min.js" </script>
After:
<script src="Chart.min.js"></script>
Here is a demo with a local Chart.min.js File for your reference!
JSFiddle Demo
The problem:
When I resize the window the images will only sometimes change. It's almost like they get stuck / the resize event is not being captured properly by foundation. If I start resizing the window like a rabid monkey it will occasionally swap the image. If I resize the window according to the media queries and then refresh the page the correct image renders. This appears to be a resize only issue.
Other details:
I have just a regular .html file (new site hosted from IIS on a separate machine) with a simple demo of Interchange image swapping.
If I manually call: $(document).foundation("interchange", "resize"); the image will swap correctly.
Foundation version 5.3.1
Testing in Chrome 36 and Firefox 31.
So far the only built in media query that works is (default). (medium), (large) etc. do nothing, I have to write out the actually query to get it to work (or manually create them using named_queries. This may be an unrelated problem but does seem strange to me.
<html>
<head>
<title>Interchange</title>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script type='text/javascript' src='/foundation.js'></script>
<script type='text/javascript' src='/foundation.interchange.js'></script>
<link rel='stylesheet' href='/foundation.css' />
<link rel='stylesheet' href='/normalize.css' />
<script type='text/javascript'>
$(function () {
$(document).foundation();
$(document).on('replace', function (e, newVal) {
console.log(newVal);
});
// Adding this horrible hack will make it work 100% of the time.
// BUT THIS SHOULD NOT BE NECESSARY!
//$(window).resize(function(){
// $(document).foundation("interchange", "resize");
//})
});
</script>
</head>
<body>
<img data-interchange="[/images/space-small.jpg, (default)], [/images/space-medium.jpg, (only screen and (min-width: 641px))], [/images/space-large.jpg, (only screen and (min-width: 1000px))]">
</body>
</html>
I found the answer to my own question and it was indeed that odd media queries issue I described in the OP that lead me to the problem.
Foundation's javascript is dependent on the Foundation CSS existing before it initializes.
All I had to do was make sure the CSS link was above the script include and everything started working as expected.
Not sure this will help anyone, but I was getting the same issue but ONLY on Chrome. I added the foundation.min.css to my page like b1j suggested and voila! unfortunately though as I used the SASS version I couldn't just leave this included into the page as I would have double the amount of css included into my page. So I pasted the foundation.css contents into a style tag in the head of my document and deleted its contents bit by bit until I found the piece of css that fixed it. Here it is:
meta.foundation-mq-small {
font-family: "/only screen/";
width: 0em; }
meta.foundation-mq-medium {
font-family: "/only screen and (min-width:40.063em)/";
width: 40.063em; }
meta.foundation-mq-large {
font-family: "/only screen and (min-width:64.063em)/";
width: 64.063em; }
meta.foundation-mq-xlarge {
font-family: "/only screen and (min-width:90.063em)/";
width: 90.063em; }
meta.foundation-mq-xxlarge {
font-family: "/only screen and (min-width:120.063em)/";
width: 120.063em; }
Not sure why this wasn't compiled into my CSS but I will look, but incase anyone needs a quick fix, this should do it!
I am creating a Google Geo Chart that includes cities in the US, South Korea, Taiwan, China, and India. If I use regions: 'world' tshe map will be too big and the city bubbles will be barely visible. I am using the following options:
var options = {
region: 'world',
displayMode: 'markers',
resolution: 'provinces'
}
Would it be possible to create a map with two or more regions?
For example, US and Asia. I am thinking about setting the regions using something like the following:
var options = {
region: '019','142',
displayMode: 'markers',
resolution: 'provinces'
}
No, it is not possible to create a map of two regions on the same map.
The reason is that Google geocharts rely on SVG images of whatever region they are showing, and there are a limited amount of SVG maps that exist within the API (this is why some countries do not work with resolution: 'provinces').
However, it is possible to create a datatable with data for both regions, and use the same datatable to populate two separate maps (one of each area).
For instance:
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['geochart']});
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
// Draw First Chart
var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
geochart.draw(data, {width: 556, height: 347, region: '019', resolution: 'countries'});
// Draw Second Chart
var geochart2 = new google.visualization.GeoChart(
document.getElementById('visualization2'));
geochart2.draw(data, {width: 556, height: 347, region: '150', resolution: 'countries'});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization"></div>
<div id="visualization2"></div>
</body>
</html>
Also note that the "Americas" region (019) is as tall as the world map, and won't actually save you any space over "world". I would suggest using North America or just 'US' if there aren't any markers in Canada or Mexico.
I'm trying to use google visualization api in jboss seam 2 project.
I have created a simple example which is actually taken from Google Quick Start page.
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['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 pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
When I open it as file in web browser it works nicely. But when I put it to my Jboss Seam 2 project and open in web browser, it generates an error message "b[c] is undefined" on red background.
And here what I see when I open page source in browser:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="/MCMS/a4j/g/3_3_3.Final/org/ajax4jsf/framework.pack.js" type="text/javascript"></script>
<script src="/MCMS/a4j/g/3_3_3.Final/org/richfaces/ui.pack.js" type="text/javascript"></script>
<link class="component" href="/MCMS/a4j/s/3_3_3.Final/org/richfaces/skin.xcss/DATB/eAGTKJ8eErp8hjQADcsDKg__" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['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 pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
As you can see Jboss Seam adds some other script srcs for a4j.
Is it possible that a4j javascript conflicts with google visualization api javascript?
Is there any idea how to resolve this?
Finally found the solution here
Google charts error:Cannot read property 'length' of undefined; Debugging error in Google Charts
and here
http://code.google.com/p/google-visualization-api-issues/issues/detail?id=501 .
Adding the following hack in the beginning of the script:
Array.prototype.reduce = undefined;
or more gracefully:
Array.prototype.reduce=function(fun){var len=this.length>>>0;if(typeof fun!="function")throw new TypeError;if(len==0&&arguments.length==1)throw new TypeError;var i=0;if(arguments.length>=2)var rv=arguments[1];else{do{if(i in this){var rv=this[i++];break}if(++i>=len)throw new TypeError;}while(true)}for(;i<len;i++)if(i in this)rv=fun.call(undefined,rv,this[i],i,this);return rv};
solves the problem!
this is my code:
<html>
<title>report</title>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
function soso(){
var data_flow = new google.visualization.DataTable();
data_flow.addColumn('string', 'Version');
data_flow.addColumn('number','flow');
data_flow.addRows([['20120125',466.0],['20120130',173.0],['20120203',160.0],['20120208',529.0],['20120213',210.0]]);
var options = {width: 2200, height: 540,title: ''};
var chart_flow= new google.visualization.LineChart(document.getElementById('checkin-column'));
chart_flow.draw(data_flow, options);
}
function loveu()
{
var data_flow_1 = new google.visualization.DataTable();
data_flow_1.addColumn('string', 'Version');
data_flow_1.addColumn('number','flow');
data_flow_1.addRows([['20120125',466.0],['20120130',173.0],['20120203',160.0],['20120208',529.0],['20120213',210.0]]);
var options5 = {width: 2200, height: 540,title: ''};
var chart_flow_1= new google.visualization.LineChart(document.getElementById('redemption-table'));
chart_flow_1.draw(data_flow_1, options5);
}
function drawChart() {
soso();
loveu();
}
google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<h4>dfs</h4><br>
<br><br>
<div id="checkin-column"></div>
<p></p>
<div id="redemption-table"></div>
</body>
</HTML>
When I delete: "< h4 > dfs < / h4 >" I get the charts working fine in iexplorer, but when I don't delete it, the first chart work fine but the second one the axis of it doesn't appear!! Try it and you will see that (on Internet Explorer).
I need a help in solving this issued, I am facing strange behavior of these charts when there is more than one in the same page
Problem: I have 3 charts on a page but the axis for the 3rd chart are not showing in IE
Resolution: I have the 3 divs as separate rows in a table and all 3 charts are now showing their axis!
Hope this helps.
Cheers