</div><div>#myChart1, #myChart2,#myChart3,#myChart4,#myChart5,#myChart6,</div><div>#barChart1, #barChart2,#barChart3,#barChart4,#barChart5,#barChart6</div><div> {</div><div> display: inline !important;</div><div>}</div><div>
</div><div>function getBodyNode(){</div><div> return document.getElementById("body");</div><div>}</div><div>function loaded(){</div><div> var totalWidth = getBodyNode().clientWidth;</div><div> console.log("width in load: " + totalWidth);</div><div> var aCharts = document.getElementsByTagName("canvas");</div><div> for( var i = 0; i < aCharts.length; i++){</div><div> aCharts[i].width = totalWidth / 6.5;</div><div> }</div><div> var option = {</div><div> tooltips: {</div><div> enabled:false</div><div> },</div><div> type: "pie",</div><div> xAxisData: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],</div><div> yAxisData: [12, 19, 3, 5, 2, 3],</div><div> yAxisLabel: "Number of Votes"</div><div> };</div><div> for( var i = 1; i <= 6; i++ ){</div><div> createChartOnCanvas("myChart" + i, option);</div><div> }</div><div> option.type = "bar";</div><div> for( var i = 1; i <= 6; i++ ){</div><div> createChartOnCanvas("barChart" + i, option);</div><div> }</div><div>}</div><div>/*</div><div> {</div><div> type: pie,</div><div> xAxisData: [],</div><div> yAxisData: [],</div><div> yAxisLabel: '# of Votes'</div><div> }</div><div>*/</div><div>function createChartOnCanvas(canvasId, oChartOption){</div><div> var ctx = document.getElementById(canvasId).getContext('2d');</div><div> var myChart = new Chart(ctx, {</div><div> type: oChartOption.type,</div><div> data: {</div><div> labels: oChartOption.xAxisData,</div><div> datasets: [{</div><div> label: oChartOption.yAxisLabel,</div><div> data: oChartOption.yAxisData,</div><div> backgroundColor: [</div><div> 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)',</div><div> 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)'</div><div> ],</div><div> borderColor: [</div><div> 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)',</div><div> 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)'</div><div> ],</div><div> borderWidth: 1</div><div> }]</div><div> },</div><div> options: {</div><div> responsive: false,</div><div> scales: {</div><div> yAxes: [{</div><div> ticks: {</div><div> beginAtZero:true</div><div> }</div><div> }]</div><div> }</div><div> }</div><div> });</div><div>}</div><div>
