• Hi All

    Please note that at the Chandoo.org Forums there is Zero Tolerance to Spam

    Post Spam and you Will Be Deleted as a User

    Hui...

  • When starting a new post, to receive a quicker and more targeted answer, Please include a sample file in the initial post.

Turning my spreadsheet into a graph

Steve Strom

New Member
Hello friends,

This is my first post. I work in state government and am looking for some opportunities to present the data that we use at our board meetings in a more graphic format that makes it easier to understand.

I have been perusing the site today and found a thread about creating a pie of a pie graph which is pretty close to what I'm looking to do with my data. I also found a youtube demo of a cloud based product called Scitivate that works with social media data to create graphs based on demographic information. I've included a screen capture of their graph and included it with my spreadsheet to see if anyone else has created a similar graph or if there's already one on the site and I just haven't found it yet.

The spreadsheet contains a list of current projects that I would like to group either by committee assignment or project manager. The first level of the graphic would show the 5-6 circles with the count of individual projects assigned to the committee or the project manager. When a user clicks on one of the circles (or other icon), the graph would open to show the list of projects. A user could then click on the name of any project to get further detail on the project - begin/end date, funded amount, how much expended so far, etc.

I hope I have provided enough information to make my request understandable. If not, please reply for clarification.

Thanks in advance for your assistance.

Steve
USA


Post Moved by Mod
 

Attachments

Last edited by a moderator:
Or you can build it yourself
Code:
<html>
<body>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="sankey_multiple" style="width: 900px; height: 300px;"></div>

<script type="text/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.addRows([
       [ 'GRANT FUND', 'FINANCIAL ASSET DEVELOPMENT', 325000 ],
       [ 'GRANT FUND', 'COMMUNITY LIVING', 335920 ],
       [ 'GRANT FUND', 'ADVOCACY DEVELOPMENT', 735000 ],
       [ 'GRANT FUND', 'CROSS CUTTING', 677773.71 ],
       [ 'GRANT FUND', 'ADMINISTRATION', 550000 ],
     
      ['FINANCIAL ASSET DEVELOPMENT', 'PROJECT SEARCH', 100000 ],
      ['FINANCIAL ASSET DEVELOPMENT', 'UPWARD FINANCIAL STABILITY', 75000 ],
      ['FINANCIAL ASSET DEVELOPMENT', 'LEARNING & EARNING AFTER HIGH SCHOOL', 150000 ],
       
        ['COMMUNITY LIVING', 'SAFETY AND SECURITY: DOMESTIC VIOLENCE', 50000],
        ['COMMUNITY LIVING', 'GUARDIANSHIP', 75000 ],
        ['COMMUNITY LIVING', 'MEDICAL & HEALTH HOMES', 105920],
        ['COMMUNITY LIVING', 'EMERGENCY PREPAREDNESS', 105000],
       
        ['ADVOCACY DEVELOPMENT', 'PARTNERS IN POLICYMAKING', 185000],
        ['ADVOCACY DEVELOPMENT', 'NC ADA NETWORK - FISCAL AGENT/INTER.', 40000 ],
        ['ADVOCACY DEVELOPMENT', 'NC CHAPTER OF THE NCADSP', 100000],
        ['ADVOCACY DEVELOPMENT', 'SIBLING SUPPORT', 50000],
        ['ADVOCACY DEVELOPMENT', 'NC ADA NETWORK', 60000],
        ['ADVOCACY DEVELOPMENT', 'MEDICAL REFORM SEG', 100000],
        ['ADVOCACY DEVELOPMENT', 'ADVANCING STRONG LEADERS', 200000],
       
        ['CROSS CUTTING', 'CONFERENCE FUNDING', 24000],
        ['CROSS CUTTING', 'COUNCIL DEVELOPMENT INITIATIVE', 40000],
        ['CROSS CUTTING', 'JEAN WOLFF-ROSSI FUND', 30000],
        ['CROSS CUTTING', 'PROGRAM MANAGEMENT/QM', 388773.71],
        ['CROSS CUTTING', 'PUBLIC POLICY', 60000],
        ['CROSS CUTTING', 'NCCDD COMMUNICATIONS', 135000],       
   
        ['ADMINISTRATION', 'ADMIN. STAFF & COUNCIL EXPENSES', 550000],             
     
        ]);

    // Set chart options
    var options = {
      width: 1800,
     height: 800,
     sankey: { node: { nodePadding: 20} },
     sankey: { node: { width: 5 } }
    };

   
    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple'));
    chart.draw(data, options);
   }
</script>
</body>
</html>
 
Back
Top