Hi I am new to google charts, here I have a Column Chart and a Table. What I am getting now is something like below
Here is the image
But I want the column chart to be displayed something like this :
Here is the image
Here is my code:
<!--
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>
<!--Load the AJAX API-->
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls']});
</script>
<script type="text/javascript">
function drawVisualization(){
var data = google.visualization.arrayToDataTable([
["Period","Type","Name","Unitssold","OrderCount","TotalSales"],
["7/1/2014 12:00:00 AM","Category One","iPod Touch 12Gb",2,2,0],
["7/2/2014 12:00:00 AM","Category One","iPod Touch 12Gb",1,1,800],
["7/2/2014 12:00:00 AM","Category One","iPod Nano 12Gb",1000,100,700],
["7/3/2014 12:00:00 AM","Category One","iPod Touch 12Gb",8,1,360]
]);
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control',
'options': {
'filterColumnLabel':'Period',
'ui': {
'allowTyping': false,
'allowMultiple': false,
'selectedValuesLayout': 'belowStacked',
'allowNone': false
}
}
});
var columnChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart',
'view': {'columns':[2,5]},
'options':{'width':'800'}
});
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table',
'options':{'width':'800'
}
});
new google.visualization.Dashboard(document.getElementById('dashboard')).
bind([categoryPicker], [columnChart, table]).
draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="dashboard">
<table>
<tr>
<td align="center">
<div id="control"></div>
</td>
</tr>
<tr>
<td align="center">
<div id="chart"></div>
<div id="table"></div>
</td>`
</tr>
</table>
</div>
</body></html>
Try This
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Name","TotalSales"],
["iPod Touch 12Gb",0],
["iPod Touch 12Gb",800],
["iPod Nano 12Gb",700],
["iPod Touch 12Gb",360]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Type', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Related
The google chart images were perfectly coming in PDF till few months back.
But now images are not coming.
If I try the html, google chart is coming correctly.
If I try to convert that HTML into PDF using wkhtmltopdf, chart not showing.
I am using wkhtmltopdf from command line.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>GRAPH</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<table width="100%">
<tr>
<td align="center">
<b>GRAPH</b>
</td>
</tr>
<tr>
<td align="center">
<div class="text-center" id="chart_div70918" style="display: block; margin: 0 auto; width: 400px;height: 160px; "></div>
</td>
</tr>
</table>
<script type="text/javascript">
var scr = document.createElement("script");
scr.setAttribute("src",'https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart", "bar"],"callback":"drawChart70918"}]}');
document.head.appendChild(scr);
function drawChart70918() {
var data = google.visualization.arrayToDataTable([
["Subject", "Class Highest", "Marks Obtained", { role: "style" } ]
,["English", 13, 43, "#1909a0"],["Hindi -Oral", 48, 40, "#1909a0"],["Maths", 13, 38, "#1909a0"],["G.k.", 12, 39, "#1909a0"],["Drawing", 48, 44, "#1909a0"] ]);
var view = new google.visualization.DataView(data);
var options = {
fontSize : 6,
fontName: 'Times New Roman',
hAxis :{showTextEvery:1,"slantedText":true, "slantedTextAngle": 45 },
vAxis: {minValue: 0},
legend: { position: "right" },
colors: ['#a5e893', '#1909a0'],
bar: {groupWidth: "40%"},
chartArea:{left:10,top:20,width:'75%',height:'60%'}
};
var chart = new google.visualization.ColumnChart(document.getElementById("chart_div70918"));
chart.draw(view, options);
}
</script>
</body>
</html>
code below.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages:['wordtree']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(
[ ['Phrases'],
['information technology'],
['web'],
['development']
]
);
var options = {
wordtree: {
format: 'implicit',
// word: ''
}
};
var chart = new google.visualization.WordTree(document.getElementById('wordtree_basic'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="wordtree_basic" style="width: 900px; height: 500px;"></div>
</body>
</html>
issue:
expected three items to be rendered, however, we now have four including an erroneous "technology" while view source indicates correct rendering.
tested browser; firefox and chrome.
I'm using Material Bar Charts. However, it turns out that whenever I use a 'base href' on my page, the chart will not function properly (if you hover over the bars they disappear). You can try this out with the code below. The base href does not affect inclusion of the required files at Google (but I imagine there is some CSS being included through the javascript that uses relative paths).
I really want to use a base href. Any idea how to make it function?
IMAGE (mouse is hovering over the first bar, which then disappears):
FUNCTIONAL (no base href):
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200]
]);
var options = {
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
NOT FUNCTIONAL (base href introduced):
<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://yahoo.com/" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200]
]);
var options = {
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
Is there any possibility to generate Google pie chart on my project?
This code display a sum of cells from different id (single id for every year).
<dl>
<dt>2014:</dt>
<dd id="total2014"></dd>
</dl>
<dl>
<dt>2013:</dt>
<dd id="total2013"></dd>
</dl>
<dl>
<dt>2012:</dt>
<dd id="total2012"></dd>
</dl>
The content of id total2014 is still changing, so the best way would be, to generate the pie chart dynamical. I tried with <?php echo '<span id="total2014"></span>' ?> But it doesn't work, the chart disappear. Here's my code:
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Liters'],
['2014', 410], //Here I tried with <?php echo '<span id="total2014"></span>' ?>
['2013', 565],
['2012', 277]
]);
var options = {
title: 'Warki na przestrzeni lat',
pieSliceText: 'value'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<div id="piechart" style="width: 700px; height: 500px; background-color:none;"></div>
The pie chart works perfectly on all browsers except for IE 7 and 8, where all I see is a blank screen. I've looked around but I could not seem to find a solution that works.
Any help is appreciated
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Product', 'Amount'],
['Product 1', 31],
['Product 2', 28],
]);
var options = {
title: 'Pie Chart',
legend: {postion:'right', alignment: 'center'},
pieSliceText: 'value',
chartArea: {left: 10, width:"30%", height:"50%"},
height: 300
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
You have an errant comma at the end of your data array:
var data = google.visualization.arrayToDataTable([
['Product', 'Amount'],
['Product 1', 31],
['Product 2', 28], <-- this comma is the problem
]);
IE does not like commas after the last element in an array, and will kick and scream and throw a tantrum to rival a petulant two-year-old child when it sees one.