There are a couple of issues with your code: first, you have two functions
named "drawChart" - they should either be combined into a single function,
or given two different names. Combining into a single function will make
the next part easier.
The reason the second chart renders poorly is because it is being drawn
inside a hidden div, which breaks some of the API's internal dimension
detection algorithms. To fix this, you should either draw each chart the
first time its container appears in the slider, or draw the charts before
creating the slider. The second option is easier to do.
Here's one way you could rearrange your code to fix these issues:
function drawCharts () {
var ready = false;
function createSlider () {
if (ready) {
$('#slider').s3Slider({
timeOut: 5000
});
}
else {
ready = true;
}
}
function drawChart1 () {
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'));
google.visualization.events.addListener(chart, 'ready',
createSlider);
chart.draw(data, options);
}
function drawChart2() {
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'));
google.visualization.events.addListener(chart, 'ready',
createSlider);
chart.draw(data, options);
}
drawChart1();
drawChart2();
}
google.load('visualization', '1', {packages: ['corechart'], callback:
drawCharts});
This way, you have a single call to google.load, a single callback from the
loader, and you use "ready" event handlers for the charts to determine when
they are drawn, and instantiate the slider only when they are both ready.
On Friday, October 3, 2014 6:58:56 PM UTC-4, Juan Carlos Loáisiga Montiel
wrote:
>
> 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.
