Hiding a
onload and display on click event not working correctly

Question

I am trying to make use of the display:none and display:block on my website. The style as follows:

<style>
  .div_class {
    display: none;
  }
</style>

The body content is:

<div class="div_class">
   <div id="graph_id"></div>
</div>

The script is:

    <script>
      // some event occurs and sets the display property of div_class to block as follows
      $(".div_class").css('display','block'); 

      var BarGraph = echarts.init(document.getElementById('graph_id'), theme);
      BarGraph.setOption({  
       // properties that are set for the echart 'graph_id'
      });
    </script>

The display: block; makes the div visible but the echart properties that are set do not render. The div appears blank. What may be the reason? I am unable to figure out. Kindly help. Thanks :)

*************************** EDIT *************************************
Also, I think the title may be misleading, since I am able to hide the div onload and display it on click. But the later rendering is where I am facing certain issue.

Which properties are those? Can you make a snippet that demonstrates the issue? — Mr Lister, Oct 25 '16 at 06:36
JavaScript is asynchronous and you display block may not happen before as expected. Also you can try to hide the content of the div and not the div itself. Visibility hidden or a more elaborate way will be with a fake loader. — Dinca Adrian, Oct 25 '16 at 06:36
*"I think the title may be misleading"* - So [edit] it to something that isn't misleading. — nnnnnn, Oct 25 '16 at 06:38
Does the graph appears after some time or does not appear at all? — Rajesh, Oct 25 '16 at 06:40

madalinivascu · Answer 1 · 2016-10-25T06:40:28.480

0

Rerender your BarGraph after showing the div

edited Oct 25 '16 at 06:40

answered Oct 25 '16 at 06:37

madalinivascu

32,064
4
39
55

Why? OP already says their code is called in response to some event. – nnnnnn Oct 25 '16 at 06:38
If you read commented part in OP's code, it says *some event occurs...* so I guess, its not happening before DOM is rendered – Rajesh Oct 25 '16 at 06:39
Some event refers to a click event on another echart graph here! – d33a Oct 25 '16 at 06:58

Bimbonkens · Answer 2 · 2016-10-25T08:43:36.950

 BarGraph .setOption({

works the same as

 BarGraph.setOption({

? (get rid of space)

also, try to wrap all your code in

$(document).ready(function() {
    ***code here***
});

Edit:

https://ecomfe.github.io/echarts-doc/public/tutorial-en.html#Introduction%20of%20ECharts%20features%0D

^ took code from there, added jquery to head, wrapped chart block in div.container with display:none, created click event

$(document).on('click', function() { $(".container").show(); myChart.setOption(option); });

working snippet:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- including ECharts file -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="http://echarts.baidu.com/dist/echarts.common.min.js"></script>

</head>
<body>
 <style>
     .container {
      display: none;
     }
    </style>
    <!-- prepare a DOM container with width and height -->
  click anywhere!
    <div class="container">
     <div id="main" style="width: 600px;height:400px;"></div>
    </div>
    <script type="text/javascript">
        // based on prepared DOM, initialize echarts instance
        var myChart = echarts.init(document.getElementById('main'));

        // specify chart configuration item and data
        var option = {
            title: {
                text: 'ECharts entry example'
            },
            tooltip: {},
            legend: {
                data:['Sales']
            },
            xAxis: {
                data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
            },
            yAxis: {},
            series: [{
                name: 'Sales',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // use configuration item and data specified to show chart
     $(document).on('click', function() {
      $(".container").show();
      myChart.setOption(option);
     });
    </script>
</body>
</html>

Sorry. Typing error with the space here. Thanks for pointing it out. And yes, I will try your suggestion. — d33a, Oct 25 '16 at 06:56
This seems to be a typo otherwise the above code block would also have been not functional which set the div to block. — Faisal Ashfaq, Oct 25 '16 at 06:57

score -1 · Answer 3 · edited May 23 '17 at 10:34

-1

I have tried with chart.js The chart can't be drawn if display property is set to none. The thing is visibility:hidden preserve the space, whereas display:none doesn't preserve the space

<style>
  .div_class{
      visibility:hidden;
  }
</style>

Try replacing the css with the above code. I hope this will help you :)

You can refer following post for more information: Difference between visibility:hidden and display:none?

edited May 23 '17 at 10:34

Community

1
1

answered Oct 25 '16 at 06:40

Rupesh babu Shrestha

222
1
8

I have tried with chart.js The chart can't be drawn if the display:none is done. – Rupesh babu Shrestha Oct 25 '16 at 06:42
Thanks for telling. :) m newbie in stackoverflow and its been only about a week that I have been using it. – Rupesh babu Shrestha Oct 25 '16 at 06:47

score -1 · Answer 4 · answered Oct 25 '16 at 07:05

    <script>
      // some event occurs and sets the display property of div_class to block as follows

      $(".div_class").css('display','block').promise().done(function(){

          //draw graph here

          var BarGraph = echarts.init(document.getElementById('graph_id'), theme);
          BarGraph .setOption({  
           // properties that are set for the echart 'graph_id'
          });

      }); 


    </script>

Try above code. I have added .promise() What it does is only after the css "display:block;" is applied then the graph drawing process will be started

Hiding a onload and display on click event not working correctly

4 Answers4

Hiding a
onload and display on click event not working correctly