Multiple Charts : Placement

[Amar Kumar Singh]

Hi,

I have a table with some data and creating pie charts for each row of the table. Everything works great and all the charts are getting created as expected.

Problem is all the charts are getting displayed in single row. How can create line breaks between charts after certain width is covered. I tried following:

a. manipulating the div width where the charts are drawn. The charts overshoot any wodth parameters.

b. adding line breaks after nth chart element using jquery but it just adds a line below the chart and draws the next one in same row.

I am new to javascript/frontend development.

    function drawChart(){
        $(".pie").each(function(){
            var pietr=$(this).closest('tr');
            var disk=pietr.children(':nth-child(1)').text();
            _drawChart(pietr, disk);
        });

    };

function _drawChart(pietr, disk) {
        // Create the data table for Sarah's pizza.
        var data = new google.visualization.DataTable();
        var used_space = parseFloat(pietr.children(':nth-child(2)').text());
        var free_space = (100 - used_space);
        data.addColumn('string', 'status');
        data.addColumn('number', 'percentage');
        data.addRows([
            ["Free: "+free_space, free_space],
            ["Used: "+used_space, used_space],
            ]);
        var options = {title:'Disk: '+pietr.children(':nth-child(1)').text(),
            width:200,
            height:200,
            pieSliceText: 'value',
            'chartArea':{width:"95%"},
            sliceVisibilityThreshold: 0,
            colors: ['rgb(76, 122, 63)', 'red', '#ff9300', '#ff6e00']
        };
        // Instantiate and draw the chart for Sarah's pizza.
        var chart = new google.visualization.PieChart(document.getElementById(disk));
        chart.draw(data, options);
        // Incrementing count for line break
        count++;
        if (count%4 == 0) {

            console.log("After Draw");

            //$("<br>").insertAfter(chart);
            console.log(chart);
            console.log(document.getElementById(disk));
            //$("<p>Hello</p>").insertAfter(document.getElementById(disk));
        };
    };