I see what you say... Will look into it.
VizGuy On Thu, Nov 13, 2008 at 11:01 PM, DanBo <[EMAIL PROTECTED]> wrote: > > Yes, but not in this case. Earlier posts have already stated that > multiple chart types could not be combined. Ideally the line and area > charts should be one in the same with the diffence being the option to > turn on the drop shadow below the lines. > > What I'm looking for in this case is for the area chart to only show > the shaded area under actual values. > > If we have the series: > null, null, 10, 10, null, null > > The resulting chart should just be a single segment with two points > and the shading should only be directly under the line. The api is > rendering the shading from the orgin as a ramp up to the first value > and then over with no line above it. This would have been correct > if the series was: > 0, null, 10, 10, null, null > > <html> > <head> > <script type="text/javascript" src="http://www.google.com/jsapi";></ > script> > <script type="text/javascript"> > google.load("visualization", "1", {packages:["areachart"]}); > google.setOnLoadCallback(drawChart); > function drawChart() { > var data = new google.visualization.DataTable(); > data.addColumn('string', 'Year'); > data.addColumn('number', 'Sales'); > data.addRows(6); > data.setValue(0, 0, '2004'); > data.setValue(0, 1, null); > data.setValue(1, 0, '2005'); > data.setValue(1, 1, null); > data.setValue(2, 0, '2006'); > data.setValue(2, 1, 10); > data.setValue(3, 0, '2007'); > data.setValue(3, 1, 10); > data.setValue(4, 0, '2008'); > data.setValue(4, 1, null); > data.setValue(5, 0, '2009'); > data.setValue(5, 1, null); > > var chart = new google.visualization.AreaChart > (document.getElementById('chart_div')); > chart.draw(data, {width: 400, height: 240, legend: 'bottom', > title: 'Company Performance'}); > } > </script> > </head> > <body> > <div id="chart_div"></div> > </body> > </html> > > Thanks, > Dan. > > On Nov 13, 1:38 pm, VizGuy <[EMAIL PROTECTED]> wrote: > > I am not sure I understand your request. > > > > What you actually want is a combination of line and area chart. > > The option to create a line chart, but specify per column if you want the > > area below it to be shaded or not. > > > > Is that correct? > > > > VizGuy > > > > > > > > On Thu, Nov 13, 2008 at 9:21 PM, DanBo <[EMAIL PROTECTED]> wrote: > > > > > How do you prevent the color from one series shading back to the orgin > > > for nulls? Trying to create more of a drop shadow as shown in the > > > second graph. > > > > > <html> > > > <head> > > > <script type="text/javascript" src="http://www.google.com/jsapi";></ > > > script> > > > <script type="text/javascript"> > > > google.load("visualization", "1", {packages:["areachart"]}); > > > google.setOnLoadCallback(drawChart); > > > function drawChart() { > > > var data = new google.visualization.DataTable(); > > > data.addColumn('string', 'Month'); > > > data.addColumn('number', 'Actual'); > > > data.addColumn('number', 'Forecast'); > > > data.addColumn('number', 'Total Cap'); > > > data.addRows(7); > > > data.setValue(0,0,'1Q08'); > > > data.setValue(0,1,13); > > > data.setValue(0,2,null); > > > data.setValue(0,3,20); > > > data.setValue(1,0,'2Q08'); > > > data.setValue(1,1,15); > > > data.setValue(1,2,null); > > > data.setValue(1,3,20); > > > data.setValue(2,0,'3Q08'); > > > data.setValue(2,1,18); > > > data.setValue(2,2,null); > > > data.setValue(2,3,20); > > > data.setValue(3,0,'4Q08'); > > > data.setValue(3,1,21); > > > data.setValue(3,2,null); > > > data.setValue(3,3,30); > > > data.setValue(4,0,'1Q09'); > > > data.setValue(4,1,24); > > > data.setValue(4,2,24); > > > data.setValue(4,3,30); > > > data.setValue(5,0,'2Q09'); > > > data.setValue(5,1,null); > > > data.setValue(5,2,27); > > > data.setValue(5,3,30); > > > data.setValue(6,0,'3Q09'); > > > data.setValue(6,1,null); > > > data.setValue(6,2,30); > > > data.setValue(6,3,40); > > > > > var chart = new google.visualization.AreaChart(document.getElementById > > > ('chart_div')); > > > chart.draw(data, {width: 400, height: 240, pointSize: 2,legend: > > > 'bottom', title: 'Company Performance'}); > > > } > > > </script> > > > </head> > > > <body> > > > <div id="chart_div"></div> > > > > > <IMG id=trendsChart alt="Donations over 12 Months" src="http:// > > > chart.apis.google.com/chart?cht=lc&chd=t: > > > > 30,30,40,40,50,40,50,50,-1,-1,-1,-1|-1,-1,-1,-1,-1,-1,-1,50,55,60,64,67| > > > > > > 40,40,60,60,60,60,60,60,70,70,70,70&chs=300x250&chxt=x,y&chls=1,1,0| > > > 2,6,3|2,1,0&chco=0000ff,00ff00,ff0000&chm=B, > > > 4D89F9,0,0,0&chl=J|F|M|M|J|J|A|S|O|N|D&chtt=Monthly > > > Trends&chg=100.0,25.0&chf=c,ls,0,DDDDDD,0.2,FFFFFF,0.2"> > > > > > </body> > > > </html> > > > > > Dan.- Hide quoted text - > > > > - Show quoted text - > > > --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en -~----------~----~----~----~------~----~------~--~---
