Data Dashboards.Pdf

About the trainer • BS (2004) Psychology, Iowa State University • MA (2007) Psychology, Northern Illinois University • EdD (In progress) Curriculum Leadership, Northern Illinois University • Former web developer and school psychologist • Assistant Superintendent for CUSD 220 in Oregon, IL – Coach principals in use of data – Supervise technology department – Primary administrator for PowerSchool • Marathoner, trumpet player, web developer, geocacher, national parks junkie, graduate student, backpacker Agenda • Why visualize data? • Getting started • The 5-step process – Load the FusionCharts library – Create and populate data array – Create chart properties object – Place visualization <div> element – Render chart • Examples • Final Tips • Live Lab Why Visualize Data? • Easier interpretation • Less repeated exporting of data • Timelier access to information • Everyone becomes their own data person – Can even be added on teacher pages Getting Started • Familiarity with page customization • Working knowledge of HTML, JavaScript, and JSON • Ability to write or find SQL for the data you want to extract • Ability to read documentation Getting Started with FusionCharts Good Bad • Included with PowerSchool • Documentation is difficult • No accounts or API keys to read needed • Not drag-and-drop • Displays live data • Customization is complex • Many, many chart types available • Charts are quite customizable FusionCharts • Docs – http://docs.fusioncharts.com • Reference: – http://www.fusioncharts.com/dev/chart- attributes.html • Gallery – http://www.fusioncharts.com/charts/ – Remember to Keep it Simple – Only use 3D if needed The Basics • Load the FusionCharts library (same for every implementation) • Create and populate data array • Create chart properties object • Place visualization <div> element • Render chart 1. Load the FusionCharts library <script language="JavaScript" src="/flash/FusionCharts.js"></script> 2. Create and populate data array var myData = []; myData.push({"label":"0","value":76}); myData.push({"label":"1","value":78}); myData.push({"label":"2","value":79}); … myData.push({"label":"5","value":81}); 3. Create chart properties object var chartProperties = { type: 'column2d', renderAt: 'visualization', width: '100%', height: '400', dataFormat: 'json', dataSource: { "chart": { "caption": "Enrollment Summary", "xaxisname": "Grade Level", "yaxisname": "Number of students", "showvalues": "1" }, "data": myData } }; 4. Place visualization <div> element <div id="visualization" class="box-round"></div> 5. Render chart $j(document).ready(function() { var myChart = new FusionCharts( chartProperties ).render(); }); 2. Create and populate data array var myData = []; Creates a new blank array myData.push({"label":"0","value":76}); //myData[0].label == "0" //myData[0].value == 76 2. Create and populate data array We want this to be dynamic, so we use tlist_sql to pull in current data. ~[tlist_sql; query ;] code that is repeated for each record [/tlist_sql] tlist_sql • Processed before HTML is returned to web browser • View Source > Looks like literal text • FusionCharts object unaware of data source • Any PowerSchool data can be extracted and returned to the browser tlist_sql example ~[tlist_sql; Open select tlist_sql grade_level, count(*) students from students Query where enroll_status = 0 and ~(curschoolid) in (0, schoolid) group by grade_level Output order by grade_level ;] myData.push({"label":"~(grade_level)","value":~(students) }); [/tlist_sql] Close tlist_sql tlist_sql example: output var myData = []; Realtime data from tlist_sql myData.push({"label":"0", "value":76}); myData.push({"label":"1", "value":78}); myData.push({"label":"2", "value":79}); myData.push({"label":"3", "value":80}); myData.push({"label":"4", "value":81}); myData.push({"label":"5", "value":81}); 5. Render chart • Use jQuery's $j(document).ready() to wait until the page has been displayed before rendering chart. • Makes sure the <div> has been placed before trying to put content in it. Full Code Example <html> <head> <title>Enrollment Summary</title> 1. Load ~[wc:commonscripts] <link href="/images/css/screen.css" rel="stylesheet" media="screen"> <link href="/images/css/print.css" rel="stylesheet" media="print"> <script language="JavaScript" src="/flash/FusionCharts.js"></script> <script> //Create and populate data array //Create chart properties object 2. Data //Render chart </script> </head> <body> 5. Render ~[wc:admin_header_css] 3. Properties ~[wc:admin_navigation_css] <h1>Enrollment Summary</h1> <div id="visualization" class="box-round"></div> ~[wc:admin_footer_css] </body> </html> 4. <div> Your first chart • http://docs.fusioncharts.com/tutorial-getting- started-your-first-charts-building-your-first- chart.html • Each chart is defined by a different JSON object – Column 2D – Column 3D – Bar 2D – Bar 3D – Line 2D – Area 2D JSON • JavaScript Object Notation • Data interchange format native to JavaScript – Both human- and machine-readable • Arrays – [1, 2, 3, 4, 5] • Key/Value Pairs – {"id":2,"last_name":"Adair"} JSON Chart data is an array of objects (#2 – Data) [ {"label":"0", "value":76}, {"label":"1", "value":78}, {"label":"2", "value":79}, {"label":"3", "value":80}, {"label":"4", "value":81}, {"label":"5", "value":81} ] JSON Chart properties object (#3 – Properties) var chartProperties = { type: 'column2d', renderAt: 'visualization', width: '100%', height: '400', dataFormat: 'json', dataSource: { "chart": { "caption": "Enrollment Summary", "xaxisname": "Grade Level", "yaxisname": "Number of students", "showvalues": "1" }, "data": myData } }; Finished Chart Example #2 – Ethnicity Pie Chart The Basics • Load the FusionCharts library (same for every implementation) • Create and populate data array • Create chart properties object • Place visualization <div> element • Render chart 1. Load the FusionCharts library <script language="JavaScript" src="/flash/FusionCharts.js"></script> 2. Create and populate data array ~[tlist_sql; select Open upper(ethnicity) ethnicity, tlist_sql count(*) students from students Query where enroll_status = 0 and ~(curschoolid) in (0, schoolid) group by upper(ethnicity) order by Output students desc ;] myData.push({"label":"~(ethnicity)","value":~(students)}) ; [/tlist_sql] Close tlist_sql 2. Create and populate data array var myData = []; myData.push({"label":"C", "value":1262}); myData.push({"label":"", "value":119}); myData.push({"label":"H", "value":94}); myData.push({"label":"O", "value":28}); myData.push({"label":"A", "value":14}); myData.push({"label":"B", "value":12}); myData.push({"label":"I", "value":5}); myData.push({"label":"P", "value":3}); 3. Create chart properties object var chartProperties = { type: 'pie2d', renderAt: 'visualization', width: '100%', height: '400', dataFormat: 'json', dataSource: { "chart": { "caption": "Ethnicity Summary", "xaxisname": "Ethnicity", "yaxisname": "Number of students", "showvalues": "1" }, "data": myData } }; 4. Place visualization <div> element <div id="visualization" class="box-round"></div> 5. Render chart $j(document).ready(function() { var myChart = new FusionCharts( chartProperties ).render(); }); Full Code Example <html> <head> <title>Ethnicity Summary</title> ~[wc:commonscripts] <link href="/images/css/screen.css" rel="stylesheet" media="screen"> <link href="/images/css/print.css" rel="stylesheet" media="print"> <script language="JavaScript" src="/flash/FusionCharts.js"></script> <script> //Create and populate data array //Create chart properties object 2. Data //Render chart 1. Load </script> </head> <body> ~[wc:admin_header_css] 5. Render 3. Properties ~[wc:admin_navigation_css] <h1>Ethnicity Summary</h1> <div id="visualization" class="box-round"></div> ~[wc:admin_footer_css] </body> </html> 4. <div> Finished Chart Can I change this number format? Documentation: formatNumberScale • http://docs.fusioncharts.com/archive/3.4.0/tu torial-configuring-your-chart-number- format.html 3. Create chart properties object var chartProperties = { type: 'pie2d', renderAt: 'visualization', width: '100%', height: '400', dataFormat: 'json', dataSource: { "chart": { "caption": "Ethnicity Summary", "xaxisname": "Ethnicity", "yaxisname": "Number of students", "showvalues": "1", "formatNumberScale": "0" }, "data": myData } }; Un-scaled data labels Example #3 – Attendance Summary The Basics • Load the FusionCharts library (same for every implementation) • Create and populate data array • Create chart properties object • Place visualization <div> element • Render chart 1. Load the FusionCharts library <script language="JavaScript" src="/flash/FusionCharts.js"></script> 2. Create and populate data array Open ~[tlist_sql; tlist_sql select round(absence) absences, count(*) count from ( Query select studentid, sum(potential_attendancevalue - attendancevalue) absence from ps_adaadm_defaults_all join students on ps_adaadm_defaults_all.studentid = students.id and students.membershipshare > .1 where calendardate between to_date('~[gpv:date1]', '~[dateformat]') and to_date('~[gpv:date2]', '~[dateformat]') and ~(curschoolid) in (0, ps_adaadm_defaults_all.schoolid) group by studentid ) group by round(absence) order by round(absence) Output ;] myData.push({"label":"~(absences)","value":~(students)}); [/tlist_sql] Close tlist_sql 2. Create and populate data array var myData = []; myData.push({"label": 0, "value": 58}); myData.push({"label": 1, "value": 74}); myData.push({"label": 2, "value": 94}); myData.push({"label": 3, "value": 85}); … myData.push({"label": 36, "value": 1}); myData.push({"label":

Data Dashboards.Pdf

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support