I'm building a visualization of student grades so teachers and principals can see how a student's grades fluctuate over time in all classes. We have data archived for every student in every class every week for 2+ years. The line chart has been wonderful for displaying the data, but it gets a little busy when you factor in that many data points.
To limit the data view, I turned to the awesome chartrangefilter detailed here: https://developers.google.com/chart/interactive/docs/gallery/controls#chartrangefilter Again, this functions wonderfully to restrict the range. The only real problem I have left is that I'd like to limit the legend to the courses that are currently displayed in the graph so it's easier to match the legend text with the chart line. Here is a screen cap of what the visualization looks like. You can see how the legend has a lot more names than what are showing. This is the list of all classes the student has been in for those 2+ years, even though we are only looking at the past few months. <https://lh4.googleusercontent.com/-b3SpzYuzgnU/VBj2T_1YXmI/AAAAAAAAxCc/15QP_vvT4dE/s1600/gradehist%2Bdemo.png> It seems like the thing to do here is to create a DataView (https://developers.google.com/chart/interactive/docs/datatables_dataviews) that is refreshed, but I can't get it to work. One of the elements always disappears when I move the slider. Here are the important parts to my code. What I'd really like it to do is only show the legend for the courses which have datapoints within the range that has been selected using the slider above. The grade and grade scale data all come from an Oracle database. How it gets to the browser is not terribly important, but it's an implementation of SQL that writes data to the HTML that is returned from the server. It can't be read into an object or an array like you might do in PHP, which is why the grades are pushed straight into a JavaScript array. It looks static here, but this is after it's been returned to the browser. <script type="text/javascript"> function drawChartRangeFilter() { var grades = new Array(); grades.push([59762, 'Computers 8 (Teacher Name)', '9/17/2012', 56, 'F', 'Q1']); grades.push([77735, 'TRY 8 (Teacher Name)', '9/17/2012', 100, 'S', 'Q1']); //lots and lots of grades here. Over 2 years of datapoints. grades.push([108092, 'Drivers Ed 1st 9wks (Teacher Name)', '9/8/2014', 97, 'A', 'S1']); grades.push([112744, 'Biology (Teacher Name)', '9/8/2014', 95, 'A', 'S1']); grades.push([108982, 'English 2 (Teacher Name)', '9/8/2014', 72, 'D+', 'S1' ]); grades.push([109301, 'Art/Studio 2 (Teacher Name)', '9/8/2014', 100, 'A', 'S1']); grades.push([109140, 'Spanish I (Teacher Name)', '9/8/2014', 96, 'A', 'S1' ]); var courses = new Array(); var blank_week = []; var thumb_columns = []; for(var i = 0; i < grades.length; i++) { if(-1 == courses.indexOf(grades[i][1])) { courses.push(grades[i][1]); thumb_columns.push(thumb_columns.length); blank_week.push(null); blank_week.push(null); } } courses.sort(); var data = new google.visualization.DataTable(); data.addColumn('date', 'Week'); for(var i = 0; i < courses.length; i++) { data.addColumn('number', courses[i]); data.addColumn({type:'string', role:'tooltip', 'p': {'html': true}}); $j("select#course").append("<option>" + courses[i] + "</option>"); } var new_week = [(grades[0][2])]; new_week = new_week.concat(blank_week); for(var i = 0; i < grades.length; i++) { if ((grades[i][2]) != new_week[0] || i == grades.length-1) { new_week[0] = new Date(Date.parse(new_week[0])); data.addRow(new_week); new_week = [(grades[i][2])]; new_week = new_week.concat(blank_week); } new_week[courses.indexOf(grades[i][1])*2+1] = grades[i][3]; new_week[courses.indexOf(grades[i][1])*2+2] = "<p>" + grades[i][1] + "<br>" + grades[i][2] + " - " + grades[i][5] + "<br><b>" + grades[i][3] + " (" + grades[i][4] + ")</b></p>"; } var dashboard = new google.visualization.Dashboard(document. getElementById('chartRangeFilter_dashboard_div')); var enddate = new Date("09/09/2014"); var startdate = new Date(enddate - 1000*60*60*24*6*30); var control = new google.visualization.ControlWrapper({ 'controlType': 'ChartRangeFilter', 'containerId': 'chartRangeFilter_control_div', 'options': { // Filter by the date axis. 'filterColumnIndex': 0, 'ui': { 'chartType': 'LineChart', 'chartOptions': { 'chartArea': {'left':100}, 'hAxis': {'baselineColor': 'none'}, }, 'chartView': { 'columns': thumb_columns }, 'minRangeSize': 1000*60*60*24 } } , 'state': {'range': {'start': startdate, 'end': enddate}} }); var studentticks = []; //grade scale information. this is pulled in dynamically from the grades database. studentticks.push({v:95, f:'A 95'}); studentticks.push({v:92, f:'A- 92'}); studentticks.push({v:89, f:'B+ 89'}); studentticks.push({v:86, f:'B 86'}); studentticks.push({v:83, f:'B- 83'}); studentticks.push({v:80, f:'C+ 80'}); studentticks.push({v:77, f:'C 77'}); studentticks.push({v:74, f:'C- 74'}); studentticks.push({v:71, f:'D+ 71'}); studentticks.push({v:68, f:'D 68'}); studentticks.push({v:65, f:'D- 65'}); studentticks.push({v:0, f:'F/I/NC/P 0'}); var chart = new google.visualization.ChartWrapper({ 'chartType': 'LineChart', 'containerId': 'chartRangeFilter_chart_div', 'options': { // Use the same chart area width as the control for axis alignment. 'chartArea': {'width': '90%'}, 'vAxis': {'viewWindow': {'min': 0, 'max': 105}}, 'title' : 'Weekly Grade Report', 'vAxis': {'title': "Percent", minValue: 0, maxValue: 105, ticks: studentticks }, 'hAxis': {'title': "Week"}, 'hAxis': {'gridlines': {count: 10}}, 'chartArea': {left:100, height: "80%" }, 'legend': {width:150}, 'tooltip': {isHtml: true} } }); dashboard.bind(control, chart); dashboard.draw(data); } </script> <div id="chartRangeFilter_dashboard_div" style="border: 1px solid #ccc"> <table class="columns"> <tr> <td> <div id="chartRangeFilter_control_div" style="height:50px;"></div> </td> <td style="width:25%;"> </td> </tr> <tr> <td colspan="2"> <div id="chartRangeFilter_chart_div" style="height: 800px;"></div> </td> </tr> </table> </div> <div class="button-row"></div> </div> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
