Dynamic Google Pie Chart in Wordpress - google-visualization

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>

Related

Serving Static Pages ember.js

I'm currently retrofitting an old site and added ember. Previously when the user went products > product there was a link to a static page from there.
What's the best way to route to these static pages? (sellsheet in the object)
{
id: 32,
room: "String",
subroom: "String",
category: "String",
image: "Content/Images/Products/img.PNG",
name: "String",
description: "String",
bullets: [
{ content: "String" },
{ content: "String" },
{ content: "String" }
],
sellsheet: "Content/Sellsheets/conveyor.html"
}
I know this isn't the best way of doing it but it fit my needs.
I ended up just displaying the static page in an iframe at the bottom of the product page. Whenever you click view more, I hide the page with jQuery then show the iframe which gets the html loaded in through the anchor tag. Then I added a 'view less button' that hides the iframe and shows the page again.
HTML
<script type="text/x-handlebars" id="product">
<div id="valueprop-container">
<div class="centered">
<div class="col-left"><img {{bind-attr src=image}} /></div>
<div class="col-right">
<h2>{{{name}}}</h2>
<p>{{{description}}}</p>
<ul>
{{#each bullets}}
<li><span>{{{content}}}</span></li>
{{/each}}
</ul>
{{#if sellsheet}}
View More
{{/if}}
</div>
</div>
</div>
<div class="shadow"></div>
<div class="sellsheet">
<button class="expand">View Less</button>
<iframe name="frame" width="100%" height="100%" allowfullscreen style="position: absolute; border: none;"></iframe>
</div>
</script>
View
App.ProductView = Ember.View.extend({
didInsertElement: function(){
var productPage = $('#valueprop-container');
var sellSheet = $('.sellsheet');
$('.sell-sheet-click').click('on', function(){
productPage.hide();
sellSheet.show();
});
$('.sellsheet').click('on', function(){
productPage.show();
sellSheet.hide();
});
}
});

Google Material Bar Chart stops working when using a base href

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>

Google Charts using three columns from data table in Column Chart

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>

Passing a static selected list to different textboxes

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>list</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>var split="Grand Hotel,Promenade,Southend,Postcode".split(',');
var hotel=split[0];
var street=split[1];
var town=split[2];
var postcode=split[3]
</script>
</script>
<script>var split="Imperial Hotel,Main St,Dundee,Postcode".split(',');
var hotel=split[0];
var street=split[1];
var town=split[2];
var postcode=split[3]
</script>
<script>
$(document).ready(function () {
$('li').click(function () {
console.log($(this).text());
$('#hotel').val($(this).text());
});
}
);
</script>
<style>
.ui-menu { width: 250px; }
</style>
<script>
$(function() {
$( "#menu" ).menu();
});
</script>
<style>
.ui-menu { width: 250px; }
</style>
</head>
</body>
<body>
<div id="locationselect">
<ul>
<li>Grand Hotel,Promenade,Southend,Postcode</li>
<p>
<li>Imperial Hotel,Main St,Dundee,Postcode</li>
<p>
</ul>
</div>
<input type="text" id="split[0]"/>
<p>
<input type="text" id="split[1]"/>
<p>
<input type="text" id="split[2]"/>
<p>
<input type="text" id="split[3]"/>
<p>
</body>
</html>
I knew nothing about coding until I joined a coarse two weeks ago and have got a bit ahead of myself lol but i'm really enjoying the problem solving in working things out, i've got far too much time on my hands. I'm trying to work out a way of selecting and splitting a static list and then passing this into seperate textboxes. Any help would be very much appreciated, I have looked and as far as I can tell i'm the first to ask this specific question, woo hoo!!
<script>
$(document).ready(function () {
$('.selectableItem').click(function () {
//alert('txt=' + $(this).text());
var selected = $(this).text().split(",");
console.log(selected);
$('#location').val(selected[0]);
$('#location2').val(selected[1]);
$('#location3').val(selected[2]);
$('#location4').val(selected[3]);
});
}
);
</script>

Google pie chart not appearing in IE 7 and 8

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.