This worked. Thank you so much.
On Tuesday, February 18, 2014 6:07:02 PM UTC-5, asgallant wrote:
>
> Your code looks mostly good so far. The grouping functions you created
> are not doing anything with the certainty columns, which is why they are
> not showing up in your output. If you want those lines to be dashed, you
> can create calculated columns in a view for the charts, which will take
> care of this for you:
>
> var viewColumns = [0, 1, 2, 3, {
> type: 'boolean',
> role: 'certainty',
> calc: function () {return false;}
> }, 4, {
> type: 'boolean',
> role: 'certainty',
> calc: function () {return false;}
> }];
>
> Then in the ChartWrapper for your chart, set the "view" parameter:
>
> var casesLine = new google.visualization.ChartWrapper({
> 'chartType': 'LineChart',
> 'containerId': 'casesline',
> 'options': {
> 'width':600,
> 'height': 300,
> 'chartArea': {'left': 40, 'top': 15, 'right':7, 'bottom': 7},
> 'vAxis.minValue': 0
> },
> view: {
> columns: viewColumns
> }
> });
>
> With this method, you don't actually need to include the certainty columns
> in the DataTable (unless you want them for some other use).
>
> You want to create the "ready" event handler for the table before the
> table is drawn, or else the table might finish drawing before the handler
> is created, and the handler will never run. Also, since the aggregation is
> the same for casesLine and casesMini, you can create the grouped data once
> and pass it to both ChartWrappers:
>
> google.visualization.events.addListener(fullTable, 'ready',
> function(event) {
> var groupedData =
> google.visualization.data.group(fullTable.getDataTable(), [1], [{
> 'column': 2,
> 'aggregation': google.visualization.data.sum,
> 'type': 'number'
> },{
> 'column': 3,
> 'aggregation': google.visualization.data.sum,
> 'type': 'number'
> },{
> 'column': 4,
> 'aggregation': google.visualization.data.sum,
> 'type': 'number'
> },{
> 'column': 6,
> 'aggregation': google.visualization.data.sum,
> 'type': 'number'
> }]);
>
> casesLine.setDataTable(groupedData);
> casesLine.draw();
>
> casesMini.setDataTable(groupedData);
> casesMini.draw();
> });
>
> See example based on your code here: http://jsfiddle.net/asgallant/u5ESR/
>
> On Tuesday, February 18, 2014 1:03:09 PM UTC-5, Christina Sanabria wrote:
>>
>> Hi All,
>>
>> I'm trying to create a line chart. It should have two lines that are
>> dashed and two lines that are solid. They are aggregations of my data.
>> Also, I have a control that is bound to the linechart so I am using a
>> listener to draw the chart when a selection is made.
>> I am using arrayToDataTable. To create the lines, I set up columns for
>> certainty in my data table, and then I used setColumnProperty to set the
>> role for those columns.
>>
>> Now my question is,
>> a) have I done everything right so far?
>> b) how do I get the linechart to display the "uncertain" lines as dashed?
>> I'm not sure what code I need to use, or where to put it.
>>
>> Many thanks in advance for your help!
>>
>> Here is my code:
>>
>>
>>
>> function drawVisualization() {
>> // Prepare the data
>>
>> var data = google.visualization.arrayToDataTable([
>> ["Program Number","Year","Total","Extended","Nat Median
>> Total","Certainty for Nat Median Total","Nat Median Extended","Certainty
>> for Nat Median Extended"],
>> ["107000","2006",7852,6247,4598,false,1265,false],
>> ["107000","2007",6523,6523,4598,false,1265,false],
>> ["107000","2008",7413,3526,4598,false,1265,false],
>> ["107000","2009",6821,1254,4598,false,1265,false],
>> ["107000","2010",2354,9723,4598,false,1265,false],
>> ["107000","2011",9762,3548,4598,false,1265,false],
>> ["120000","2006",6824,4574,4598,false,1265,false],
>> ["120000","2007",3258,2236,4598,false,1265,false],
>> ["120000","2008",7496,4716,4598,false,1265,false],
>> ["120000","2009",6899,3526,4598,false,1265,false],
>> ["120000","2010",1547,8747,4598,false,1265,false],
>> ["120000","2011",3587,7462,4598,false,1265,false]
>> ]);
>>
>> data.setColumnProperty(5, 'role', 'certainty');
>> data.setColumnProperty(7, 'role', 'certainty');
>>
>> // Define a category picker control for the Program Number column
>> var chooseProgram = new google.visualization.ControlWrapper({
>> 'controlType': 'CategoryFilter',
>> 'containerId': 'chooseprogram',
>> 'options': {
>> 'filterColumnLabel': 'Program Number',
>> 'ui': {
>> 'labelStacking': 'vertical',
>> 'allowTyping': true,
>> 'allowMultiple': false
>> }
>> }
>> });
>>
>> ////////
>> // Define a full table
>> var fullTable = new google.visualization.ChartWrapper({
>> 'chartType': 'Table',
>> 'containerId': 'fulltable',
>> 'options': {'width': '90em'}
>> }
>> );
>>
>> ////////////////////////////
>> // Define a line chart
>> var casesLine = new google.visualization.ChartWrapper({
>> 'chartType': 'LineChart',
>> 'containerId': 'casesline',
>> 'options': {
>> 'width':600,
>> 'height': 300,
>> 'chartArea': {'left': 40, 'top': 15, 'right':7, 'bottom': 7},
>> 'vAxis.minValue': 0
>> }
>> });
>>
>>
>> var casesMini = new google.visualization.ChartWrapper({
>> 'chartType': 'Table',
>> 'containerId': 'casesmini',
>> 'options': {
>> 'width': 600}
>> });
>>
>>
>>
>> // Create a dashboard
>> new
>> google.visualization.Dashboard(document.getElementById('dashboard')).
>>
>> // Establish bindings. The chooseProgram category picker will drive
>> both charts.
>> bind([chooseProgram], [fullTable]).
>>
>> // Draw the entire dashboard.
>> draw(data);
>>
>> //////////////
>> google.visualization.events.addListener(fullTable, 'ready',
>> function(event) {
>> casesLine.setDataTable(google.visualization.data.group(fullTable.getDataTable(),
>>
>> [1], [{
>> 'column': 2,
>> 'aggregation': google.visualization.data.sum,
>> 'type': 'number'
>> },{
>> 'column': 3,
>> 'aggregation': google.visualization.data.sum,
>> 'type': 'number'
>> },{
>> 'column': 4,
>> 'aggregation': google.visualization.data.sum,
>> 'type': 'number'
>> },{
>> 'column': 6,
>> 'aggregation': google.visualization.data.sum,
>> 'type': 'number'
>> }]));
>>
>> casesLine.draw();
>>
>>
>> casesMini.setDataTable(google.visualization.data.group(fullTable.getDataTable(),
>>
>> [1], [{
>> 'column': 2,
>> 'aggregation': google.visualization.data.sum,
>> 'type': 'number'
>> },{
>> 'column': 3,
>> 'aggregation': google.visualization.data.sum,
>> 'type': 'number'
>> },{
>> 'column': 4,
>> 'aggregation': google.visualization.data.sum,
>> 'type': 'number'
>> },{
>> 'column': 6,
>> 'aggregation': google.visualization.data.sum,
>> 'type': 'number'
>> }]));
>>
>> casesMini.draw();
>>
>>
>>
>> });
>> }
>> google.load('visualization', '1', {packages:['corechart', 'controls',
>> 'table'], callback: drawVisualization});
>>
>
--
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/groups/opt_out.
