<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.
