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
• 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
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
$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
Enrollment Summary
~[wc:admin_footer_css] 4.• 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
$j(document).ready(function() { var myChart = new FusionCharts( chartProperties ).render(); }); Full Code Example
Ethnicity Summary
~[wc:admin_footer_css] 4.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
~[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": 42, "value": 2}); myData.push({"label": 53, "value": 1}); 3. Create chart properties object var chartProperties = { type: 'column2d', renderAt: 'visualization', width: '100%', height: '400', dataFormat: 'json', dataSource: { "chart": { "caption": "Attendance Summary", "xaxisname": "Absences", "yaxisname": "Number of students", "showvalues": "1" }, "data": myData } }; 4. Place visualization
$j(document).ready(function() { var myChart = new FusionCharts( chartProperties ).render(); }); Full Code Example
Attendance Summary
~[wc:admin_footer_css] 4.What's wrong with this graph? Filling in the gaps
• Query the data and store in myData array • Count from 0 to max number of absences – If myData[i] is undefined, set value to 0 Filling in the gaps: Code ~[tlist_sql; select absences, count from table ;] myData[~(absences)] = ~(count); maxabsences = ~(absences); [/tlist_sql] for (var i=0; i<=maxabsences; i++){ if (myData[i] == undefined) myData[i] = 0; } Corrected chart Final Tips
• Sketch your graph • Pick a chart type from the library • Write your query • Build the page • Always think about running at district versus school level – Will it still work? – Does it make sense? Resources
• Fusion Charts Documentation – http://www.fusioncharts.com/documentation/
• SQL Resources – Data Dictionaries • https://support.powerschool.com/dir/5933 – Learning SQL from O’Reilly: • http://shop.oreilly.com/product/9780596520847.do – SQL Pocket Guide from O’Reilly: • http://shop.oreilly.com/product/0636920013471.do – Tech on the Net • http://www.techonthenet.com/sql/index.php – W3 Schools • http://www.w3schools.com/sql Resources (cont.)
• JavaScript – w3Schools • http://www.w3schools.com/js/ – Microsoft • http://msdn.microsoft.com – JavaScript Patterns from O’Reilly • http://shop.oreilly.com/product/9780596806767.do Contact
• Web: http://www.auroraedtech.com
• Email: [email protected]
• Twitter: http://www.twitter.com/aplarsen
• LinkedIn: http://www.linkedin.com/in/aplarsen