Show highchart graph in modal on same page by clicking on graph

Question

i have shown some highcharts graphs on my stats page. i want to show the graph on modal window on same page.But it is not showing in the modal window. I have called the same id on modal and page chart. i think it is some kind of id conflict. I also tried to initialize the graphs by class but didn't happen. Here is my code.

<?php //echo "<pre>"; print_r($body_stat); exit(); ?>

 <?php //for($i=0;$i<count($body_stat);$i++)
//      { 
//          echo $body_stat[$i]->stats_field;

//      }
//      die(ss);
    ?> 
<?php $this->load->view('/frontend/meta-header'); ?>
<?php $this->load->view('/frontend/header'); ?>

 <!-- Container start -->
<div class="container innerpage-container">
    <div class="row">
        <div class="col-lg-12 col-sm-12 profile-status">
            <div id="horizontalTab">
                <ul class="resp-tabs-list hor_1">
                    <li class="my-status"><span></span>My Stats</li>
                        <li class="exercise"><span></span>Exercise</li>
                        <li class="nutrition"><span></span>Nutrition</li>
                        <li class="my-profile"><span></span>My Profile</li>
                        <li class="friends"><span></span>Friends</li>
                        <a href="<?php echo site_url(); ?>/frontend/fitness/logout"><button class="logout-btn"><span></span>Logout</button></a>
                        <button class="share-btn" style="float:right;"><span></span>Share</button>
                        <button class="update-status" style="float:right;"><span></span>Update</button>
                </ul>
                <div class="resp-tabs-container hor_1">

                    <div>
                        <a class="update-stats" href="<?php echo site_url(); ?>/frontend/stats/addBodyStats"><button type="button" class="btn btn-primary btn-md">Update My Body Stats</button></a>

                        <form class="stats-form" action="<?php echo site_url();?>/frontend/fitness/userProfile" method="post" enctype="multipart/form-data">
                        <input type="text" id="from"  name="from" value="<?php echo set_value('from'); ?>"placeholder="From"> To <input type="text" id="to"  name="to" value="<?php echo set_value('to'); ?>"placeholder="To">
                        <button type="submit" class="btn btn-primary btn-sm stats-submit">Filter</button>
                    </form>

                            <p>


<!-- graph modal html -->
<a href="#" data-toggle="modal" data-target="#chart-modal" class="chart-modal"><i class="fa fa-bar-chart-o modal-icon"></i></a>
<div class="modal fade" id="chart-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content chart">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Assortment Analysis</h4>
      </div>
      <div class="modal-body">
        <div class="panel panel-default">
          <div class="panel-body">
            <div id="chart-graph-1"></div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- end graph modal html -->

                    <?php 
                    if($body_stat[0]=='n')
                    {
                        echo 'Record not found';
                    }else
                    {
                    for($i=0;$i<count($body_stat);$i++)
                    { ?>
                     <div class="chart<?php echo $i; ?>"></div>


<script>
                                $(function () { 
                                    $('#chart<?php echo $i ?>').highcharts({
                                        chart: {
                                            type: 'spline'
                                        },
                                        title: {
                                            text: '<?php echo $body_stat[$i]->stats_field; ?>'
                                        },
                                        xAxis: {
                                            type: 'datetime'
                                        },
                                        plotOptions: {
                                            series: {
                                                pointStart: Date.UTC(2015, 0, 1),
                                                pointInterval: 24 * 3600 * 1000
                                            }
                                        },
                                        credits: {
                                            enabled: false
                                        },
                                        series: [{
                                            name: '<?php echo $this->session->userdata('user_name'); ?>',
                                            data: [<?php $this->stats_model->getBodyStatsValues($body_stat[$i]->stats_field); ?>]
                                        }],

                                    tooltip: {
                                        shared: true,
                                        crosshairs: true
                                       }
                                    });
                                });  

                            </script>
                        <?php } 
                        } ?>
                            <!-- graph modal js -->
                            <div class="clearfix"></div>

                            <script src="<?php echo base_url(); ?>/frontend/js/highcharts.js"></script>
                            <script src="<?php echo base_url(); ?>/frontend/js/exporting.js"></script>
                        </p>
                    </div>

                    <div>
                        <p>
                        <div id="ChildVerticalTab_1">
                            <ul class="resp-tabs-list ver_1">
                                <li>Workout list</li>
                                <li>Custom workouts</li>
                                <li>Workout Log</li>
                            </ul>
                            <div class="resp-tabs-container ver_1">
                                <div>
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.
                                    </p>
                                </div>
                                <div>
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.
                                </div>
                                <div>
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.
                                    </p>
                                </div>
                            </div>

                        </div>
                    </p>
                    </div>

                    <div>
                        <p>nutrition</p>
                    </div>
                    <div>
                        <p>my profile</p>
                    </div>
                    <div>
                        <p>friends</p>
                    </div>

                </div>
            </div>



        </div>
    </div>




    <script>
                $(document).ready(function () {
                    $('#horizontalTab').easyResponsiveTabs({
                        type: 'default', //Types: default, vertical, accordion
            width: 'auto', //auto or any width like 600px
            fit: true, // 100% fit in a container
            tabidentify: 'hor_1', // The tab groups identifier
            activate: function(event) { // Callback function if tab is switched
                var $tab = $(this);
                var $info = $('#nested-tabInfo');
                var $name = $('span', $info);
                $name.text($tab.text());
                $info.show();
                        }
                    }); 

                    $('#ChildVerticalTab_1').easyResponsiveTabs({
                        type: 'vertical',
                        width: 'auto',
                        fit: true,
                        tabidentify: 'ver_1', // The tab groups identifier
                        activetab_bg: '#fff', // background color for active tabs in this group
                        inactive_bg: '#F5F5F5', // background color for inactive tabs in this group
                        active_border_color: '#c1c1c1', // border color for active tabs heads in this group
                        active_content_border_color: '#5AB1D0' // border color for active tabs contect in this group so that it matches the tab head border
                    });
                });
            </script>
