I can not animate the google chart bar.
I looked at the sample documents, but I failed.
google.charts.load('current', {packages: ['table']});
function drawBarFormatTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addColumn('string', 'Depat');
data.addRows([
['Shoes', 1.98,'deneme'],
['Sports', -2.3,'deneme'],
['Toys', 3.4,'deneme'],
['Electronics', -0.2,'deneme'],
['Food', 2,'deneme'],
['Art', 2.5,'deneme']
]);
var table = new google.visualization.Table(document.getElementById('barformat_table'));
var formatter = new google.visualization.BarFormat({width: 250});
formatter.format(data, 1); // Apply formatter to second column
table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});
}
google.charts.setOnLoadCallback(drawBarFormatTable);
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barformat_table" style="height: 150px"/>
work here: https://jsfiddle.net/wqL5rLcg/
Related
I have a page in an app that displays all sorts of ticket metrics from several different ticketing systems we use. I use the same function to build each of the charts and display them:
function drawChart(chartData, chartStyle, chartTitle, chartSpanID) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Hour');
data.addColumn('number', 'Tickets');
data.addRows(chartData);
if(chartStyle == "column"){
var chart = new google.visualization.ColumnChart(document.getElementById(chartSpanID));
var options = {title:chartTitle,chartArea: {left: 30, top:20, bottom:30, right:10},animation:{startup: true, duration:2000}}
};
if(chartStyle == "pie"){
var chart = new google.visualization.PieChart(document.getElementById(chartSpanID));
var options = {title:chartTitle,
chartArea:{left: 0, top:20, bottom:10, right: 0},
is3D: true,
sliceVisibilityThreshold: .01,
animation:{startup: true,easing: 'in', duration:1000},
pieResidueSliceLabel: "Other( < 1%)"};
};
chart.draw(data, options);
}
This works for 13 of the 14 charts displayed on the page. 8 Columns and 5 out of 6 pie charts all display perfectly. One of the pie charts will ONLY display if I draw the chart a second time.
function drawChart(chartData, chartStyle, chartTitle, chartSpanID) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Hour');
data.addColumn('number', 'Tickets');
data.addRows(chartData);
if(chartStyle == "column"){
var chart = new google.visualization.ColumnChart(document.getElementById(chartSpanID));
var options = {title:chartTitle,chartArea: {left: 30, top:20, bottom:30, right:10},animation:{startup: true, duration:2000}}
};
if(chartStyle == "pie"){
var chart = new google.visualization.PieChart(document.getElementById(chartSpanID));
var options = {title:chartTitle,
chartArea:{left: 0, top:20, bottom:10, right: 0},
is3D: true,
sliceVisibilityThreshold: .01,
animation:{startup: true,easing: 'in', duration:1000},
pieResidueSliceLabel: "Other( < 1%)"};
};
chart.draw(data, options);
chart.draw(data, options);
}
The data is delivered correctly, all calls are made through google.charts.setOnLoadCallback, it all works just fine once called again... so why is it only working on the second call? Why just the one chart that doesn't display as expected? What have I missed?
I am using google chart to show the Gantt chart. The chart is working fine but when i hover on the chart bar, I am seeing Percentage Completed in the tooltip.
Below is the HTML of the same
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['Research', 'Find sources',
new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null],
['Write', 'Write paper',
null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
['Cite', 'Create bibliography',
null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
['Complete', 'Hand in paper',
null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
['Outline', 'Outline paper',
null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
]);
var options = {
height: 400,
gantt: {
trackHeight: 30
}
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
I can somehow, successfully hide the Resource name column but when I remove the Percentage completed column, I am getting errors like column and row mismatch, the value should not be null, etc.
Can anyone please let me know if there is any way to hide the percent completed value from the tooltip?
Thanks!
I make a system/website that is fully resizable with css and VW(viewport width). In that system/website I have a GoogleChart that works with pixels. Now I want to scale the chart with Javascript/jQuery/CSS (transform scale). On page load is enough.
Can anyone help me in the right direction for this?
Here is a JSFiddle with the problem: https://jsfiddle.net/j9a9wpdj/
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.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);
}
#test {
width: 80vw;
height: 40vw;
background-color: #dcdcdc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="test">
<div id="chart_div"></div>
</div>
[CONCLUSION]
This is what works for me:
function zoomit() {
$("#chart-wrapper").css('zoom', $(window).width() / $("#chart-wrapper").width());
}
$(document).ready(zoomit);
$(window).resize(zoomit);
Use the drawchart function to redraw the chart when window is resized. Adjust the width and height in below function as necessary. Updated fiddle
Code added to your script:
var width = 400;
var height = 300;
// Set chart options
var options = {
'title': 'How Much Pizza I Ate Last Night',
'width': width,
'height': height
};
$(function() {
$(window).resize(function() {
width = $('#test').width();
height = $('#test').height();
google.charts.setOnLoadCallback(drawChart);
})
});
Working example:
var width = 400;
var height = 300;
// Load the Visualization API and the corechart package.
google.charts.load('current', {
'packages': ['corechart']
});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.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': width,
'height': height
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
$(function() {
$(window).resize(function() {
width = $('#test').width();
height = $('#test').height();
google.charts.setOnLoadCallback(drawChart);
})
});
#test {
width: 80vw;
height: 40vw;
background-color: #dcdcdc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="test">
<div id="chart_div"></div>
</div>
When I try to create a column chart using the Google charts visualization javascript API the bar ends up a lot fatter than I expected.
Here's a comparison of two charts that demonstrates the problem. First, a chart with two data points where the resulting bars look normal, then a chart with a single data point where the resulting bar looks weird.
The only difference between the two snippets is:
// two bars
data.addRows([
[1, 1],
[2, 1],
]);
vs.
// one bar
data.addRows([
[1, 1]
]);
Two bars (looks normal)
google.charts.load('current', {
packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawAxisTickColors);
function drawAxisTickColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y');
// two bars
data.addRows([
[1, 1],
[2, 1],
]);
var options = {
title: 'Tidy lil bars',
hAxis: {
minValue: 0,
maxValue: 4
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Single bar (looks weird)
google.charts.load('current', {
packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawAxisTickColors);
function drawAxisTickColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y');
// one bar
data.addRows([
[1, 1],
]);
var options = {
title: 'Big ol bar',
hAxis: {
minValue: 0,
maxValue: 4
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
You can use bar.groupWidth to control the width of the columns
from the configuration options...
The width of a group of bars, specified in either of these formats:
Pixels (e.g. 50).
Percentage of the available width for each group (e.g. '20%'), where '100%' means that groups have no space between them.
Type: number or string
Default: The golden ratio, approximately '61.8%'.
i.e. --> bar: { groupWidth: 100 }, //100px
google.charts.load('current', {
callback: drawAxisTickColors,
packages: ['corechart', 'bar']
});
function drawAxisTickColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y');
data.addRows([
[1, 1],
//[2, 1],
]);
var options = {
bar: { groupWidth: 100 }, //100px
title: 'Tidy lil bars',
hAxis: {
minValue: 0,
maxValue: 4
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I have this really simple code:
https://gist.github.com/ndemir/9902237
http://jsfiddle.net/3PydS/
<html>
<head>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("visualization", "1", {packages:["geomap"]});
google.setOnLoadCallback(drawChart_ucGChart_chart_div);
function drawChart_ucGChart_chart_div() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'City');
data.addColumn('number', 'Popularity');
data.addRows([
["TR-35", 75],
["TR-33", 34]
]);
var options = {
"height":500,
"width":800,
"dataMode":"regions",
"region":"TR",
"colors": [0xFF8747, 0xFFB581, 0xc06000] //orange colors
}
var chart = new google.visualization.GeoMap(map_canvas);
chart.draw(data, options); return chart;
}
</script>
I want to paint each city with different color, how to do this?