setup google charts inside a slider

Juan Carlos Loáisiga Montiel

unread,

Oct 3, 2014, 6:58:56 PM10/3/14

to google-c...@googlegroups.com

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>

//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>

//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>

</li>

</li>

</ul>

</div>

$(document).ready(function() {

$('#slider').s3Slider({

timeOut: 5000

});

</script>

</pre>

Andrew Gallant

unread,

Oct 8, 2014, 9:15:43 PM10/8/14

to google-c...@googlegroups.com

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 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.

Juan Carlos Loáisiga Montiel

unread,

Oct 22, 2014, 6:59:01 PM10/22/14

to google-c...@googlegroups.com

I used the same code you've post, but still i'm getting the same problem, the second chart render poorly.

Andrew Gallant

unread,

Oct 23, 2014, 8:57:27 AM10/23/14

to google-c...@googlegroups.com

Can you send me a link to the page these charts are on so I can see the problem in action?

--
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 google-chart-a...@googlegroups.com.
To post to this group, send email to google-c...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-chart-api.
For more options, visit https://groups.google.com/d/optout.

Juan Carlos Loáisiga Montiel

unread,

Oct 23, 2014, 12:45:29 PM10/23/14

to google-c...@googlegroups.com

This is the link: http://www.funides.com/funides2014/index.php

Juan Carlos Loáisiga Montiel

unread,

Oct 23, 2014, 12:54:04 PM10/23/14

to google-c...@googlegroups.com

This is the link: http://www.funides.com/funides2014/index.php

--
You received this message because you are subscribed to a topic in the Google Groups "Google Chart API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-chart-api/-wBPaW-hk4w/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-chart-a...@googlegroups.com.

To post to this group, send email to google-c...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-chart-api.
For more options, visit https://groups.google.com/d/optout.

--

Please consider the impact on the environment before printing this e-mail
Por favor considere el impacto en el medio ambiente antes de imprimir este e-mail

Andrew Gallant

unread,

Oct 23, 2014, 8:09:05 PM10/23/14

to google-c...@googlegroups.com

Your "sliderImage" class has "display: none" in the CSS, which will render the chart divs' parent elements hidden on page load. You can either remove that line from the page's CSS, or you can use javascript to unhide the parent elements immediately prior to drawing. I recommend removing the CSS, as it is the simpler option, unless you have other elements that require it.

If you want to go the javascript route, then you could add this at the top of drawCharts:

document.getElementById('chart_div').parentNode.style.display = 'list-item';

document.getElementById('chart_div2').parentNode.style.display = 'list-item';

Juan Carlos Loáisiga Montiel

unread,

Oct 24, 2014, 7:46:29 PM10/24/14

to google-c...@googlegroups.com

Thank you, now it work fine, but in IE the font is rendered as kind of italic, but only happen with the slider, in the next test page you can see the font show fine in IE. http://www.funides.com/funides2014/quienes.php

Juan Carlos Loáisiga Montiel

unread,

Oct 27, 2014, 12:56:37 PM10/27/14

to google-c...@googlegroups.com

Thank you for you help, thank you so much.

I've found this solution for the font issue: var options = {'fontName' : '"Arial"'}

Reply all

Reply to author

Forward