</div> 

 <!--container end-->

<?php $this->load->view('/frontend/footer'); ?>

Answer 1

i have done this using highslide, and calling my highchart and highslide scripts in the head. now the modal window open by clicking on chart. here is the fiddle.

<script>

createGraph({
                                    chart: {
                                        renderTo: 'chart<?php echo $i; ?>',
                                        type: 'spline',
                                        events: {}
                                    },
                                    title: {
                                        text: '<?php echo $body_stat[$i]->stats_field; ?>'
                                    },
                                    subtitle: {
                                        text: 'Click on chart to Enlarge',
                                    },
                                    xAxis: {
                                        type: 'datetime'
                                    },
                                    plotOptions: {
                                        series: {
                                            pointStart: Date.UTC(2015, 0, 1),
                                            pointInterval: 24 * 3600 * 1000
                                        }
                                    },
                                    credits: {
                                        enabled: false
                                    },
                                    series: [{
                                        name: '<?php echo $this->session->userdata('user_name'); ?>',
                                        data: [<?php $this->stats_model->getBodyStatsValues($body_stat[$i]->stats_field); ?>]
                                    }],

                                tooltip: {
                                    shared: true,
                                    crosshairs: true
                                   }
                                });  
                                function createGraph(chartOptions) {
                                    // open the basic chart
                                    $(document).ready(function () {
                                        // set the click event for the parent chart
                                        chartOptions.chart.events.click = function () {
                                            hs.htmlExpand(document.getElementById(chartOptions.chart.renderTo), {
                                                width: 1000,
                                                height: 470,
                                                allowWidthReduction: true,
                                                allowHeightReduction: true,
                                                preserveContent: false,
                                                align: 'center',
                                                allowSizeReduction: true,
                                                dimmingOpacity: '0.75'
                                            }, {
                                                chartOptions: chartOptions
                                            });
                                        };
                                        var chart = new Highcharts.Chart(chartOptions);
                                    });
                                }
hs.Expander.prototype.onAfterExpand = function () {
    if (this.custom.chartOptions) {
        var chartOptions = this.custom.chartOptions;
        if (!this.hasChart) {
            chartOptions.chart.renderTo = $('.highslide-body')[0];
            chartOptions.chart.events.click = function () {};
            var hsChart = new Highcharts.Chart(chartOptions);
        }
        this.hasChart = true;
    }
};

</script>


    http://jsfiddle.net/roadrash/GqhEX/

Answer 2

Try to open modal with jquery:

$("#modalId").modal("show");