Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
104
rated 0 times [  105] [ 1]  / answers: 1 / hits: 23955  / 12 Years ago, wed, april 18, 2012, 12:00:00

I've been unable to find documentation that would let me combine the look of these two charts:



Irregular Time Chart
Line/Time Chart with Gradient Fill



I'm attempting to put a gradient fill under each of 3 lines in an irregular time chart.



Here's as far as I got: http://jsfiddle.net/WNDUH/



Any help would be appreciated!


More From » css

 Answers
3

Try moving the area object into plotOptions then defining the type and fillColor of each series.



EDIT



http://jsfiddle.net/WNDUH/10/



JS:



$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart : {
renderTo : 'container',
type : 'spline',
backgroundColor : {
linearGradient : [0, 0, 0, 400],
stops : [
[0, 'rgb(96, 96, 96)'],
[1, 'rgb(16, 16, 16)']
]
}
},
title : {
text : 'Snow depth in the Vikjafjellet mountain, Norway'
},
subtitle : {
text : 'An example of irregular time data in Highcharts JS'
},
xAxis : {
type : 'datetime',
dateTimeLabelFormats : { // don't display the dummy year
month : '%e. %b',
year : '%b'
}
},
yAxis : {
title : {
text : 'Snow depth (m)'
},
min : 0
},
tooltip : {
formatter : function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%e. %b', this.x) + ': ' + this.y + ' m';
}
},
plotOptions : {
area : {
lineWidth : 1,
marker : {
enabled : false,
states : {
hover : {
enabled : true,
radius : 5
}
}
},
shadow : false,
states : {
hover : {
lineWidth : 1
}
}
}
},
series : [{
name : 'Winter 2007-2008',
type : area,
fillColor : {
linearGradient : [0, 0, 0, 300],
stops : [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(2,0,0,0)']
]
},
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data : [
[Date.UTC(1970, 9, 27), 0],
[Date.UTC(1970, 10, 10), 0.6],
[Date.UTC(1970, 10, 18), 0.7],
[Date.UTC(1970, 11, 2), 0.8],
[Date.UTC(1970, 11, 9), 0.6],
[Date.UTC(1970, 11, 16), 0.6],
[Date.UTC(1970, 11, 28), 0.67],
[Date.UTC(1971, 0, 1), 0.81],
[Date.UTC(1971, 0, 8), 0.78],
[Date.UTC(1971, 0, 12), 0.98],
[Date.UTC(1971, 0, 27), 1.84],
[Date.UTC(1971, 1, 10), 1.80],
[Date.UTC(1971, 1, 18), 1.80],
[Date.UTC(1971, 1, 24), 1.92],
[Date.UTC(1971, 2, 4), 2.49],
[Date.UTC(1971, 2, 11), 2.79],
[Date.UTC(1971, 2, 15), 2.73],
[Date.UTC(1971, 2, 25), 2.61],
[Date.UTC(1971, 3, 2), 2.76],
[Date.UTC(1971, 3, 6), 2.82],
[Date.UTC(1971, 3, 13), 2.8],
[Date.UTC(1971, 4, 3), 2.1],
[Date.UTC(1971, 4, 26), 1.1],
[Date.UTC(1971, 5, 9), 0.25],
[Date.UTC(1971, 5, 12), 0]
]
}, {
name : 'Winter 2008-2009',
type : area,
fillColor : {
linearGradient : [0, 0, 0, 300],
stops : [
[0, Highcharts.getOptions().colors[1]],
[1, 'rgba(2,0,0,0)']
]
},
data : [
[Date.UTC(1970, 9, 18), 0],
[Date.UTC(1970, 9, 26), 0.2],
[Date.UTC(1970, 11, 1), 0.47],
[Date.UTC(1970, 11, 11), 0.55],
[Date.UTC(1970, 11, 25), 1.38],
[Date.UTC(1971, 0, 8), 1.38],
[Date.UTC(1971, 0, 15), 1.38],
[Date.UTC(1971, 1, 1), 1.38],
[Date.UTC(1971, 1, 8), 1.48],
[Date.UTC(1971, 1, 21), 1.5],
[Date.UTC(1971, 2, 12), 1.89],
[Date.UTC(1971, 2, 25), 2.0],
[Date.UTC(1971, 3, 4), 1.94],
[Date.UTC(1971, 3, 9), 1.91],
[Date.UTC(1971, 3, 13), 1.75],
[Date.UTC(1971, 3, 19), 1.6],
[Date.UTC(1971, 4, 25), 0.6],
[Date.UTC(1971, 4, 31), 0.35],
[Date.UTC(1971, 5, 7), 0]
]
}, {
name : 'Winter 2009-2010',
type : area,
fillColor : {
linearGradient : [0, 0, 0, 300],
stops : [
[0, Highcharts.getOptions().colors[2]],
[1, 'rgba(2,0,0,0)']
]
},
data : [
[Date.UTC(1970, 9, 9), 0],
[Date.UTC(1970, 9, 14), 0.15],
[Date.UTC(1970, 10, 28), 0.35],
[Date.UTC(1970, 11, 12), 0.46],
[Date.UTC(1971, 0, 1), 0.59],
[Date.UTC(1971, 0, 24), 0.58],
[Date.UTC(1971, 1, 1), 0.62],
[Date.UTC(1971, 1, 7), 0.65],
[Date.UTC(1971, 1, 23), 0.77],
[Date.UTC(1971, 2, 8), 0.77],
[Date.UTC(1971, 2, 14), 0.79],
[Date.UTC(1971, 2, 24), 0.86],
[Date.UTC(1971, 3, 4), 0.8],
[Date.UTC(1971, 3, 18), 0.94],
[Date.UTC(1971, 3, 24), 0.9],
[Date.UTC(1971, 4, 16), 0.39],
[Date.UTC(1971, 4, 21), 0]
]
}
]
});
});
});


HTML:



<script src=http://code.highcharts.com/highcharts.js></script>
<div id=container style=min-width: 400px; height: 400px; margin: 0 auto></div>

[#86151] Tuesday, April 17, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
elliem

Total Points: 415
Total Questions: 117
Total Answers: 94

Location: American Samoa
Member since Fri, Aug 26, 2022
2 Years ago
;