CODEWITHSUNDEEP
javascripthtmlchartsgoogle-visualization
MRah
MRah

Reputation: 167

Copy google charts to another div doesn't work in IE

My HTML page using css materialize tabs.

I build all my google chart graphs in 'show' table divs, after it I 'hide' them and when the user click on tab I replace the html tab with the correct one from the 'hide' divs.

In google chrome and firefox it works good, but in IE it doesn't work :(

<div id="row1">
    <br />
    <table align="center" style="background-color:white">
        <tr valign="top">
          ...
        </tr>
        <tr valign="top">
           ...
        </tr>
    </table>
    <br />
</div>

<div id="row2">
    <br />
    <table align="center" style="background-color:white;">
        <tr valign="top">
            ...
        </tr>
        <tr valign="top">
           ...
        </tr>
    </table>
    <br />
</div>

<div class="col s12" id="dashboardtabs">
    <ul class="tabs" style="background-color:#80CBC4" id="tabs">
        <li class="tab col s3"><a id="titletab1" class="white-text" href="#tab1" onclick="reloadForTabs('titletab1')" style="background-color:#009688">Subjects Status</a></li>
        <li class="tab col s3"><a id="titletab2" href="#tab2" class="white-text" onclick="reloadForTabs('titletab2')" style="background-color:#80CBC4">Stratification</a></li>
    </ul>
</div>
<div id="tab1" class="col s12"></div>

<div id="tab2" class="col s12"></div>

My js Code:

at the first load change all the rows div to show - google charts need to build on show divs for support user settings (width, high and etc.):

    var emptyTabs = function()
    {
        titletabs.forEach(function (val) {
            $('#tab' + val.slice(-1)).html('');
        });
    }

emptyTabs();
     //Changed chart divs from hide to show
            titletabs.forEach(function (val) {
                $('#row' + val.slice(-1))[0].style.display = 'block';
            });

After the user selected tab:

//Changed chart divs from show to hide
titletabs.forEach(function (val) {
    $('#row' + val.slice(-1))[0].style.display = 'none';
});
//Display the selected tab (After filters, in the first load and etc.)
var selectedtab = document.getElementsByClassName('white-text active')[0].id;
$('#tab' + selectedtab.slice(-1)).html($('#row' + selectedtab.slice(-1)).html());

In IE the graphs in the 'hide' divs (not in tabs) display correctly, but when the html div insert into the tab - the data is empty, The graph displays with all its properties but without data (bar chart - without the bars).

like this:

enter image description here

And not like this:

enter image description here

Open https://jsfiddle.net/wjqwd467/ in google chrome and in IE and see the different...

Could someone help me?

Thanks!

Upvotes: 0

Views: 146

Answers (1)

WhiteHat
WhiteHat

Reputation: 61232

for starters, Object.values isn't compatible with IE

see --> Object.values() - browser compatibility

try replacing with... 

        for (var i = 0; i < arraydata.length; i++) {
            var daraarr = [];
            for (var key in arraydata[i]) {
              if (arraydata[i].hasOwnProperty(key)) {
                daraarr.push(arraydata[i][key]);
              }
            }
            daraarr.push("color:" + mycolor[arraydata[i].rownum]);
            datatable.addRow(daraarr);
        }

Upvotes: 0

Related Questions