This is due to the fact that you have the top-level areaOpacity option set to 0.0. If you remove this option, everything should appear normally.
On Mon Feb 02 2015 at 5:20:52 PM Michael Dorfman <[email protected]> wrote: > Hi Sergey, > > I just tested with the seriesType of "area" and it looks exactly like a > series of type "line". When I try "steppedArea", the mouseover creates a > vertical line going from the x-axis to the series value. When I try > "bars", the series successfully converts to a bar graph series. It's > almost like the area that's supposed to be shaded is transparent. Any > other ideas? > > Thanks, > Mike > > > On Monday, February 2, 2015 at 5:04:12 PM UTC-5, Sergey wrote: > >> HI Mike, >> >> I believe your issue is that the seriesType is case sensitive, so for the >> area series, you need to specify "area", and not "Area". >> >> On Mon Feb 02 2015 at 4:56:12 PM Michael Dorfman <[email protected]> >> wrote: >> > >>> <https://lh4.googleusercontent.com/-4pL02hQKcnQ/VM_yVJGYsgI/AAAAAAAAA7M/GdGUSWJgfJ4/s1600/Capture%2B%281%29.JPG> >>> I'm trying to make a combo chart with four series. Two of them would be >>> of type line and two of them area. The area series don't seem to be shaded >>> (although it has a mouseover vertical line like an area chart). I've tried >>> assigning the series to be type steppedArea and nothing changes. The data >>> is read from an external JSON file. This is the javascript that creates the >>> graph: >>> >>> function wind_history_render(){var >>> wind_history_data=google.visualization.arrayToDataTable(wind_history); >>> var wind_history_options={ >>> backgroundColor:'transparent', >>> legend:{ >>> position:'none' >>> }, >>> chartArea:{ >>> top:"5%", >>> height:"85%" >>> }, >>> axisTitlesPosition:'out', >>> areaOpacity:0.0, >>> isStacked: false, >>> series:{ >>> 0:{ >>> targetAxisIndex:0, >>> color:'red', >>> type:"Area" >>> }, >>> 1:{ >>> targetAxisIndex:0, >>> color:'#a6cee3', >>> type:"Area" >>> }, >>> 2:{ >>> targetAxisIndex:0, >>> color:'#1f78b4', >>> type:"line", >>> lineWidth:1 >>> }, >>> 3:{ >>> targetAxisIndex:1, >>> color:'#6a3d9a', >>> type:"line", >>> pointSize:1, >>> lineWidth:0 >>> } >>> }, >>> vAxes:{ >>> 0:{ >>> title:'Wind Speed/Gust (MPH)', >>> titleTextStyle:{ >>> color:'#1f78b4', >>> italic:false, >>> bold:true, >>> }, >>> axisTitlesPosition:'none', >>> textStyle:{ >>> bold:true >>> }, >>> viewWindow:{ >>> min:0, >>> max:history_max_speed >>> }, >>> gridlines:{ >>> count:(history_max_speed)/10+1 >>> } >>> }, >>> 1:{ >>> title:'Cardinal Direction', >>> titleTextStyle:{ >>> color:'#6a3d9a', >>> italic:false, >>> bold:true >>> }, >>> textStyle:{ >>> bold:true >>> }, >>> direction:-1, >>> viewWindow:{ >>> min:0, >>> max:360 >>> }, >>> gridlines:{ >>> color: 'transparent' >>> }, >>> ticks:[ >>> {v:0,f:'N'}, >>> {v:45,f:'NE'}, >>> {v:90,f:'E'}, >>> {v:135,f:'SE'}, >>> {v:180,f:'S'}, >>> {v:225,f:'SW'}, >>> {v:270,f:'W'}, >>> {v:315,f:'NW'}, >>> {v:360,f:'N'} >>> ] >>> } >>> }, >>> hAxis:{ >>> showTextEvery: 72, >>> title:"Time (EST)", >>> textStyle:{ >>> bold:true >>> } >>> } >>> }; >>> var windHistoryChart=new >>> google.visualization.ComboChart(document.getElementById('windspeed-and-direction')); >>> windHistoryChart.draw(wind_history_data,wind_history_options); >>> >>> google.visualization.events.addListener(windHistoryChart,'select',selectHandler); >>> } >>> >>> >>> This is an excerpt from the JSON. The variable wind_history is set as >>> the contents in the windHistory part of the JSON: >>> >>> "windHistory": [ >>> [ >>> "Day", >>> { >>> "label": "Peak", >>> "type": "number" >>> }, >>> { >>> "role": "tooltip" >>> }, >>> { >>> "label": "Min", >>> "type": "number" >>> }, >>> { >>> "role": "tooltip" >>> }, >>> { >>> "label": "Avg", >>> "type": "number" >>> }, >>> { >>> "role": "tooltip" >>> }, >>> { >>> "label": "Dir", >>> "type": "number" >>> }, >>> { >>> "role": "tooltip" >>> } >>> ], >>> [ >>> "08:35", >>> 9.2, >>> "08:35 EST Peak Wind Speed: 9 mph", >>> null, >>> "08:35 EST Minimum Wind Speed: mph", >>> 8.7, >>> "08:35 EST Average Wind Speed: 9 mph", >>> 275, >>> "08:35 EST W (275°)" >>> ], >>> [ >>> "08:40", >>> 9, >>> "08:40 EST Peak Wind Speed: 9 mph", >>> null, >>> "08:40 EST Minimum Wind Speed: mph", >>> 8.4, >>> "08:40 EST Average Wind Speed: 8 mph", >>> 272, >>> "08:40 EST W (272°)" >>> ], >>> [ >>> "08:45", >>> 8.5, >>> "08:45 EST Peak Wind Speed: 9 mph", >>> null, >>> "08:45 EST Minimum Wind Speed: mph", >>> 8.3, >>> "08:45 EST Average Wind Speed: 8 mph", >>> 269, >>> "08:45 EST W (269°)" >>> ], >>> [ >>> "08:50", >>> 8.5, >>> "08:50 EST Peak Wind Speed: 9 mph", >>> null, >>> "08:50 EST Minimum Wind Speed: mph", >>> 7.9, >>> "08:50 EST Average Wind Speed: 8 mph", >>> 269, >>> "08:50 EST W (269°)" >>> ], >>> [ >>> "08:55", >>> 8.7, >>> "08:55 EST Peak Wind Speed: 9 mph", >>> null, >>> "08:55 EST Minimum Wind Speed: mph", >>> 8, >>> "08:55 EST Average Wind Speed: 8 mph", >>> 263, >>> "08:55 EST W (263°)" >>> ], >>> [ >>> "09:00", >>> 9.7, >>> "09:00 EST Peak Wind Speed: 10 mph", >>> null, >>> "09:00 EST Minimum Wind Speed: mph", >>> 8.7, >>> "09:00 EST Average Wind Speed: 9 mph", >>> 260, >>> "09:00 EST W (260°)" >>> ], >>> >>> >>> I ideally want the "Peak" and the "Min" to either be area graphs or >>> steppedArea. Below is as screenshot of what I'm seeing. >>> >>> >>> <https://lh4.googleusercontent.com/-4pL02hQKcnQ/VM_yVJGYsgI/AAAAAAAAA7M/GdGUSWJgfJ4/s1600/Capture%2B%281%29.JPG> >>> >>> Thanks, >>> Mike >>> >>> >>> -- >>> 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. >>> >> -- > 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. > -- 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.
