I have a two google charts and load in two divs inside a slider. The first
chart is shows fine, but the second one is bad, the chart's scale shows
over text, and the chart's legend is outside of chart area. See image error
Chart code:
<pre>
<script type="text/javascript"
src="https://www.google.com/jsapi";></script>
<script type="text/javascript">
//Indice de Precios al Consumidor
google.setOnLoadCallback(drawChart)
google.load("visualization", "1", {packages:["corechart"]});
function drawChart() {
var data = new google.visualization.arrayToDataTable([
['Año', 'IPC nacional'],
['ene-10', 1.9],
['feb-10', 2.7],
['mar-10', 4.4],
['abr-10', 4.9],
['may-10', 4.7],
['jun-10', 4.6],
['jul-10', 6.2],
['ago-10', 5.3],
['sep-10', 5.4],
['oct-10', 7.3],
['nov-10', 8.8],
['dic-10', 9.2],
['ene-11', 8.0],
['feb-11', 7.2],
['mar-11', 6.7],
['abr-11', 7.1],
['may-11', 8.3],
['jun-11', 9.0],
['jul-11', 8.5],
['ago-11', 9.7],
['sep-11', 9.5],
['oct-11', 7.7],
['nov-11', 7.3],
['dic-11', 8.0],
['ene-12', 8.0],
['feb-12', 8.8],
['mar-12', 8.5],
['abr-12', 9.0],
['may-12', 7.5],
['jun-12', 6.5],
['jul-12', 6.4],
['ago-12', 6.0],
['sep-12', 6.4],
['oct-12', 6.5],
['nov-12', 6.2],
['dic-12', 6.0],
['ene-13', 7.7],
['feb-13', 7.1],
['mar-13', 6.8],
['abr-13', 6.3],
['may-13', 7.7],
['jun-13', 8.3],
['jul-13', 7.7],
['ago-13', 7.9],
['sep-13', 7.4],
['oct-13', 6.8],
['nov-13', 6.3],
['dic-13', 5.7],
['ene-14', 5.2],
['feb-14', 5.3],
['mar-14', 5.1],
['abr-14', 4.9],
['may-14', 4.8],
['jun-14', 6.1],
['jul-14', 6.9],
['ago-14', 6.7],
]);
var options = {
title: 'Indice de Precios al Consumidor',
titleTextStyle: {color: '#333',fontSize:12},
titlePosition: 'out',
'width':315,
'height':322,
curveType: 'function',
//backgroundColor: "#ccc",
chartArea:{left:30,top:35,right:0,bottom:5,width:'88%',height:'75%'},
legend: { position: 'none' } };
var chart = new
google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<script type="text/javascript">
//Indice de Precios al Consumidor
google.setOnLoadCallback(drawChart)
google.load("visualization", "1", {packages:["corechart"]});
function drawChart() {
var data = new google.visualization.arrayToDataTable([
['Año', 'Tendencia ciclo interanual'],
['ene-13', 5.9],
['feb-13', 5.9],
['mar-13', 5.8],
['abr-13', 5.6],
['may-13', 5.4],
['jun-13', 5.4],
['jul-13', 5.4],
['ago-13', 5.2],
['sep-13', 5.0],
['oct-13', 4.6],
['nov-13', 4.2],
['dic-13', 3.9],
['ene-14', 3.8],
['feb-14', 3.8],
['mar-14', 3.9],
['abr-14', 4.0],
['may-14', 4.0],
['jun-14', 3.8],
['jul-14', 3.6],
]);
var options = {
title: 'IMAE tendencia-ciclo',
titleTextStyle: {color: '#333',fontSize:12},
titlePosition: 'out',
'width':315,
'height':322,
curveType: 'function',
//backgroundColor: "#ccc",
chartArea:{left:30,top:35,right:0,bottom:5,width:'88%',height:'75%'},
legend: { position: 'none' } };
var chart = new
google.visualization.LineChart(document.getElementById('chart_div2'));
chart.draw(data, options);
}
</script>
</pre>
Slider code:
<pre>
<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<div id="chart_div"></div>
<span
class="top"><strong> </strong> </span></a>
</li>
<li class="sliderImage">
<div id="chart_div2"></div>
<span
class="top"><strong> </strong> </span></a>
</li>
<div class="clear sliderImage"></div>
</ul>
</div>
<script src="javascript/s3Slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 5000
});
});
</script>
</pre>
--
You received this message because you are subscribed to the Google Groups
"Google Chart API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-chart-api.
For more options, visit https://groups.google.com/d/optout.
