Den onsdag den 26. juni 2013 skrev < [email protected]>:
> Today's Topic Summary > > Group: http://groups.google.com/group/google-visualization-api/topics > > - New Instance (or) save Chart > reference?<thismessage:/#13f8257146b073b0_group_thread_0>[3 Updates] > - Applying Chart Control only to specific > rows<thismessage:/#13f8257146b073b0_group_thread_1>[1 Update] > - What Next <thismessage:/#13f8257146b073b0_group_thread_2> [2 Updates] > - Pie Chart 'Other' > Category<thismessage:/#13f8257146b073b0_group_thread_3>[2 Updates] > - Query Date <thismessage:/#13f8257146b073b0_group_thread_4> [4 > Updates] > - Stacked BarChart with Date > HAxis<thismessage:/#13f8257146b073b0_group_thread_5>[4 Updates] > - How to make a SERIES line dashed in Google Line > Chart?<thismessage:/#13f8257146b073b0_group_thread_6>[4 Updates] > - Pie animation <thismessage:/#13f8257146b073b0_group_thread_7> [3 > Updates] > - How can i set the region color for each state in United > States?<thismessage:/#13f8257146b073b0_group_thread_8>[2 Updates] > > New Instance (or) save Chart > reference?<http://groups.google.com/group/google-visualization-api/t/5b1a98ebcb36a4ea> > > Benin Yesu <[email protected]> Jun 26 12:31PM -0700 > > Hi, > > I am developing a webpage consist of ~25 google charts, not all 25 > charts > will be displayed together, but based on user selection (without > postback) > through menu, e.g. 5 charts for each menu. Now should I create a new > instance of the chart everytime? or can I have all the grapghs in an > Array > and refer them back when required? > > Thanks, > Jesu Benin. > > > > > asgallant <[email protected]> Jun 26 12:53PM -0700 > > If you want to save state information while a chart is not displayed, > then > it is most convenient to save the chart objects in a data structure > (like > an array) rather than create new ones each time; but it is generally > more > memory intensive than creating and destroying chart objects on the > fly. > There is no single answer to the "should I" question. In general, I > would > suggest pursuing whichever path fits all of your needs and is easiest > to > code. If that causes performance issues for users, then tweak until it > works right. > > On Wednesday, June 26, 2013 3:31:08 PM UTC-4, Benin Yesu wrote: > > > > > Benin Yesu <[email protected]> Jun 26 01:04PM -0700 > > Thanks for the reply. > Is recreating new instance every time more costly? how do we compare > the > performance between having reference and using new? e.g. (1:10)? any > idea > in general? > > Thanks, > Jesu Benin. > On Wednesday, June 26, 2013 3:53:42 PM UTC-4, asgallant wrote: > > > > > Applying Chart Control only to specific > rows<http://groups.google.com/group/google-visualization-api/t/d23a7c85a3a53a1b> > > Ervin Puskar <[email protected]> Jun 26 12:58PM -0700 > > Hi, > > I am building a simple dashboard. > > Using the ChartRangeFilter to specify a range of dates, I want the sum > of > these rows to display as one stacked bar. > On the same chart I want to display 2 other stacked bars that are NOT > in > that range of dates. > Below is the relevant code that I have working but this only displays > the > single stacked bar that is the sum of rows. > > I do not know how to add the other two, where the chartrangefilter > will not > affect them. > > > Please help. > > > > //------------------------------------- > var dashboard = new google.visualization.Dashboard( > document.getElementById('dash')); > > var data = new google.visualization.DataTable(); > data.addColumn('date', 'Date'); > data.addColumn('number', 'E'); > data.addColumn('number', 'D'); > data.addColumn('number', 'O'); > //add a bunch of data > > //add two rows that are 1 year ahead and 1 year behind all the other > data > //these two rows should not be affected by the chart range filter > > data.sort([{column: 0}]); > //this intermediate control would be hidden so that the user can only > manipulate the date ranges of the > var intermediate_control = new google.visualization.ControlWrapper({ > 'controlType': 'ChartRangeFilter', > 'containerId': 'hidden_div', > 'options': { > // Filter by the date axis. > 'filterColumnIndex': 0, > 'ui': { > 'chartType': 'ComboChart', > 'chartOptions': { > 'chartArea': {'width': '90%'}, > 'hAxis': {'baselineColor': 'none'}, > 'seriesType': 'bars', > 'isStacked': true > }, > // Display a single series that shows the closing value of the > sales. > // Thus, this view has two columns: the date (axis) and the stock > value (line series). > 'chartView': { > 'columns': [0,1,2,3], > }, > // 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000 > 'minRangeSize': 86400000 > } > }, > // Initial range: 2012-02-09 to 2012-03-20. > 'state': {'range': {'start': new Date(today.getFullYear() - 1,0,1), > 'end': new Date(today.getFullYear() - 1, 12,31)}} > > }); > var control = new google.visualization.ControlWrapper({ > 'controlType': 'ChartRangeFilter', > 'containerId': 'control', > 'options': { > // Filter by the date axis. > 'filterColumnIndex': 0, > 'rows' : [1], > 'ui': { > 'chartType': 'ComboChart', > 'chartOptions': { > 'chartArea': {'width': '90%'}, > 'hAxis': {'baselineColor': 'none'}, > 'seriesType': 'bars', > 'isStacked': true > }, > // Display a single series that shows the closing value of the > sales. > // Thus, this view has two columns: the date (axis) and the stock > value (line series). > 'chartView': { > 'columns': [0, > { > 'calc' : function(dT, r) { > var res = 0; > for (var i = 0; i < r; i++){ > res += dT.getValue(i,1); > } > return res; > }, > 'type' : 'number', > 'label' : 'E' > }, > { > 'calc' : function(dT, r) { > var res = 0; > for (var i = 0; i < r; i++){ > res += dT.getValue(i,2); > } > return res; > }, > 'type' : 'number', > 'label' : 'D' > }, > { > 'calc' : function(dT, r) { > var res = 0; > for (var i = 0; i < r; i++){ > res += dT.getValue(i,3); > } > return res; > }, > 'type' : 'number', > 'label' : 'O' > } > ], > }, > // 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000 > 'minRangeSize': 86400000 > } > }, > // Initial range: 2012-02-09 to 2012-03-20. > 'state': {'range': {'start': new Date(today.getFullYear() - 1,0,1), > 'end': new Date(today.getFullYear() - 1, today.getMonth(), > today.getDate())}} > }); > > var chart = new google.visualization.ChartWrapper({ > 'chartType': 'ComboChart', > 'containerId': 'chart', > 'options': { > // Use the same chart area width as the control for axis alignment. > 'chartArea': {'height': '80%', 'width': '70%'}, > 'hAxis': {'slantedText': false}, > 'vAxis': {'title' : 'Sales'}, > 'seriesType': 'bars', > 'isStacked': true > }, > // Convert the first column from 'date' to 'string'. > 'view': { > 'columns': [ > { > 'calc': function(dataTable, rowIndex) { > return dataTable.getFormattedValue(rowIndex, 0) + ' - ' + > dataTable.getFormattedValue(dataTable.getNumberOfRows() - 1, > 0);//'Last > Year YTD'; > }, > 'type': 'string' > }, > { > 'calc' : function(dT, r) { > var res = 0; > for (var i = 0; i < dT.getNumberOfRows(); i++){ > res += dT.getValue(i,1); > } > return res; > }, > 'type' : 'number', > 'label' : 'E' > }, > { > 'calc' : function(dT, r) { > var res = 0; > for (var i = 0; i < dT.getNumberOfRows(); i++){ > res += dT.getValue(i,2); > } > return res; > }, > 'type' : 'number', > 'label' : 'D' > }, > { > 'calc' : function(dT, r) { > var res = 0; > for (var i = 0; i < dT.getNumberOfRows(); i++){ > res += dT.getValue(i,3); > } > return res; > }, > 'type' : 'number', > 'label' : 'O' > }, > ], > 'rows' : [0] > } > }); > > > dashboard.bind(intermediate_control, control); > dashboard.bind(control, chart); > > dashboard.draw(data); > console.log(data); > console.log(control); > > > > What > Next<http://groups.google.com/group/google-visualization-api/t/9bedc4a71f4a8851> > > Carl Stone <[email protected]> Jun 26 11:19AM -0700 > > For the past few days I've been using Google playground to create an > auto > updating chart that I've been receiving Help< > > https://groups.google.com/forum/#!topic/google-visualization-api/QmOgyp_8UMc> > which > I'm grateful for > > Ideally I'd like to publish to the company Google intra-site but what > would > be the best method to do this. Is this a script I can embed into a > HTML, > treat it like a normal Java Script? > > Wondering what options I've got? > > Thanks > > Carl > > > > > asgallant <[email protected]> Jun 26 11:37AM -0700 > > Everything is javascript based, so you just need to add the API loader > and > your chart script to the HTML, along with the div(s) for the chart(s). > > On Wednesday, June 26, 2013 2:19:13 PM UTC-4, Carl Stone wrote: > > > > Pie Chart 'Other' > Category<http://groups.google.com/group/google-visualization-api/t/df9a6c7a1b3f9636> > > Jared Nielsen <[email protected]> Jun 26 10:57AM -0700 > > My pie chart has an 'Other' category. Where is this coming from, and > how do > I fix it? > > < > > https://lh3.googleusercontent.com/-lH03UhMpKNw/UcsrkXzOpLI/AAAAAAAAAK0/_vY_zXBHa5Q/s1600/other+category.png > > > > > > > Sergey Grabkovsky <[email protected]> Jun 26 02:01PM -0400 > > The 'Other' category is a slice that factors in all the slices that > are too > small to display. You can change the minimum size that a slice needs > to be > in order to be displayed on its own by modifying the > 'sliceVisibilityThreshold' option. > > - Sergey > > > > > > Query > Date<http://groups.google.com/group/google-visualization-api/t/4263a0ca9ffc50c7> > > asgallant <[email protected]> Jun 26 08:56AM -0700 > > Where is the exception thrown? What error message do you get? > > On Tuesday, June 25, 2013 5:41:15 PM UTC-4, Carl Stone wrote: > > > > > Carl Stone <[email protected]> Jun 26 09:53AM -0700 > > Sorry I don't pretend to a programmer. I dissected your code a little, > so I > could understand it a bit more. Also changed the final query a little > and > this is what I came up with. > > var d=new Date(); > > here'); > > > // Apply query language. > > query.setQuery("select A,C where A >= datetime '" + dateString + "' > "); > > > This is the error I'm now getting > > < > > https://lh4.googleusercontent.com/-EWxVJXSpih4/Ucsb--jFBTI/AAAAAAAAAiU/ZRgplnlkNao/s1600/sshot.png > > > > > > > asgallant <[email protected]> Jun 26 09:57AM -0700 > > *facepalm* I see the problem. Hour, minute, second, and millisecond > are > all pulled from the date wrong. Replace them with these: > > > var d=new Date(); > d.setDate(d.getDate() - 1); > > var year = d.getFullYear(); > var month = d.getMonth() + 1; > var day = d.getDate(); > var hour = d.getHours(); > var minute = d.getMinutes(); > var second = d.getSeconds(); > var millisecond = d.getMilliseconds(); > > if (month.toString().length == 1) { > month = '0' + month; > } > if (day.toString().length == 1) { > day = '0' + day; > } > if (hour.toString().length == 1) { > hour = '0' + hour; > } > if (minute.toString().length == 1) { > minute = '0' + minute; > } > if (second.toString().length == 1) { > second = '0' + second; > } > while(millisecond.toString().length < 3) { > millisecond = '0' + millisecond; > } > > var dateString = year + '-' + month + '-' + day + ' ' + hour + ':' + > minute > + ':' + minute+ '.' + millisecond; > > On Wednesday, June 26, 2013 12:53:24 PM UTC-4, Carl Stone wrote: > > > > > Carl Stone <[email protected]> Jun 26 10:10AM -0700 > > I just spotted it myself, but I cheated on the Milliseconds cause I > didn't > know the code > > Its now working and thanks for your help, certainly been a learning > curve! > > var d=new Date(); > > > > Stacked BarChart with Date > HAxis<http://groups.google.com/group/google-visualization-api/t/a2ced8c20a502f31> > > Jeremiah Mitchell <[email protected]> Jun 26 08:31AM -0700 > > All - > > I'm trying to create a gantt type chart that uses dates but the hAxis > is > going backwards to 1950 and forwards to 2125. > > Here is the sample: > > function drawVisualization() { > var data = new google.visualization.DataTable(); > data.addColumn('string', 'Name'); > data.addColumn('date', 'start'); > data.addColumn('date', '1'); > data.addColumn('date', '2'); > data.addColumn('date', '3'); > data.addColumn('date', '4'); > > data.addRow(['First', new Date(2013, 1, 1), new Date(2013, 2, 1), new > Date > (2013, 4, 1), null, null]); > data.addRow(['Second', new Date(2013, 2, 1), null, null, new > Date(2013, 2 > , 1), new Date(2013, 9, 1)]); > > new > google.visualization.BarChart(document.getElementById('visualization') > ). > draw(data, > {title:"Example broken XAxis", > width:1600, height:400, > vAxis: {title: "Project"}, > > > -- > 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/<https://groups.google.com/groups/opt_out> -- 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.
