JSFiddle - React, Tailwind, and code Playground

by Usman Khan

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart" style="width: 900px; height: 500px"></div>

JavaScript

google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year','Commercial', 'Conventional Res with out PMI','Conventional Res with PMI', 'Farm Loan', 'FHA Project', 'FHA Residential', 'Unassigned' ],
          ['Jan 2015', 55, 40, 56, 80, 100, 123, 100],
          ['Aug  2015', 25, 10, 38, 50, 70, 83, 90],
          ['Sep 2015', 50, 40, 36, 30, 20, 30, 40],
          ['Oct 2015', 15, 30, 36, 30, 30, 43, 45],
          ['Nov 2015', 65, 50, 46, 50, 60, 50, 55],
          ['Dec 2015', 70, 75, 60, 50, 30, 23, 20],
          ['Jan 2016',  75, 80, 96, 100, 110, 123, 130]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: true
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }