I am trying to draw multiple Google charts in a for loop, but can't seem to make it work. I have seen some similar questions being asked, but only with PHP. Anyone who can help? This is what I have tried so far https://jsfiddle.net/8nfbz1v1/
<ul id="draw-charts"></ul>
google.charts.load('current', {'packages':['corechart']});
for(var i = 0; i>6; i+){
var charts = "";
google.charts.setOnLoadCallback(drawChart);
function drawCharts() {
charts += '<td><div id="chart_div' + i +'" style="border: 1px solid #ccc"></div></td>';
$("#draw-charts").html(charts);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 1],
['Onions', 1],
['Olives', 2],
['Zucchini', 2],
['Pepperoni', 1]
]);
var options = {title:'How Much Pizza Sarah Ate Last Night',
width:400,
height:300};
// Instantiate and draw the chart for Sarah's pizza.
var chart = new google.visualization.PieChart(document.getElementById('chart_div' + i));
chart.draw(data, options);
}
}
setOnLoadCallback should only be called once per page load
once it fires, you can draw as many charts as needed
you can also include the callback in the load statement
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 1],
['Onions', 1],
['Olives', 2],
['Zucchini', 2],
['Pepperoni', 1]
]);
var options = {
title:'How Much Pizza Sarah Ate Last Night',
width:400,
height:300
};
for (var i = 0; i < 6; i++) {
var container = document.getElementById('draw-charts').appendChild(document.createElement('div'));
var chart = new google.visualization.PieChart(container);
chart.draw(data, options);
}
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<ul id="draw-charts"></ul>
Related
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>
When trying to plot a Line Chart using the Google Charts code I get this error
Error: Type mismatch. Value 0.8 does not match type number in column index 0
The '0.8' is referring to the value p1 in the code.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
[p1,1.89],
[ch_period[17],5],
[3,2],
[5,2],
[5,2],
[6,7]
]);
// 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.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
I've made a jsfiddle with your code that works: http://jsfiddle.net/kychan/Dfx4V/1/
var p1 = parseInt('4'),
ch_period = {'17':4};
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
[p1, 1.89],
[ch_period[17], 5],
[3, 2],
[5, 2],
[5, 2],
[6, 7]
]);
// 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.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
drawChart();
The problem was that p1 (and maybe ch_period) isn't the type number. Thus you must make it a number using parseInt(p1) / parseInt(ch_period) or manually assign it to a number.
I'm trying to create a div element on the runtime and placing a chart element inside it, which doesn't seem to work.
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':400};
// Instantiate and draw our chart, passing in some options.
//context.fillRect(0,0,100,100);
div = document.createElement('div');
div.style.position = "absolute";
div.style.top = "0";
div.style.left = "0";
document.body.appendChild(div);
var chart = new google.visualization.LineChart(document.getElementById('div'));
chart.draw(data, options);
}
It works when i declare the div in the of html. Am i doing something wrong?
You're doing document.getElementById('div'), but the id of the div you created has not been set to div. Why don't you just do this:
var chart = new google.visualization.LineChart(div);
Another option is to actually set the id:
div.id = "div";
...
var chart = new google.visualization.LineChart(document.getElementById('div'));
You don't set the id of the div to div. It seems like you should be using:
var chart = new google.visualization.LineChart(div);
http://code.google.com/apis/chart/
<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', {'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 our data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'date');
data.addColumn('number', 'Views');
data.addColumn('number', 'People');
data.addRows([
<?php echo $analytics; ?>
]);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.AreaChart(document.getElementById('Analytics-Visualization'));
chart.draw(data, {lineWidth:3, pointSize:8, width: 745, height: 240,chartArea:{left:20,top:20,width:640}});
}
</script>
lets say when we do this it does this
to
maybe using the listener stuff ?
For custom tooltips, add the tooltip as an extra column:
function drawVisualization() {
data = new google.visualization.DataTable()
data.addColumn('string', 'Date');
data.addColumn('number');
data.addColumn({type:'string',role:'tooltip'});
data.addRow();
base = 10;
data.setValue(0, 0, 'Datapoint1');
data.setValue(0, 1, base++);
data.setValue(0, 2, " This is my tooltip1 ");
data.addRow();
data.setValue(1, 0, 'Datapoint2');
data.setValue(1, 1, base++);
data.setValue(1, 2, "This is my second tooltip2");
// Draw the chart.
var chart = new google.visualization.BarChart(document.getElementById('visualization'));
chart.draw(data, {legend:'none', width:600, height:400});
}
#Adam; If you want to edit text then check this http://code.google.com/apis/ajax/playground/?type=visualization#pie_chart
you can change your code from here
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(5);
data.setValue(0, 0, 'Work');
data.setValue(0, 1, 11);
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 2);
data.setValue(2, 0, 'Commute');
data.setValue(2, 1, 2);
data.setValue(3, 0, 'Watch TV');
data.setValue(3, 1, 2);
data.setValue(4, 0, 'Sleep');
data.setValue(4, 1, 7);
and if you want your custom tooltip you have to use javascript for these
http://code.google.com/p/gvtooltip/
http://informationandvisualization.de/blog/tooltips-google-chart-api