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));
};
};
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/70ffe4ae-816d-4063-a6ac-3ed0258c5b5an%40googlegroups.com.
