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
El jueves, 23 de octubre de 2014 13:09:05 UTC-11, Andrew Gallant escribió:
>
> 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';
>
>
>
> On Thu, Oct 23, 2014 at 12:44 PM, Juan Carlos Loáisiga Montiel <
> [email protected] <javascript:>> wrote:
>
>> This is the link: http://www.funides.com/funides2014/index.php
>>
>> On Thu, Oct 23, 2014 at 1:52 AM, 'Andrew Gallant' via Google Chart API <
>> [email protected] <javascript:>> wrote:
>>
>>> Can you send me a link to the page these charts are on so I can see the
>>> problem in action?
>>>
>>> On Wed, Oct 22, 2014 at 6:59 PM, Juan Carlos Loáisiga Montiel <
>>> [email protected] <javascript:>> wrote:
>>>
>>>> I used the same code you've post, but still i'm getting the same
>>>> problem, the second chart render poorly.
>>>>
>>>> El miércoles, 8 de octubre de 2014 14:15:43 UTC-11, Andrew Gallant
>>>> escribió:
>>>>
>>>>> 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] <javascript:>.
>>>> To post to this group, send email to [email protected]
>>>> <javascript:>.
>>>> Visit this group at http://groups.google.com/group/google-chart-api.
>>>> For more options, visit https://groups.google.com/d/optout.
>>>>
>>>
>>> --
>>> 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
>>> [email protected] <javascript:>.
>>> To post to this group, send email to [email protected]
>>> <javascript:>.
>>> 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*
>>
>>
>> --
>> 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] <javascript:>.
>> To post to this group, send email to [email protected]
>> <javascript:>.
>> Visit this group at http://groups.google.com/group/google-chart-api.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>
--
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.
