{ const container = html`

Pregenancy Rate By Age Group

` // var iDiv = document.createElement('div'); // iDiv.id = 'detail_bar2'; // document.getElementById('outter_div2').appendChild(iDiv);| var chart = new G2.Chart({ container: container, forceFit: true, height: 550 }); chart.source(progData, { percent: { formatter: function formatter(val) { val = val * 100 + '%'; return val; } } }); chart.coord('theta', { radius: 0.75 }); chart.tooltip({ showTitle: false, itemTpl: '

{name}: {value}

' }); chart.intervalStack().position('percent').color('item').label( 'percent', { formatter: function formatter(val, item) { return item.point.item + ': ' + val; } } ).tooltip('item*count', function(item, count) { return { name: item, value: count }; }).style({ lineWidth: 1, stroke: '#fff' }); chart.on("click", d => { // console.log(d); if (d['data'] == null || d['data']['_origin'] == null || d['data']['_origin']['item'] == null) { // console.log("empty area clicked"); return; } var thisdiv = document.getElementById("outter_div2") thisdiv.children[3].style.display = "none" document.getElementById("outter_div2").style.visibility = 'hidden'; document.getElementById("h2_outer").style.display = 'none'; document.getElementById('detail_bar2').innerHTML = "

Healthy and Unhealthy Child

"; document.getElementById('detail_bar2').style.visibility = 'visible'; // document.getElementById('detail_bar2').style.display = 'block'; var nchart = new G2.Chart({ container: 'detail_bar2', forceFit: true, height: 550 }); var curArray = []; var curName = d['data']['_origin']['item']; var totalPopulation = 0; var healthyPopulation = 0; var i = 0 for (i = 0; i < progData.length; ++i) { if (curName === progData[i]['item']) { totalPopulation = progData[i]['count']; break; } } healthyPopulation = surviveTwentyWeeksData[i]['count']; // console.log(totalPopulation); var deathPopulation = totalPopulation - healthyPopulation; curArray.push({'item': curName + ' healthy', 'count': healthyPopulation, 'percent': healthyPopulation / totalPopulation}); curArray.push({'item': curName + ' child death within 20 weeks of birth', 'count': deathPopulation, 'percent': deathPopulation / totalPopulation}); // console.log(curArray); nchart.source(curArray, { percent: { formatter: function formatter(val) { val = val * 100 + '%'; return val; } } }); nchart.coord('theta', { radius: 0.75 }); nchart.tooltip({ showTitle: false, itemTpl: '

{name}: {value}

' }); nchart.intervalStack().position('percent').color('item').label( 'percent', { formatter: function formatter(val, item) { return item.point.item + ': ' + val; } } ).tooltip('item*count', function(item, count) { return { name: item, value: count }; }).style({ lineWidth: 1, stroke: '#fff' }); nchart.on("click", d => { // console.log(d); document.getElementById('detail_bar2').innerHTML = ""; if (d['data'] == null || d['data']['_origin'] == null || d['data']['_origin']['item'] == null) { document.getElementById("outter_div2").style.visibility = 'visible'; var thisdiv = document.getElementById("outter_div2") thisdiv.children[3].style.display = "block" document.getElementById("h2_outer").style.display = 'block'; return; } var thisdiv = document.getElementById("outter_div2"); document.getElementById("h2_outer").style.display = 'none'; thisdiv.children[3].style.display = "none"; // document.getElementById("outter_div2").style.visibility = 'hidden'; /////////////////////////////////////////////////////////////////////////////////////////// document.getElementById('last_bar2').innerHTML = "

Normal and Low Weight Child

"; document.getElementById('last_bar2').style.visibility = 'visible'; // document.getElementById('last_bar2').style.visibility = 'block'; var nchart = new G2.Chart({ container: 'last_bar2', forceFit: true, height: 550 }); var curArray = []; var curName = d['data']['point']['item'].split(" ")[0]; // console.log(curName); var totalPopulation = 0; var lowWeightPopulation = 0; var i = 0 for (i = 0; i < progData.length; ++i) { if (curName === birthData[i]['item']) { totalPopulation = birthData[i]['count']; break; } } lowWeightPopulation = lowWeightData[i]['count']; // console.log(totalPopulation); var healthyPopulation = totalPopulation - lowWeightPopulation; curArray.push({'item': curName + ' healthy', 'count': healthyPopulation, 'percent': healthyPopulation / totalPopulation}); curArray.push({'item': curName + ' child with low birth weight', 'count': deathPopulation, 'percent': lowWeightPopulation / totalPopulation}); // console.log(curArray); nchart.source(curArray, { percent: { formatter: function formatter(val) { val = val * 100 + '%'; return val; } } }); nchart.coord('theta', { radius: 0.75 }); nchart.tooltip({ showTitle: false, itemTpl: '

{name}: {value}

' }); nchart.intervalStack().position('percent').color('item').label( 'percent', { formatter: function formatter(val, item) { return item.point.item + ': ' + val; } } ).tooltip('item*count', function(item, count) { return { name: item, value: count }; }).style({ lineWidth: 1, stroke: '#fff' }); nchart.on("click", d => { // console.log(d); document.getElementById('last_bar2').innerHTML = ""; // console.log("level2 empty area clicked"); document.getElementById("outter_div2").style.visibility = 'visible'; var thisdiv = document.getElementById("outter_div2") thisdiv.children[3].style.display = "block" // thisdiv.children[3].style.visibility = "visible" document.getElementById("h2_outer").style.display = 'block'; // document.getElementById("outter_div2").style.display = 'block'; return; }); nchart.render(); return container; }); nchart.render(); return container; //////////////////////////////////////////////////////////////////////////////// }); chart.render(); return container; }