JSFiddle - React, Tailwind, and code Playground

by Jaikrat Tariyal

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>

<div id="chart_div" style="width: 500px; height: 300px;"></div>

JavaScript

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawKeywordChartForManage);
		    
function drawKeywordChartForManage() {
 var val = 'Daniel Davis Salon:10;Municipal Advisor Rule Training:28;Idaho Housing and Finance Association:34;Testing Lead Banker:40;Testing multiple series:45;';
        
    var array = [];
    while(length>0){
        var sepAt = val.indexOf(";");
        var value = parseInt(val.substring(val.indexOf(":")+1, sepAt));
        //alert(val.substring(0, val.indexOf(":")));
        array.push(val.substring(0, val.indexOf(":")));
        array.push(value);
        
        val = val.substring(val.indexOf(";")+1, length);
        length = val.length;
    }
    
    var data = google.visualization.arrayToDataTable([
        ['Client', 'Occurences', { role: 'style' }],
        ['Daniel Davis Salon', 10, '#848C49'],
        ['Municipal Advisor Rule Training', 28, '#848C49'],    
        ['Idaho Housing and Finance Association', 34, '#848C49'],
        ['Testing Lead Banker', 40, '#848C49'],
        ['Testing multiple series', 45, '#848C49'],
    ]);

   var options = {
        title: 'Client Matches',
        titleTextStyle:{bold:true,fontSize:20},
        legend:{position:'none'},
        hAxis: {showTextEvery:1,maxAlternation:2},        
    };
 var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
 chart.draw(data, options);
}