Is it possible to make a timeline like this one with google apps?
I have built an standard web app but there is a problem that there is too many data for whole timeline so it is hard to see some blocks.... I was thinking about zoom option but have no idea how I can do this.
Here you have my code so far:
array from timelineData function looks like that:
[["00G080","NA14599","2021-01-08T21:25:00.000Z","2021-01-12T14:22:00.000Z"],["00G080","NA14599","2021-01-12T14:22:00.000Z","2021-01-12T15:19:00.000Z"]...]
gs:
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate();
}
function timelineData(){
const ss = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/d/1KzaKe9ShAZZAlK3CQC-UmrKzZXghNKAAx_pDHFX3YLI/edit#gid=0');
const srcSheet = ss.getSheetByName("Array");
const srcValues = srcSheet.getRange(2, 1, srcSheet.getLastRow()-1, 4).getDisplayValues()
const newAr = srcValues.map(r=>[r[0],r[1], new Date(r[2]), new Date(r[3])]);
const arr = JSON.stringify(newAr);
return arr
}
html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>機械別工程残</h1>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(getData);
function getData(){
google.script.run.withSuccessHandler(drawChart).timelineData();
}
function drawChart(dane) {
//console.log(dane);
const obj = JSON.parse(dane);
const newAr = obj.map(r=>[r[0],r[1], new Date(r[2]), new Date(r[3])]);
var container = document.getElementById('chart');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: '機械' });
dataTable.addColumn({ type: 'string', id: 'オーダー' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows(newAr);
var options = {
colors: ['#cbb69d', '#603913', '#c69c6e', '#e743f0', '#f04343', '#f0e443', '#b9f043', '#4ff043', '#43f0d9', '#435df0'],
// timeline: { colorByRowLabel: true}
};
chart.draw(dataTable, options);
}
</script>
<div id="chart" style="height: 600px;"></div>
</body>
</html>
My timeline looks like this:
Thanks to advice from WhiteHat I was able to put working code.
Hope someone will find it useful
code.gs
function doGet() {
var template = HtmlService.createTemplateFromFile('index3');
return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function timelineData(){
const ss = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/d/1KzaKe9ShAZZAlK3CQC-UmrKzZXghNKAAx_pDHFX3YLI/edit#gid=0');
const srcSheet = ss.getSheetByName("Array");
const srcValues = srcSheet.getRange(2, 1, srcSheet.getLastRow()-1, 4).getDisplayValues()
const newAr = srcValues.map(r=>[r[0],r[1], new Date(r[2]), new Date(r[3])]);
const arr = JSON.stringify(newAr);
return arr
}
html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>機械別工程残</h1>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline","controls"],'language': 'ja'});
google.charts.setOnLoadCallback(getData);
function getData(){
google.script.run.withSuccessHandler(drawChart).timelineData();
}
function drawChart(dane) {
//console.log(dane);
const obj = JSON.parse(dane);
const newAr = obj.map(r=>[r[0],r[1], new Date(r[2]), new Date(r[3])]);
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard')
);
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control',
options: {
filterColumnIndex: 3,
ui: {
minRangeSize: (60 * 60 * 1000),
chartType: 'TimeLine',
chartOptions: {
width: 900,
height: 70,
chartArea: {
width: '100%',
height: '80%'
},
hAxis: {
baselineColor: 'none'
}
},
chartView: {
columns: [2, 3]
}
}
}
});
google.visualization.events.addListener(control, 'error', function (error) {
console.log('error: ' + error.id + ' - ' + error.message);
google.visualization.errors.removeError(error.id);
});
var chart = new google.visualization.ChartWrapper({
chartType: 'Timeline',
containerId: 'chart',
options: {
width: 985,
height: 600,
chartArea: {
width: '100%',
height: '80%'
},
tooltip: {
isHtml: true
}
},
view: {
columns: [0, 1, 2, 3]
}
});
var data = new google.visualization.DataTable();
data.addColumn({ type: 'string', id: 'Student' });
data.addColumn({ type: 'string', id: 'Event Type' });
data.addColumn({ type: 'datetime', id: 'Start' });
data.addColumn({ type: 'datetime', id: 'End' });
data.addRows(newAr);
dashboard.bind(control, chart);
dashboard.draw(data);
}
</script>
<div id="dashboard">
<div id="chart" style="width: 1050px; left:30px" ></div>
<div>範囲設定</div>
<div id="control" style="width: 1050px; left:30px"></div>
</div>
</body>
</html>
Related
I wan't to change series type, but
there is an javascript console error:
options.series in function change_chart is null...
<script src="../code/highstock.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
<script type="text/javascript">
var chart;
var options;
$(document).ready(function() {
options = {
chart: { renderTo: 'container'},
rangeSelector: {selected: 1},
title: { text: 'AAPL Stock Price'},
series: [{
type: 'candlestick',
name: 'AAPL Stock Price11',
dataGrouping: {
units: [
[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]
]
}
}]
};
chartfunc = function(type)
{
alert(options.series);
options.type = type;
chart = new Highcharts.stockChart(options);
}
$.getJSON('http://localhost/highstock/data/aapl-ohlcv.json', function(data) {
options.series[0].data = data;
chart = new Highcharts.stockChart(options);
});
});
</script>
I don't understand why options.series "sets itself" to null...
I got it working by changing chartfunc like this:
chartfunc = function(type)
{
chart.series[0].update({
type: type
});
}
I'm trying to show a custom tooltip on mouve over the bars, it show always the default tooltip.
I'm just trying to show a simple html code in the tooltip, so I can modify it after
What am I missing? thanks
google.charts.load('current', {
'packages': ['timeline'],
'language': 'fr'
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({
type: 'string',
id: 'Code'
});
dataTable.addColumn({
type: 'string',
id: 'Color'
});
dataTable.addColumn({
type: 'string',
role: 'tooltip',
'p': {
'html': true
}
});
dataTable.addColumn({
type: 'string',
id: 'Libelle'
});
dataTable.addColumn({
type: 'date',
id: 'Start'
});
dataTable.addColumn({
type: 'date',
id: 'End'
});
var objects = [];
objects.push({
code: "PRV1001",
color: "Color1",
zz: "<div><strong>2010</strong></div>",
id: "PRV1001",
dateStart: new Date(2016, 3, 1),
dateFinnish: new Date(2016, 3, 15)
});
objects.push({
code: "PRV1002",
color: "Color2",
zz: "<div><strong>2010</strong></div>",
id: "PRV1002",
dateStart: new Date(2016, 3, 4),
dateFinnish: new Date(2016, 3, 9)
});
objects.push({
code: "PRV1003",
color: "Color3",
zz: "<div><strong>2010</strong></div>",
id: "PRV1003",
dateStart: new Date(2016, 3, 3),
dateFinnish: new Date(2016, 3, 12)
});
var rows = [];
for (var i = 0; i < objects.length; i++) {
rows.push([objects[i].code, objects[i].color, objects[i].zz, objects[i].id, objects[i].dateStart, objects[i].dateFinnish]);
}
console.log(rows);
dataTable.addRows(rows);
/****************Colors*************************/
var colors = [];
var colorMap = {
// should contain a map of category -> color for every category
Color1: '#e63b6f',
Color2: '#19c362',
Color3: '#592df7'
}
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
colors.push(colorMap[dataTable.getValue(i, 1)]);
}
var options = {
colors: colors,
focusTarget: 'category',
tooltip: {
//trigger: 'none'
isHtml: true
}
};
google.visualization.events.addListener(chart, 'select', function() {
selection = chart.getSelection();
if (selection.length > 0) {
console.log(dataTable.getValue(selection[0].row, 0));
}
});
// use a DataView to hide the category column from the Timeline
var view = new google.visualization.DataView(dataTable);
view.setColumns([0, 2, 3, 4, 5]);
chart.draw(view, options);
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Goolge Chart HTML Tooltips">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="timeline" style="height: 180px;"></div>
</body>
</html>
see the data format for a timeline chart...
Column 0 - Row label
Column 1 - Bar label (optional)
Column 2 - Tooltip (optional)
Column 3 - Start
Column 4 - End
the issue stems from the view...
view.setColumns([0, 2, 3, 4, 5]);
so the chart thinks Column 2 is the Bar label
the issue can be corrected by swapping Column 2 with 3
view.setColumns([0, 3, 2, 4, 5]);
see following working snippet...
google.charts.load('current', {
'packages': ['timeline'],
'language': 'fr'
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({
type: 'string',
id: 'Code'
});
dataTable.addColumn({
type: 'string',
id: 'Color'
});
dataTable.addColumn({
type: 'string',
role: 'tooltip',
'p': {
'html': true
}
});
dataTable.addColumn({
type: 'string',
id: 'Libelle'
});
dataTable.addColumn({
type: 'date',
id: 'Start'
});
dataTable.addColumn({
type: 'date',
id: 'End'
});
var objects = [];
objects.push({
code: "PRV1001",
color: "Color1",
zz: "<div><strong>2010</strong></div>",
id: "PRV1001",
dateStart: new Date(2016, 3, 1),
dateFinnish: new Date(2016, 3, 15)
});
objects.push({
code: "PRV1002",
color: "Color2",
zz: "<div><strong>2010</strong></div>",
id: "PRV1002",
dateStart: new Date(2016, 3, 4),
dateFinnish: new Date(2016, 3, 9)
});
objects.push({
code: "PRV1003",
color: "Color3",
zz: "<div><strong>2010</strong></div>",
id: "PRV1003",
dateStart: new Date(2016, 3, 3),
dateFinnish: new Date(2016, 3, 12)
});
var rows = [];
for (var i = 0; i < objects.length; i++) {
rows.push([objects[i].code, objects[i].color, objects[i].zz, objects[i].id, objects[i].dateStart, objects[i].dateFinnish]);
}
dataTable.addRows(rows);
/****************Colors*************************/
var colors = [];
var colorMap = {
// should contain a map of category -> color for every category
Color1: '#e63b6f',
Color2: '#19c362',
Color3: '#592df7'
}
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
colors.push(colorMap[dataTable.getValue(i, 1)]);
}
var options = {
colors: colors,
focusTarget: 'category',
tooltip: {
isHtml: true
}
};
google.visualization.events.addListener(chart, 'select', function() {
selection = chart.getSelection();
if (selection.length > 0) {
console.log(dataTable.getValue(selection[0].row, 0));
}
});
// use a DataView to hide the category column from the Timeline
var view = new google.visualization.DataView(dataTable);
view.setColumns([0, 3, 2, 4, 5]);
chart.draw(view, options);
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Goolge Chart HTML Tooltips">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="timeline" style="height: 180px;"></div>
</body>
</html>
I am using Google Developer Chart called Timeline to create some charts. I was able to render a basic version of the charts successfully, but I want to customize the onmouseover event to display certain block information. I haven't been able to find any examples of how to customize this functionality though.
Currently, my table code looks like this:
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['timeline']}]}"></script>
<script language="Javascript" type="text/javascript">
google.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'RowLabel' });
dataTable.addColumn({ type: 'string', id: 'BlockLabel' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
["SAT 2B", "Task 1", new Date(2015,01,01), new Date(2015,01,02)],
["SAT 2B", "Task 1", new Date("2015-03-10 05:10:39.010000"), new Date("2015-03-15 05:10:39.010000")],
["SAT 2C", "Task 1", new Date("2015-04-10 05:10:39.010000"), new Date("2015-04-15 05:10:39.010000")],
]);
var formatter = new google.visualization.DateFormat({pattern:'yyyy/DDD-HH:mm:ss'});
formatter.format(dataTable,2);
formatter.format(dataTable,3);
var options = {
timeline: { colorByRowLabel: true }
};
chart.draw(dataTable,options);
}
</script>
<div>
<h4><p class="text-center">A Timeline</p></h4>
<div id="timeline" style="width: 95%;"></div>
</div>
I want to be able to display the BlockLabel, Start, and End date when the user mouses over a given block in the timeline. Can anyone help me out with how to do that? The timeline code is described here.
In order to customize Google Chart tooltip the column with tooltip role is intended, but it seems Timeline chart does not support it.
The following example shows how to override tooltip content once you hover over data element:
google.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'RowLabel' });
dataTable.addColumn({ type: 'string', id: 'BlockLabel' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
["SAT 2B", "Task 1", new Date(2015, 01, 01), new Date(2015, 01, 02)],
["SAT 2B", "Task 1", new Date("2015-03-10 05:10:39.010000"), new Date("2015-03-15 05:10:39.010000")],
["SAT 2C", "Task 1", new Date("2015-04-10 05:10:39.010000"), new Date("2015-04-15 05:10:39.010000")]
]);
var formatter = new google.visualization.DateFormat({ pattern: 'yyyy/DDD-HH:mm:ss' });
formatter.format(dataTable, 2);
formatter.format(dataTable, 3);
var options = {
timeline: { colorByRowLabel: true }
};
chart.draw(dataTable, options);
google.visualization.events.addListener(chart, 'onmouseover', function(e) {
setTooltipContent(dataTable,e.row);
});
}
function setTooltipContent(dataTable,row) {
if (row != null) {
var content = '<div class="custom-tooltip" ><h1>' + dataTable.getValue(row, 0) + '</h1><div>' + dataTable.getValue(row, 1) + '</div></div>'; //generate tooltip content
var tooltip = document.getElementsByClassName("google-visualization-tooltip")[0];
tooltip.innerHTML = content;
}
}
div.google-visualization-tooltip {
width: auto;
height:auto;
background-color: #ccccff;
color: #000000;
text-align: center;
vertical-align: middle;
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['timeline']}]}"></script>
<div>
<h4><p class="text-center">A Timeline</p></h4>
<div id="timeline" style="width: 95%;"></div>
</div>
JSFiddle
Hey to all i have the code below for a google pie chart that takes data from a jsontable and i want when i click a slice to redraw the chart based on the selection.
I have the code below and i'm at a loss how to proceed
<head>
<style>
div.absolute {
position: absolute;
top: 120px;
}
</style>
<link href="style.css" rel="stylesheet" />
<!--Auto refresh code -->
<meta http-equiv="refresh" content="<?php echo $sec?>;URL='<?php echo $page?>'">
<!--Load the Ajax API-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://www.google.com/jsapi"></script>
<script src="http://www.google.com/jsapi?ext.js"></script>
<script src="https://rawgit.com/louisremi/jquery-smartresize/master/jquery.throttledresize.js"></script>
<script>
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(initChart);
$(window).on("throttledresize", function (event) {
initChart();
});
function initChart() {
var options = {
title: 'Arrived Today (Email)',
width: '100%',
height: '100%',
sliceVisibilityThreshold: 0,
pieSliceText: 'percentage',
pieStartAngle: 100,
//is3D: 'true',
pieHole: 0.3,
slices: {
1: {offset: 0.2},
2: {offset: 0.3},
3: {offset: 0.4},
4: {offset: 0.5},
5: {offset: 0.6},
},
//slices: {0: {color: 'green'}, 1: {color: 'blue'}},
pieSliceBorderColor: 'black',
legend: 'right',
legendTextStyle: {fontSize: 15},
pieSliceText: 'value' ,
titleTextStyle: {
color: '333333',
fontName: 'Arial',
fontSize: 14 ,
align:'right'
},
chartArea : { left: 35 }
};
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var data2 = new google.visualization.DataTable(<?=$jsonTable2?>);
var total = google.visualization.data.group(data,
[{
type: 'boolean',
column: 0,
modifier: function () {return true;}
}],
[{
type: 'number',
column: 1,
aggregation: google.visualization.data.sum
}]
);
document.getElementById("demo").innerHTML =total.getValue(0,1);
data.addRow(['Total: ' + total.getValue(0, 1), 0]);
drawChart(data, options)
}
function drawChart(data, options) {
var chart = new google.visualization.PieChart(document.getElementById('chart'));
chart.draw(data, options);
google.visualization.events.addListener(chart, 'select', selectHandler);
var label1 = data.pieSliceText('label');
// The selection handler.
// Loop through all items in the selection and concatenate
// a single message from all of them.
function selectHandler() {
var selection = chart.getSelection();
if (selection.length) {
var pieSliceLabel = data.getValue(selection[0].row, 0);
if (pieSliceLabel = 'External')
chart.draw(data2, options);
}
}
}
</script>
</head>
<body>
<h2 align="right"><font size="5">emails Arrived Today</font>
<div id="demo"></div>
</h2>
<div id="chart"></div>
</body>
thanks in advance for any help :)
function initChart() {
....
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var data2 = new google.visualization.DataTable(<?=$jsonTable2?>);
....
}
function drawChart(data, options) {
google.visualization.events.addListener(chart, 'select', selectHandler);
function selectHandler() {
var selection = chart.getSelection();
if (selection.length) {
var pieSliceLabel = data.getValue(selection[0].row, 0);
if (pieSliceLabel = 'External')
chart.draw(data2, options);
}
}
}
Everything looks fine, except the scope of your variable data2.
You initiate it in your function initChart(), and then try to use it in a sub-function from drawChart().
Either you define your var data2 outside any javascript functions, or you pass it as a parameter when you call drawChart.
As the title says, sometimes it loads fine, sometimes it doesn't show at all. (Applies to all browsers)
When it loads:
http://puu.sh/hpkrH/03adef7313.png
When it doesn't:
http://puu.sh/hpkjT/097c9e3e67.png
This code is loaded into the page just after closing the body tag but before closing the html tag.
var rankedSolo5 = {
GamesPlayed: 0,
Wins: 0,
Losses: 0,
WinPercent: 0,
Assists: 0,
Kills: 0,
MinKills: 0,
NeutralMinKills: 0,
TurretsKilled: 0,
AverageKills: 0,};
$.ajax({
url: 'https://'+summonerRegion+'.api.pvp.net/api/lol/'+summonerRegion+'/v1.4/summoner/by-name/'+summonerName+'?api_key=76555fa3-4e44-4b11-8692-f2cfad2fd30d',
dataType: 'json',
//If summoner doesn't exist show error
error : function(jqXHR, textStatus, errorThrown) {
if(jqXHR.status == 404 || errorThrown == 'Not Found'){
$(".statsValue").html(summonerError);}},
//If summoner is found, find Id of summoner
success: function(response) {
nameToId = response;
console.log(nameToId);
console.log(nameToId[summonerName].name);
$('#summonerProfileName').html(nameToId[summonerName].name);
summonerId = nameToId[summonerName].id;
$.ajax({
url: 'https://'+summonerRegion+'.api.pvp.net/api/lol/'+summonerRegion+'/v1.3/stats/by-summoner/'+summonerId+'/summary?season=SEASON2015&api_key=76555fa3-4e44-4b11-8692-f2cfad2fd30d',
dataType: 'json',
//When Id is found, retrieve Stats
success: function(response) {
if (summonerName != undefined){
jsonData = response;
console.log(jsonData);
//Ranked Solo 5v5 Stats
rankedSolo5["Wins"] = jsonData.playerStatSummaries[5].wins;
rankedSolo5["Losses"] = jsonData.playerStatSummaries[5].losses;
rankedSolo5["Assists"] = jsonData.playerStatSummaries[5].aggregatedStats.totalAssists;
$("#rankedAssistsSolo5 .statsValue").html(rankedSolo5["Assists"]);
rankedSolo5["Kills"] = jsonData.playerStatSummaries[5].aggregatedStats.totalChampionKills;
$("#rankedKillsSolo5 .statsValue").html(rankedSolo5["Kills"]);
rankedSolo5["MinKills"] = jsonData.playerStatSummaries[5].aggregatedStats.totalMinionKills;
$("#rankedMinKillsSolo5 .statsValue").html(rankedSolo5["MinKills"]);
rankedSolo5["NeutralMinKills"] = jsonData.playerStatSummaries[5].aggregatedStats.totalNeutralMinionsKilled;
$("#rankedNeutralMinKillsSolo5 .statsValue").html(rankedSolo5["NeutralMinKills"]);
rankedSolo5["TurretsKilled"] = jsonData.playerStatSummaries[5].aggregatedStats.totalTurretsKilled;
$("#rankedTurretsKilledSolo5 .statsValue").html(rankedSolo5["TurretsKilled"]);
//Ratios, Etc...
rankedSolo5["GamesPlayed"] = rankedSolo5["Wins"]+rankedSolo5["Losses"];
$("#rankedGamesPlayedSolo5 .statsValue").html(rankedSolo5["GamesPlayed"]);
rankedSolo5["WinPercent"] = Math.floor(rankedSolo5["Wins"]*(100/(rankedSolo5["Wins"]+rankedSolo5["Losses"])))+"%";
$("#rankedWinPercentSolo5").html(rankedSolo5["WinPercent"]);
//Draw the charts after data is collected
chart();
}
}
});
}
});}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Stats');
data.addColumn('number', 'Stats');
data.addRows([
['Wins', rankedSolo5["Wins"]],
['Losses', rankedSolo5["Losses"]],
]);
var data2 = google.visualization.arrayToDataTable([
['M/T Ratio', 'Minion Kills/Turret Kills'],
['Minion Kills', rankedTeam5["MinKills"]],
['Turret Kills', rankedTeam5["TurretsKilled"]]
]);
var options = {
width: 200,
height: 200,
colors: ['#337ab7', '#ff5e5e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
pieHole: 0.4,
backgroundColor: {fill: 'none'},
pieSliceBorderColor:"transparent",
legend: 'none',
chartArea: {'width': '85%', 'height': '85%'},
pieSliceText: 'label',
fontSize: 11,
};
setTimeout(function(){
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
var chart2 = new google.visualization.PieChart(document.getElementById('donutchart2'));
chart2.draw(data2, options);
var chart3 = new google.visualization.PieChart(document.getElementById('donutchart3'));
chart3.draw(data2, options);
var chart4 = new google.visualization.PieChart(document.getElementById('donutchart4'));
chart4.draw(data2, options);
},250);
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Stats');
data.addColumn('number', 'Stats');
data.addRows([
['Wins', rankedSolo5["Wins"]],
['Losses', rankedSolo5["Losses"]],
]);
var data2 = google.visualization.arrayToDataTable([
['M/T Ratio', 'Minion Kills/Turret Kills'],
['Minion Kills', rankedTeam5["MinKills"]],
['Turret Kills', rankedTeam5["TurretsKilled"]]
]);
var options = {
width: 200,
height: 200,
colors: ['#337ab7', '#ff5e5e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
pieHole: 0.4,
backgroundColor: {fill: 'none'},
pieSliceBorderColor:"transparent",
legend: 'none',
chartArea: {'width': '85%', 'height': '85%'},
pieSliceText: 'label',
fontSize: 11,
};
setTimeout(function(){
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
var chart2 = new google.visualization.PieChart(document.getElementById('donutchart2'));
chart2.draw(data2, options);
var chart3 = new google.visualization.PieChart(document.getElementById('donutchart3'));
chart3.draw(data2, options);
var chart4 = new google.visualization.PieChart(document.getElementById('donutchart4'));
chart4.draw(data2, options);
},250);
}
My head tag looks like this:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
Any help figuring this out would be greatly appreciated.
for some reason a google chart won't consistently render if you don't set the width and height on the actual DOM container (i.e. it's not enough to rely on the width and height settings in options)