search

google / google-visualization-issues

288 stars 35 forks source link

Graphs in second page are not in proper formatting #2188

Open MLINGAD opened 8 years ago

MLINGAD commented 8 years ago

Hi All,

I am trying to implement one dashboard application, i am using bootsrap carousel views. in each bootsrap view there are multiple graphs. in my case each bootsrap view has one javascript file asociated. problem i am facing is in the first carousel page all the graphs are appearing coorectly, if i go to second carousel view all the graphs are not in proper format, could anyone of you help in solving the issue. please refer the following screenshots for reference.

1st Carousel view:(Working Properly) carousel1

2nd Carousel View(Not working as expected like 1st carousel view)

carousel2

Please help me

nbering commented 8 years ago

Looks like this is related to a common issue. Drawing charts in hidden elements causes them to be drawn to incorrect size, as there are no width and height values for a hidden DOM element. You can usually work around this by setting a fixed width and height in your options object, or waiting until the element is visible to draw the chart.

dlaliberte commented 8 years ago

Nicholas is right. But I doubt setting the width and height will help get everything right because the font sizes will still be unknown if the container element is not displayed. Actually, setting the 'visibility' of the container to 'hidden' would at least allow the charts to render correctly since the layout will be the same, just invisible, but it might mess up your carousel.

So it is best to just delay drawing the charts until the container is displayed and sized correctly.

On Mon, Feb 29, 2016 at 12:38 AM, Nicholas Bering notifications@github.com wrote:

Looks like this is related to a common issue. Drawing charts in hidden elements causes them to be drawn to incorrect size, as there are no width and height values for a hidden DOM element. You can usually work around this by setting a fixed width and height in your options object, or waiting until the element is visible to draw the chart.

— Reply to this email directly or view it on GitHub https://github.com/google/google-visualization-issues/issues/2188#issuecomment-190054588 .

Daniel LaLiberte https://plus.google.com/100631381223468223275?prsrc=2 dlaliberte@Google.com dlaliberte@google.com 5CC, Cambridge MA

MLINGAD commented 8 years ago

Hi @nbering , Hi @dlaliberte , Yeah I agree but, I am finding difficult to fix this issue, since am using carousel definitely when the 1st slider is visible 2nd slider will be in hidden mode. In my case 1st java script file will draw the charts on 1st slider similarly 2nd java script file will draw the charts in 2nd slider. could you please help me to fix this?

here is m y html carousel code -

``` --- and piece of java script code is $(document).ready(function () { //............................ Test Design Coverage............................. ``` $(function () { $.ajax({ type: 'POST', dataType: 'json', contentType: 'application/json', url: 'http://localhost/KPIWebService/Service1.asmx/TestDesignCoverage', data: '{input:"Cofico"}', success: function (response) { drawchartTDC(response.d); // calling method }, error: function () { alert("Error loading data..........."); } }); }) function drawchartTDC(dataValues) { var data = new google.visualization.DataTable(); data.addColumn('string', 'KPI_MONTH'); data.addColumn('number', 'TDC'); //data.addColumn({ type: 'string', role: 'tooltip' }); //data.addColumn({ type: 'string', role: 'style' }); //data.addColumn('number', 'DIE_TS'); //data.addColumn({ type: 'boolean', role: 'certainty' }); //data.addColumn('number', 'DIE_LL'); //data.addColumn({ type: 'boolean', role: 'certainty' }); for (var i = 0; i < dataValues.length; i++) { data.addRow([dataValues[i].KPI_MONTH, dataValues[i].TDC]); } // Instantiate and draw our chart, passing in some options var chart = new google.visualization.ColumnChart(document.getElementById('CoficoTDC')); //var chart1 = new google.visualization.PieChart(document.getElementById('piechart1')); chart.draw(data, { title: "Test Design Coverage", legend: 'none', isStacked: true, // legend: { alignment: 'center' }, //position: "top", // fontsize: "14px", is3D: true, //animation: { // duration: 1000, // easing: 'out', //}, hAxis: { //title: 'Sources', //titleTextStyle: { color: 'black' }, //count: -1, //viewWindowMode: 'pretty', slantedText: true }, // vAxis: {viewWindowMode: "explicit",viewWindow:{ min: -20 }}, chartArea: { width: '70%' }, }); } ```
nbering commented 8 years ago

One approach might be to hook into the bootstrap carousel's events to draw the charts when the carousel cycles to the next slide. I'm not really familiar with the bootstrap javascript components, as I generally use ui-bootstrap with angular, but here's the relevant documentation on bootstrap carousel events.