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,'node{color: rgb(105, 105,105)}' ],
                    ['Revenue from Auto Sales', 'Revenue $50B', 30,'node{color: rgb(105, 105,105)}'],
          ['Revenues from Leasing ops', 'Revenue $50B', 50,'node{color: rgb(105, 105,105)}'],
          ['Revenue $50B', 'Total operating expense', 40,'node{color: rgb(105, 105,105)}'],
          ['Revenue $50B', 'Operating Income', 60,'node{color: rgb(105, 105,105)}'],
          ['Total operating expense', 'Operating Expenses1', 20,'node{color: rgb(172, 3,0)}'],
          ['Total operating expense', 'Operating Expenses2', 15,'node{color: rgb(172, 3,0)}'],
          ['Total operating expense', 'Operating Expenses3', 5,'node{color: rgb(172, 3,0)}'],
          ['Operating Income', 'Net Income', 30 ,'node{color: rgb(0, 172,3)}'],
          ['Operating Income', 'Taxes', 20,'node{node{color: rgb(172, 3,0)}'],
          ['Operating Income', 'Interest Expense', 10,'node{color: rgb(172, 3,0)}']


</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');
         data.addColumn({type: 'string',role: 'style' });
        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 options = {
      height: 600,
      sankey: {
        node: {
        	nodePadding: 60 ,
					 width: 20 ,
          label: { fontName: 'Calibri',
                         fontSize: 14,
                         color: '#000000'
                    
                          }  
        },
        link: {
         fillOpacity: 0.8,
         colorMode:'source',
      
    //      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);
      }