Load dynamic Content in Tabs present in popup

Question

I have a button, which when clicked opens up tabs. These tabs contains divs container1, container 2 etc. I want to load charts on these divs. I have already tried these charts as individual pages, where they work fine since i use $(document).on('pageshow', '#index', function(){ }); But now when i try to use this in tabs, how to call corresponding div's function???

my code is here

<div data-role="page">
  <div data-role="header">
  <h1>Slide 5</h1>
  </div>

  <div id="divmain" data-role="main" class="ui-content" style="height:40%">

   <a href="#popupBasic" data-rel="popup" class="ui-btn ui-corner-all ui-shadow                 ui-btn-inline" data-transition="pop">Basic Popup</a>
<div data-role="popup" id="popupBasic">
 <div data-role="tabs" id="tabs">
  <div data-role="navbar">
    <ul>
      <li><a id="firstTab" href="#one" value="verify">one</a></li>
      <li><a href="#two" data-ajax="false">two</a></li>
      <li><a href="#three" data-ajax="false">three</a></li>
      <li><a href="#four" data-ajax="false">four</a></li>
    </ul>
  </div>
  <div id="one" class="ui-body-d ui-content">
        <div id="container1" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

    <h1 id="tab1">First tab contents</h1>
  </div>

  <div id="two">
    <div id="container2" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

    <h1 id="tab1">Second tab contents</h1>
  </div>

  <div id="three" class="ui-body-d ui-content">
       <div id="container3" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    <h1>Third tab contents</h1>
  </div>

  <div id="four" class="ui-body-d ui-content">
    <div id="container4" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    <h1>Fourth tab contents</h1>
  </div>
</div>
</div>

  </div>
</div>


</body>

Code for one particular chart is here

$(document).on('pageshow', '#index', function () {
    // Set up the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column',
            margin: 75,
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                depth: 50,
                viewDistance: 25
            }
        },
        title: {
            text: 'Chart demo'
        },
        subtitle: {
            text: 'Data for Sales'
        },
        plotOptions: {
            column: {
                depth: 25
            }
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });


    // Activate the sliders
    $('#R0').on('change', function(){
        chart.options.chart.options3d.alpha = this.value;
        showValues();
        chart.redraw(false);
    });
    $('#R1').on('change', function(){
        chart.options.chart.options3d.beta = this.value;
        showValues();
        chart.redraw(false);
    });

    function showValues() {
        $('#R0-value').html(chart.options.chart.options3d.alpha);
        $('#R1-value').html(chart.options.chart.options3d.beta);
    }
    showValues();
});

So how to call particular function for every tab???

Answer 1

You can put the Highcharts creation code in a function and pass in the container id (also other params for the data, title, etc.)

function MakeChart(containerid){
     // Set up the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: containerid,
            type: 'column',
            margin: 75,
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                depth: 50,
                viewDistance: 25
            }
        },
        title: {
            text: 'Chart demo'
        },
        subtitle: {
            text: 'Data for Sales'
        },
        plotOptions: {
            column: {
                depth: 25
            }
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });   
}

Then either on page show or when each tab shows, call the function with the appropriate container id:

$(document).on('pageshow', '#index', function () {
   MakeChart("container1");
   MakeChart("container2");
   MakeChart("container3");
   MakeChart("container4");
});

In this example I am rendering all 4 charts on pageshow.

Here is a working DEMO