Google Charts BAR

Updating Google Chart

by Craig Haywood

HTML

<script
src="https://www.gstatic.com/charts/loader.js">
</script>
    <script type="text/javascript">
    google.charts.load('current', {
            callback: drawJoinChart,
            packages: ['corechart']
        });
        
    
     function drawJoinChart() {
            var data = google.visualization.arrayToDataTable([
                ['Source', 'No. Joined', { role: 'style' }],
                ['Banner03', 14, '#ffab91'],
                ['CapturePage07', 8, '#b0120a'],
                ['EmailFollowup', 20, '#ff0066'],
                ['DirectLink', 7, 'orange'],
                ['Cookie', 4, 'red'],
                ['Closed', 14, '#ffab91'],
                ['SplashPage11', 8, '#b0120a'],
                ['SplashPage14', 6, '#ff0066'],
                ['Capture17', 3, 'orange'],
                ['PagePeelAd', 4, 'red'],
                ['Blogpost', 14, '#ffab91'],
                ['Banner13', 8, '#b0120a'],
                ['SplashPage04', 20, '#ff0066'],
                ['Email01', 24, 'orange'],

            ]);

            var chart = new google.visualization.BarChart(
                document.getElementById('chart_joiners')
            );
            chart.draw(data, {
                theme: 'material',
                legend: 'none',
                title: 'Top Join Sources',
                hAxis: {
                    title: 'Number Joined',
                    minValue: 0
                },
                vAxis: {
                    title: 'Source'
                }
            });
        }
        
    </script>

  <body>
      <button onclick='drawChart();'>Draw chart</button>
    
      <button onclick='updateChart();'>update chart</button>
    <div style="min-width: 440px; width: 50%; float: left">
                        <div id="chart_joiners" style="height: 400px;"></div>
                    </div>
    

  </body>
</html>