To do this, you have to use an intermediary ChartWrapper in between the
control and your chart. The control will drive the intermediary, and a
"ready" event handler on the intermediary will check the data to see which
series have values in the visible range of the data set, set the "series"
option appropriately to hide the data series with no data from the legend,
set the DataTable used by the chart to the filtered data set, and draw the
chart. Here's some example code:
var intermediary = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'hidden_table', // the div associated with this ID can be
hidden from the user
view: {
rows: [] // use an empty array so the Table's performance impact is
minimal
}
});
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}
}
});
// create a "ready" event handler for the intermediary that gets the
filtered data and sets up and draws the chart.
google.visualization.events.addListener(intermediary, 'ready', function () {
var dt = intermediary.getDataTable();
var series = {};
var seriesIndex = 0;
for (var i = 1, colCnt = dt.getNumberOfColumns(); i < colCnt; i++) {
var range = dt.getColumnRange(i);
if (range.min == null) {
// then the series has no data
series[seriesIndex] = {
visibleInLegend: false
};
}
// skip over role columns
while (i < colCnt - 1 && dt.getColumnProperty(i + 1, 'role') !=
null) {
i++;
}
seriesIndex++;
}
// set the chart's DataTable and view
chart.setDataTable(dt);
chart.setOption('series', series);
// draw the chart
chart.draw();
});
// bind the control to the intermediary
dashboard.bind(control, intermediary);
dashboard.draw(data);
see a working example here: http://jsfiddle.net/asgallant/om2wv8x2/
On Tuesday, September 16, 2014 11:02:04 PM UTC-4, Adam Larsen wrote:
>
> 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[<span style="color: #000;"
> ...
--
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.
