No Description Available
1
Google Charts allow us to create decent looking charts. It is a JavaScript library that is embedded with many pre-built charts like bar charts, calendar charts, area charts, geo charts, pie charts, and many other multi-functional charts.
onex
google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Opening Move', 'Percentage'], ["King's pawn (e4)", 44], ["Queen's pawn (d4)", 31], ["Knight to King 3 (Nf3)", 12], ["Queen's bishop pawn (c4)", 10], ['Other', 3] ]); var options = { title: 'Chess opening moves', width: 500, legend: { position: 'none' }, chart: { title: 'Chess opening moves', subtitle: 'popularity by percentage' }, bars: 'vertical', // Required for Material Bar Charts. axes: { x: { 0: { side: 'top', label: 'Percentage'} // Top x-axis. } }, bar: { groupWidth: "90%" } }; var chart = new google.charts.Bar(document.getElementById('top_x_div')); chart.draw(data, options); // Option for top_y_div var options = { title: 'Chess opening moves', width: 500, legend: { position: 'none' }, chart: { title: 'Chess opening moves', subtitle: 'popularity by percentage' }, bars: 'horizontal', // Required for Material Bar Charts. colors:['#e7711c'], axes: { x: { 0: { side: 'top', label: 'Percentage'} // Top x-axis. } }, bar: { groupWidth: "90%" } }; var chart = new google.charts.Bar(document.getElementById('top_y_div')); chart.draw(data, options); };
<div class="container"> <div class="row"> <div class="col-md-6"> <div id="top_x_div"></div> </div> <div class="col-md-6"> <div id="top_y_div"></div> </div> </div> </div>