annotated timeline, multiple series, hide/showdatacolmumn and scale

Brian Quirion

unread,

Apr 26, 2013, 5:06:56 PM4/26/13

to google-visua...@googlegroups.com

I have a chart showing 8 series. I have functionality such that one can hide/unhide any one of these items.

Im also using scaleColumns for two of the series to set left and right scales.
4 of the data series should use one scale and the other 4 should use the other.

Right now I can only give scaleColumns to 2 of the series(3 wouldn't make sense)

If however someone hides the series that happens to be the one that was set using scaleColumns the scale goes away for that side of the chart.

Is there any way that scaleColumns could be associated with a set of data series? Using the largest and adjusting on redraws?

asgallant

unread,

Apr 26, 2013, 5:19:35 PM4/26/13

to google-visua...@googlegroups.com

I suspect that what you want is possible in the AnnotatedTimelinecharts, but it is probably much easier to do in the regular LineCharts (which can be made to behave similarly to ATL's, without the drawbacks that ATL's have), depending on how your existing code is structured. If you can post your code or a link to the page, I can take a look and see what can be done.

Brian Quirion

unread,

Apr 26, 2013, 5:25:50 PM4/26/13

to google-visua...@googlegroups.com

Theres also another issue with this.
All the other lines on this chart that dont have scales associated with them dont align to either of the scales listed.
Heres the code:

<html>
<head>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChart);
var chart;
function drawChart() {
	var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Changes');
data.addColumn('number', 'CFiles');
data.addColumn('number', 'NFiles');
data.addColumn('number', 'DFiles');
data.addColumn('number', 'IFiles');
data.addColumn('number', 'ALines');
data.addColumn('number', 'DLines');
data.addColumn('number', 'CLines');
	data.addRows([
		[new Date(2013, 0, 7), 18, 33, 0, 0, 33, 178, 24, 68],
		[new Date(2013, 0, 14), 19, 48, 0, 0, 20, 573, 93, 197],
		[new Date(2013, 0, 21), 13, 36, 1, 0, 11, 440, 32, 97],
		[new Date(2013, 0, 28), 31, 66, 0, 0, 38, 723, 37, 178],
		[new Date(2013, 1, 4), 28, 86, 10, 4, 47, 625, 77, 212],
		[new Date(2013, 1, 11), 27, 75, 0, 0, 34, 538, 104, 243],
		[new Date(2013, 1, 18), 14, 61, 0, 0, 4, 220, 8, 300],
		[new Date(2013, 1, 25), 10, 42, 0, 0, 4, 446, 32, 126],
		[new Date(2013, 2, 11), 6, 7, 0, 0, 8, 55, 28, 32],
		[new Date(2013, 2, 18), 20, 13, 2, 0, 46, 101, 9, 36],
		[new Date(2013, 2, 25), 35, 44, 0, 0, 33, 423, 108, 121],
		[new Date(2013, 3, 1), 22, 29, 0, 0, 13, 269, 52, 132],
		[new Date(2013, 3, 8), 11, 4, 0, 0, 13, 0, 5, 3],
		[new Date(2013, 3, 15), 20, 148, 16, 8, 3, 3132, 1122, 442],
		[new Date(2013, 3, 22), 17, 23, 0, 0, 19, 145, 36, 67]]);
        chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
        chart.draw(data, {displayAnnotations: true, 
			'displayRangeSelector': true, 
			min: 0,
			legendPosition: 'newRow',
			scaleColumns: [1, 5],
			scaleType: 'allfixed',
			'allowRedraw': true,
			displayExactValues: true});

      }
      function showhide(num, name) {

		if (document.getElementById(name).checked) {
			chart.showDataColumns(num);
		} else {
			chart.hideDataColumns(num);
		}
      }
    </script>
  </head>
  <body>
    <p>
<form method="post" action="/~foo/churn.pl" enctype="multipart/form-data">

