Income statement visualisation

An example Income statement

by PayorCRM

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
Input:<br>
<textarea id="myTextarea"  rows="20" cols="80">


          ['Revenues from Parts Sales', 'Revenue $50B', 20 ],
          ['Revenue from Auto Sales', 'Revenue $50B', 30],
          ['Revenues from Leasing ops', 'Revenue $50B', 50],
          ['Revenue $50B', 'Total operating expense', 40],
          ['Revenue $50B', 'Operating Income', 60],
          ['Total operating expense', 'Operating Expenses1', 20],
          ['Total operating expense', 'Operating Expenses2', 15],
          ['Total operating expense', 'Operating Expenses3', 5],
          ['Operating Income', 'Net Income', 30],
          ['Operating Income', 'Taxes', 20],
          ['Operating Income', 'Interest Expense', 10]

</textarea>


<button type="button" onclick="drawChart()">Update</button>

<p id="demo"></p>
       <div id="sankey_basic" style="width: 900px; height: 500px;"></div>

JavaScript

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

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'From');
        data.addColumn('string', 'To');
        data.addColumn('number', 'Weight');
        console.log(document.getElementById("myTextarea").value);
        data.addRows(
          // Edit the below text based on your business income statement
eval("[" + document.getElementById("myTextarea").value + "]")

        );

        // Sets chart options.
    var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
                  '#cab2d6', '#ffff99', '#1f78b4', '#33a02c'];

    var options = {
      height: 600,
      sankey: {
        node: {
        nodePadding: 60 ,
          colors: colors,
          label: { fontName: 'Calibri',
                         fontSize: 14,
                         color: '#000000'
                    
                          }  
        },
        link: {
          colorMode: 'gradient',
          colors: colors
        }
      }
    };

        // Instantiates and draws our chart, passing in some options.
        var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
        chart.draw(data, options);
      }