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.