<table border="0">
<tbody>
<tr><th>Codeline</th><th>Period</th><th>N Periods</th><th>End Date</th><th>type</th><th>team</th><td></td></tr>
<tr><td><select name="codeline" >
<option value="1">Codeline1</option>
<option value="2">Codeline2</option>
<option value="3">Codeline3</option>
<option value="4">Codeline4</option>
<option value="5">Codeline5</option>
<option value="6">Codeline6</option>
<option value="7">Codeline7</option>
</select></td><td><table><tr><label><input type="radio" name="period" value="Day" checked="checked" />Day</label> <label><input type="radio" name="period" value="Week" />Week</label> <label><input type="radio" name="period" value="Month" />Month</label></tr></table></td><td><input type="text" name="nperiods" value="16" size="4" maxlength="4" /></td><td><input type="text" name="today" value="2013/04/26" /></td><td><input type="text" name="subtype" value="all" /></td><td><input type="text" name="subteam" value="141" /></td><td><input type="submit" name="submit" value="View Churn" /></td></tr>
</tbody>
</table>
<div><input type="hidden" name=".cgifields" value="period"  /></div>
</form><div id='chart_div' style='width: 600px; height: 400px;'></div>
<br><form method="post" action="/~quirion/burtsee/churn.pl" enctype="multipart/form-data">

<table border="0">
<tbody>
<tr><td><label><input type="checkbox" name="Changes" value="ON" checked="checked" onclick="showhide(0, &quot;Changes&quot;)" id="Changes" />Changes</label></td><td><label><input type="checkbox" name="CFiles" value="ON" checked="checked" onclick="showhide(1, &quot;CFiles&quot;)" id="CFiles" />CFiles</label></td><td><label><input type="checkbox" name="NFiles" value="ON" checked="checked" onclick="showhide(2, &quot;NFiles&quot;)" id="NFiles" />NFiles</label></td><td><label><input type="checkbox" name="DFiles" value="ON" checked="checked" onclick="showhide(3, &quot;DFiles&quot;)" id="DFiles" />DFiles</label></td><td><label><input type="checkbox" name="IFiles" value="ON" checked="checked" onclick="showhide(4, &quot;IFiles&quot;)" id="IFiles" />IFiles</label></td><td><label><input type="checkbox" name="ALines" value="ON" checked="checked" onclick="showhide(5, &quot;ALines&quot;)" id="ALines" />ALines</label></td><td><label><input type="checkbox" name="DLines" value="ON" checked="checked" onclick="showhide(6, &quot;DLines&quot;)" id="DLines" />DLines</label></td><td><label><input type="checkbox" name="CLines" value="ON" checked="checked" onclick="showhide(7, &quot;CLines&quot;)" id="CLines" />CLines</label></td></tr>
</tbody>
</table>
<div><input type="hidden" name=".cgifields" value="CLines"  /><input type="hidden" name=".cgifields" value="DFiles"  /><input type="hidden" name=".cgifields" value="IFiles"  /><input type="hidden" name=".cgifields" value="ALines"  /><input type="hidden" name=".cgifields" value="NFiles"  /><input type="hidden" name=".cgifields" value="Changes"  /><input type="hidden" name=".cgifields" value="CFiles"  /><input type="hidden" name=".cgifields" value="DLines"  /></div>
</form></body></html>

asgallant

unread,

Apr 27, 2013, 12:50:27 AM4/27/13

to google-visua...@googlegroups.com

Here's an example conversion to LineCharts: http://jsfiddle.net/asgallant/RF84x/. Note that I used jQuery in here to handle some cross-browser compatibility issues with IE 7 and 8; this can be written with vanilla javascript if you are willing to either ignore non-compliant browsers or use separate code paths to handle them.

Brian Quirion

unread,

Apr 27, 2013, 2:03:50 PM4/27/13

to google-visua...@googlegroups.com

That will do it. Thanks a ton. Ah and this autochanges scale as well when using the range selector.

Are you folks moving away from annotated timelines more? :)

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/hrR62FYRI3Y/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.

asgallant

unread,

Apr 27, 2013, 6:03:05 PM4/27/13

to google-visua...@googlegroups.com

The ATL charts are old, and I doubt that the dev team will be doing any updates to them. The charts in the "corechart" package (and maybe a few others) are the way to go moving forward.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

Reply all

Reply to author

Forward