This is the link: http://www.funides.com/funides2014/index.php
El jueves, 23 de octubre de 2014 01:57:27 UTC-11, Andrew Gallant escribió: > > 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 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.
