JSFiddle - React, Tailwind, and code Playground

by Karmik Patel

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="chart_div" style="width: 260px; height: 500px;">Hello</div>

JavaScript

// students object is already defined from the CourseInfo.js file 
console.log(google);
google.load("visualization", "1", {
          packages: ["corechart"]
      });
google.setOnLoadCallback(drawChart);

function drawChart() {
    
    var data = google.visualization.arrayToDataTable([
        ['Year', 'FakeYAxis', 'Sales', 'Expenses'],
        ['2004', 0, 1000, 400],
        ['2005', null, 1170, 460],
        ['2006', null, 660, 1120],
        ['2007', null, 1030, 540]
    ]);
    
    var options = {
        title: 'Employed Persons',
        series: {
            0: {
                targetAxisIndex: 0,
                visibleInLegend: false,
                pointSize: 0,
                lineWidth: 0
            },
            1: {
                targetAxisIndex: 1
            },
            2: {
                targetAxisIndex: 1
            }
        },
        vAxes: {
            0: {
                textPosition: 'none'
            },
            1: {}
        },
        vAxis: {
            gridlines: {
                color: 'transparent'
            } ,
            baselineColor: 'transparent'
        }
    };
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}