How to view pie chart within a div in table row using javascripts functions

Question

I want to view pie chart within a div. The div is in a data table row.

My requirement is: When I will click on a data table row, the div in the row of the data table will be expanded and a pie chart will be displayed within the div.

Here is my pie chart code:

<script>
        $(function () {

            $(document).ready(function () {

                // Build the chart
                $('.container').highcharts({
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                        type: 'pie'
                    },
                    title: {
                        text: 'Browser market shares January, 2015 to May, 2015'
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: false
                            },
                            showInLegend: true
                        }
                    },
                    series: [{
                        name: 'Brands',
                        colorByPoint: true,
                        data: [{
                            name: 'Microsoft Internet Explorer',
                            y: 56.33
                        }, {
                            name: 'Chrome',
                            y: 24.03,
                            sliced: true,
                            selected: true
                        }, {
                            name: 'Firefox',
                            y: 10.38
                        }, {
                            name: 'Safari',
                            y: 4.77
                        }, {
                            name: 'Opera',
                            y: 0.91
                        }, {
                            name: 'Proprietary or Undetectable',
                            y: 0.2
                        }]
                    }]
                });
            });
        });
    </script>

here is my javascript function:

    function format ( d ) {
            // `d` is the original data object for the row
            return '<div class="slider">'+
                '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
                '<tr>'+
                '<td>Full name:</td>'+
                '<td>'+d.name+'</td>'+
                '</tr>'+
                '<tr>'+
                '<td>Extension number:</td>'+
                '<td>'+d.extn+'</td>'+
                '</tr>'+
                '<tr>'+
                '<td colspan="2"><div class="container"></div>sdfdfsdf</td>'+
                '</tr>'+
                '</table>'+
                '</div>';
        }

Here is my datatable onclick function:

 $(document).ready(function() {

        // Add event listener for opening and closing details
        $('.example tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = table.row( tr );

            if ( row.child.isShown() ) {
                // This row is already open - close it
                $('div.slider', row.child()).slideUp( function () {
                    row.child.hide();
                    tr.removeClass('shown');
                } );
            }
            else {
                // Open this row
                row.child( format(row.data()), 'no-padding' ).show();
                tr.addClass('shown');

                $('div.slider', row.child()).slideDown();
            }
        } );
    } );

score 0 · Accepted Answer · edited May 23 '17 at 12:15

Simply initialise the chart when the container is shown? Take all the code within $(document).ready(function () { and move it to callable function

function initChart() {
 // Build the chart
 $('.container').highcharts({
   chart: {
...

and execute that function in your click handler

...
else {
  // Open this row
  row.child( format(row.data()), 'no-padding' ).show();
  tr.addClass('shown');
  $('div.slider', row.child()).slideDown();
  initChart();
}
...

PS: You seem to be a fan of $(document).ready and $(function () {. First of all using both is redundant, but you should not use $(document).ready() at all. It is very rare you actually would need to wrap anything into a ready() or (function(), but many people seems to be using this "pattern" unconsciously without any real purpose, also called cargo cult programming. The only real outcome of this is the daily pile of questions with people having scope problems.

How to view pie chart within a div in table row using javascripts functions

1 Answers1