I'm using the Google Charts API and am trying to make a combo chart with four series. Two of them would be of type line and two of them area. The area chart doesn'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.
[apparently I can't post pictures because I don't have enough reputation yet, but a link to this screenshot can be found here:https://drive.google.com/file/d/0B54o6IsW1K9FZlVsanc5RFJXRGM/view?usp=sharing]
