CODEWITHSUNDEEP
jqueryhtmlgoogle-visualization
Pawan Kalyan
Pawan Kalyan

Reputation: 581

How to load google visualization charts into a div?

I have this scenario here.. I am using jquery vertical tabs with some links in each tab. On clicking of a link ,the display area of the menu must be hidden and a div must be loaded with google visualization charts. But I am unable to load them.Is there any way to load google charts into a div dynamically.

here is the markup

    <!doctype html>
    <html lang="en-US">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="Content-Type" content="text/html">
      <title>Title</title>

      <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
      <script type='text/javascript' src='https://www.google.com/jsapi'></script>


    </head>

    <body>
      <div id="w" class="clearfix">
        <ul id="sidemenu">
          <li>
            <a href="#home-content" class="open"><img src="images/img_Logo_128.jpg"/></a>
          </li>

          <li>
            <a href="#about-content"><img src="images/img2.png"/></a>
          </li>


        </ul>

        <div id="content">
            <div id="home-content" class="contentblock">
              <h1>The Main Page!</h1>
              <p><a href="#" data-page="components/userstats.html"  >Sample Page 1</a></p>

             <p><a href="#" data-page="components/component2.html" >Sample page 2</a></p> 

              <p><a href="#" data-page="components/component3.html" >Sample page 3</a></p>

              <p><a href="#" data-page="components/component4.html" >Sample page 4</a></p>
            </div><!-- @end #home-content -->


            <div id="about-content" class="contentblock hidden">
              <h1>About Page</h1>
              <p><a href="#" data-page="components/component1.html" >Sample page 1</a></p>

             <p><a href="#" data-page="components/component2.html" >Sample page 2</a></p> 

              <p><a href="#" data-page="components/component3.html" >Sample page 3</a></p>

              <p><a href="#" data-page="components/component4.html" >Sample page 4</a></p>
            </div><!-- @end #about-content -->


        </div><!-- @end #content -->
        <div class="componentContent">

        </div>
      </div><!-- @end #w -->

    <script type="text/javascript">
    $(function(){
      $('#sidemenu a').on('click', function(e){
        e.preventDefault();

        $(".componentContent").css("display","none");
        $("#content").css("display","block");
        if($(this).hasClass('open')) {
          // do nothing because the link is already open
        } else {
          var oldcontent = $('#sidemenu a.open').attr('href');
          var newcontent = $(this).attr('href');

          $(oldcontent).fadeOut('fast', function(){
            $(newcontent).fadeIn().removeClass('hidden');
            $(oldcontent).addClass('hidden');
          });


          $('#sidemenu a').removeClass('open');
          $(this).addClass('open');
        }
      });
      });
            $("#content a").on('click',function(e){
                e.preventDefault();

            $("#content").css("display","none");
            $(".componentContent").load($(this).attr("data-page"));
            $(".componentContent").css("display","block");
            return false;



    })
  }) -->

</script>
</body>
</html>

and the markup of google charts page which is components/userstats.html is 

     <script type='text/javascript' src='https://www.google.com/jsapi'></script>
     <script type='text/javascript'>

     google.load('visualization', '1', 
     packages:['corechart']});
     google.setOnLoadCallback(drawChart);
     function drawChart() {
      var data = google.visualization.arrayToDataTable([
         ['hour', 'New Users', 'Active Users'],
         ['1', 2805, 10035 ],
         ['2', 3013, 10355 ],
         ['3', 3025, 10109 ],
         ['4', 2634, 9047 ],
         ['5', 2188, 7317 ],
         ['6', 1934, 5570 ],
         ['7', 1622, 4077 ],
      ]);
      var options =
      {
        "users-usa":{
        "title": "usa User Statistics"
        },
        "users-eu":{
        "title": "eu User Statistics"
        },
        "users-asia":{
        "title": "asia User Statistics"
      }
      }
      for(var key in options){
      var chart = new google.visualization.LineChart
      (document.getElementById(key));
      chart.draw(data, options[key]);
      }
    }

</script>

<div id='users-usa' style='width: 900px; height: 300px;'></div>
<div id='users-eu' style='width: 900px; height: 300px;'></div>
<div id='users-asia' style='width: 900px; height: 300px;'></div>

Now I need to load this page in a div with class .componentContent

Upvotes: 1

Views: 501

Answers (1)

Igor Milla
Igor Milla

Reputation: 2786

You may try to use <iframe> tag, as it's typically the way to go, when you need to embed html page in your document.

From w3c documentation:

The <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Upvotes: 1

Related Questions