Flot dynamically show/hide xaxis label based on data

Flot dynamically show/hide xaxis label based on data - javascript

I need help about the xaxis ticks label..again..I am stuck with this problem.
I want to hide the xaxis ticklabel and bar when data is 0.
$(function() {
var statement = [
[gd(2018, 6, 1), 0],
[gd(2018, 6, 2), 2000000],
[gd(2018, 6, 3), 240000000],
[gd(2018, 6, 4), 260000000],
[gd(2018, 6, 5), 280000000],
[gd(2018, 6, 6), 300000000],
[gd(2018, 6, 7), 320000000],
[gd(2018, 6, 8), 0],
[gd(2018, 6, 9), 0],
[gd(2018, 6, 10), 0],
[gd(2018, 6, 11), 0],
[gd(2018, 6, 12), 0],
[gd(2018, 6, 13), 0],
[gd(2018, 6, 14), 0],
[gd(2018, 6, 15), 0],
[gd(2018, 6, 16), 0],
[gd(2018, 6, 17), 0],
[gd(2018, 6, 18), 0],
[gd(2018, 6, 19), 0],
[gd(2018, 6, 20), 0],
[gd(2018, 6, 21), 0],
[gd(2018, 6, 22), 0],
[gd(2018, 6, 23), 0],
[gd(2018, 6, 24), 0],
[gd(2018, 6, 25), 0],
[gd(2018, 6, 26), 0],
[gd(2018, 6, 27), 0],
[gd(2018, 6, 28), 0],
[gd(2018, 6, 29), 0],
[gd(2018, 6, 30), 0]
];
var dataset = [{
label: "Electricity Consumption",
data: statement,
color: "#ffa500",
bars: {
show: true,
align: "center",
barWidth: 24 * 60 * 60 * 600,
lineWidth: 1
}
}];
var options = {
xaxis: {
mode: "time",
tickSize: [1, "day"],
timeformat: "%d %b",
tickLength: 0,
rotateTicks: 135,
axisLabel: "",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 8,
axisLabelFontFamily: "Verdana, Arial",
axisLabelPadding: 5,
color: "black"
},
yaxes: [{
position: "left",
color: "black",
axisLabel: "Usage",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: "Verdana, Arial",
axisLabelPadding: 3,
tickDecimals: 0,
tickFormatter: function numberWithCommas(x) {
return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
}
}],
legend: {
container: $("#legendContainer"),
noColumns: 2,
labelBoxBorderColor: "#000000",
position: "nw"
},
grid: {
hoverable: true,
borderWidth: 1,
backgroundColor: {
colors: ["#ffffff", "#EDF5FF"]
}
}
};
$.plot($("#placeholder"), dataset, options);
function gd(year, month, day) {
console.log(Date.UTC(year, month - 1, day), new Date(Date.UTC(year, month - 1, day)));
return Date.UTC(year, month - 1, day);
}
});
This is the corresponding jfiddle (courtesy of Raidri).
I want to hide label from July 8-31 since usage is 0 but still show July 1.
Is there a way to do this? I only this setting
xaxis: {show:false}

To show only some tick labels you can use a conditional tickFormatter function for the x axis, for example
tickFormatter: function (tickValue, axis) {
// looking for datapoint at this tick
var value = dataset[0].data.find(dp => dp[0] == tickValue);
if ((tickValue == dataset[0].data[0][0]) || (value && value[1] > 0.0)) {
// first tick on the axis or a tick where the value is greater zero
var tickDate = new Date(tickValue);
// manually setting the tick format
return (tickDate.getDate() < 10 ? ('0' + tickDate.getDate()) : tickDate.getDate()) + '<br />' + monthNames[tickDate.getMonth()];
}
else {
return '';
}
}
See this updated fiddle for the full example.

Related

Highcharts: Selecting single series from plot with multiple series

I have a plot that is similar to the one shown in this JS Fiddle:
http://jsfiddle.net/r76kmsfr/
$(function () {
$('#container').highcharts({
legend: {
align: "left"
},
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: "Winter 2012-2013",
// 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, 21), 0],
[Date.UTC(1970, 10, 4), 0.28],
[Date.UTC(1970, 10, 9), 0.25],
[Date.UTC(1970, 10, 27), 0.2],
[Date.UTC(1970, 11, 2), 0.28],
[Date.UTC(1970, 11, 26), 0.28],
[Date.UTC(1970, 11, 29), 0.47],
[Date.UTC(1971, 0, 11), 0.79],
[Date.UTC(1971, 0, 26), 0.72],
[Date.UTC(1971, 1, 3), 1.02],
[Date.UTC(1971, 1, 11), 1.12],
[Date.UTC(1971, 1, 25), 1.2],
[Date.UTC(1971, 2, 11), 1.18],
[Date.UTC(1971, 3, 11), 1.19],
[Date.UTC(1971, 4, 1), 1.85],
[Date.UTC(1971, 4, 5), 2.22],
[Date.UTC(1971, 4, 19), 1.15],
[Date.UTC(1971, 5, 3), 0]
]
}, {
name: "Winter 2013-2014",
data: [
[Date.UTC(1970, 9, 29), 0],
[Date.UTC(1970, 10, 9), 0.4],
[Date.UTC(1970, 11, 1), 0.25],
[Date.UTC(1971, 0, 1), 1.66],
[Date.UTC(1971, 0, 10), 1.8],
[Date.UTC(1971, 1, 19), 1.76],
[Date.UTC(1971, 2, 25), 2.62],
[Date.UTC(1971, 3, 19), 2.41],
[Date.UTC(1971, 3, 30), 2.05],
[Date.UTC(1971, 4, 14), 1.7],
[Date.UTC(1971, 4, 24), 1.1],
[Date.UTC(1971, 5, 10), 0]
]
}, {
name: "Winter 2014-2015",
data: [
[Date.UTC(1970, 10, 25), 0],
[Date.UTC(1970, 11, 6), 0.25],
[Date.UTC(1970, 11, 20), 1.41],
[Date.UTC(1970, 11, 25), 1.64],
[Date.UTC(1971, 0, 4), 1.6],
[Date.UTC(1971, 0, 17), 2.55],
[Date.UTC(1971, 0, 24), 2.62],
[Date.UTC(1971, 1, 4), 2.5],
[Date.UTC(1971, 1, 14), 2.42],
[Date.UTC(1971, 2, 6), 2.74],
[Date.UTC(1971, 2, 14), 2.62],
[Date.UTC(1971, 2, 24), 2.6],
[Date.UTC(1971, 3, 2), 2.81],
[Date.UTC(1971, 3, 12), 2.63],
[Date.UTC(1971, 3, 28), 2.77],
[Date.UTC(1971, 4, 5), 2.68],
[Date.UTC(1971, 4, 10), 2.56],
[Date.UTC(1971, 4, 15), 2.39],
[Date.UTC(1971, 4, 20), 2.3],
[Date.UTC(1971, 5, 5), 2],
[Date.UTC(1971, 5, 10), 1.85],
[Date.UTC(1971, 5, 15), 1.49],
[Date.UTC(1971, 5, 23), 1.08]
]
}]
});
});
What I would like to do is allow a user to click on one of these series, which would hide the other series on the plot. How do I do that?
Example: Clicking on the black series would hide the green and blue series.

You can try implement something like this
series:{
events: {
legendItemClick: function (e) {
var seriesArr=$('#container').highcharts().series;
var visible = this.visible;
var index = this.index;
for(var i=0; i<seriesArr.length;i++)
{
if(i!=index)
{
seriesArr[i].setVisible(false, false);
}
}
this.visible=false;
}
}
}
here the fiddle http://jsfiddle.net/jgonzalez315/4jsgo8c9/5/
I hope this help!

What you need to do is hide all the series in click and show show the one that is clicked on. I have included the code you need below and here is the fiddle . This way you show the graph the user clicks on. In addition you could have a 'show all' button, which redraws the whole chart. Hope this helps.
plotOptions: {
spline: {
marker: {
enabled: true
}
},
series: {
cursor: 'pointer',
events: {
click: function (event) {
var chart = $('#container').highcharts();
$(chart.series).each(function(){
this.setVisible(false, false);
});
this.show();
}
}
}
},

Area spline chart using Highchart

I'm using Jquery Flot to plot my charts, and now I want to pass a specific one to Highchart.
This is my Chart using Jquery Flot
var data1 = [
[gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
[gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 15]];
var data2 = [
[gd(2013, 1, 1), 3], [gd(2013, 2, 1), 5], [gd(2013, 3, 1), 3], [gd(2013, 4, 1), 11],
[gd(2013, 5, 5), 4], [gd(2013, 6, 1), 13], [gd(2013, 7, 1), 9], [gd(2013, 8, 1), 5],
[gd(2013, 9, 1), 2], [gd(2013, 10, 1), 3], [gd(2013, 11, 1), 2], [gd(2013, 12, 1), 1]];
var data2014 = {
label: "Receitas 2014",
data: data1,
xaxis: 1
};
var data2013 = {
label: "Receitas 2013",
data: data2,
xaxis: 2
};
$("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
data2014, data2013
],
{
series: {
lines: {
show: false,
fill: true
},
splines: {
show: true,
tension: 0.4,
lineWidth: 1,
fill: 0.4
},
points: {
radius: 2,
show: true
},
shadowSize: 2
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#d5d5d5",
borderWidth: 1,
color: '#d5d5d5'
},
colors: ["#1ab394", "#464f88"],
xaxes: [{
mode: "time",
tickSize: [1, "month"],
tickLength: null,
colors: ["#838383", "#838383"],
timeformat: "%b",
max: (new Date("2014/12/1")).getTime()
}, {
ticks: false
}],
yaxis: {
ticks: 4
},
legend: {
backgroundOpacity: 0.5,
noColumns: 1,
position: "nw",
color: "#000000 !important",
}
}
);
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}
I'm trying convert this chart, to a highchart but I'm a little bit confusing because in highchart a spline is a type while in Jquery Flot its an option.
How far I did
var data1 = [
[gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
[gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 15]];
var data2 = [
[gd(2013, 1, 1), 3], [gd(2013, 2, 1), 5], [gd(2013, 3, 1), 3], [gd(2013, 4, 1), 11],
[gd(2013, 5, 5), 4], [gd(2013, 6, 1), 13], [gd(2013, 7, 1), 9], [gd(2013, 8, 1), 5],
[gd(2013, 9, 1), 2], [gd(2013, 10, 1), 3], [gd(2013, 11, 1), 2], [gd(2013, 12, 1), 1]];
$('#flot-dashboard-chart').highcharts('StockChart', {
rangeSelector: {
inputEnabled: $('#flot-dashboard-chart').width() > 480,
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
colors: ['#1ab394'],
plotOptions: {
area: {
color: '#1ab394',
fillColor: '#1ab394'
}
},
series: [{
name: 'AAPL Stock Price',
data: data1,
type: 'areaspline',
threshold: null,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
}]
});
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}
But is very different the result. I'm reading the API for more information, but some options are in different places.
Can someone help me plot a graph using highchart ?
UPDATE
I'm getting close
CODE
$(function () {
var data1 = [
[gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
[gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 15]];
var data2 = [
[gd(2013, 1, 1), 3], [gd(2013, 2, 1), 5], [gd(2013, 3, 1), 3], [gd(2013, 4, 1), 11],
[gd(2013, 5, 5), 4], [gd(2013, 6, 1), 13], [gd(2013, 7, 1), 9], [gd(2013, 8, 1), 5],
[gd(2013, 9, 1), 2], [gd(2013, 10, 1), 3], [gd(2013, 11, 1), 2], [gd(2013, 12, 1), 1]];
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Average fruit consumption during one week'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
],
plotBands: [{ // visualize the weekend
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
colors: ['#1ab394', '#464f88'],
plotOptions: {
areaspline: {
fillOpacity: 0.4
}
},
series: [{
name: 'Receitas 2014',
data: [[1, 4], [2, 8], [3, 4], [4, 10], [5, 4], [6, 16], [7, 15]]
}, {
name: 'Receitas 2013',
data: [[1, 3], [2, 5], [3, 3], [4, 11], [5, 4], [6, 13], [7, 9], [8, 5], [9, 2], [10, 3], [11, 2], [12, 1]]
}]
});
});
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}

Why don't you just set the categories of the xAxis to an array containing the months as follows :
xAxis: {
categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
}
And then set your data using simple arrays :
var data1 = [4,8,4,10,4,16,15];
var data2 = [3,5,3,11,4,13,9,5,2,3,2,1];
Maybe that's not what you need, but take a look at the result and tell me what you think: http://jsfiddle.net/yohanrobert/T3Dpf/1/
EDIT
If you still want to use dates within your data arrays, what you could do is to create a xAxis with type set to 'datetime' for the first series like this:
{
type: 'datetime',
dateTimeLabelFormats: {
month: '%b' // Display months as labels ( 'Jan', 'Feb', ...)
},
showLastLabel: false, // If not set to false, displays 'Jan' at the end of the xAxis
tickInterval: 24 * 3600 * 1000 * 30.4 // Displays tick for each month
}
and then add one hidden xAxis for each new series:
{
type: 'datetime',
labels: {
enabled: false // Remove the label
},
tickWidth: 0, // Remove the ticks
lineWidth: 0 // Remove the axis line
}
Finally, you will need to set the extremes for the these series to go from January to December.
Here is an example with three series: http://jsfiddle.net/yohanrobert/T3Dpf/3/
This might not be the easiest way though.

Highcharts - show every month on datetime x-axis when the parent container is small

I have a highcharts graph with 2 lines. The x-axis is type datetime.
I want a labeled tick in the x-axis for every month in the overall date range: Jul '11, Aug '11, Sep '11, etc.
The only way all of the monthly ticks will display is if I set my parent container to be extremely wide. However, my production layout only has a container of 695px.
How do I force all of the ticks to display when I'm at the smaller width?
I have a fiddle here
Here is my code:
var chart;
var lineIndex = 0,splineIndex=0;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy'
},
exporting: { enabled: false },
title: {
text: ''
},
legend:{
itemStyle: {
fontSize: '13px',
fontFamily: 'Arial,sans-serif'
}
},
xAxis: {
type: 'datetime',
min: Date.UTC(2011, 4, 31),
max: Date.UTC(2012, 11, 6),
labels: {
step: 1,
style: {
fontSize: '13px',
fontFamily: 'Arial,sans-serif'
}
},
dateTimeLabelFormats: { // don't display the dummy year
month: '%b \'%y',
year: '%Y'
}
},
yAxis: [{ // Primary yAxis
labels: {
style: {
fontSize: '13px',
fontFamily: 'Arial,sans-serif'
},
formatter: function() {
return '$' + Highcharts.numberFormat(this.value,2,'.',",");
}
},
title: {
text: '',
style: {
color: '#89A54E'
},
},
max:.85,
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: ''
},
min:9000,
max:12000,
labels: {
style: {
fontSize: '13px',
fontFamily: 'Arial,sans-serif'
},
formatter: function() {
return '$' + Highcharts.numberFormat(this.value,0,".",",");
}
}
}],
tooltip: {
enabled: false
},
plotOptions: {
line: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function() {
if(this.y == 10000) {
return '<div class="tweak">$' + Highcharts.numberFormat(Math.round(this.y),0,".",",") + '</div>';
} else if (this.y > 5) {
return '<div class="tweak-0">$' + Highcharts.numberFormat(Math.round(this.y),0,".",",") + '</div>';
} else if (this.x == Date.UTC(2011, 11, 1)) { // grab values for special dates and assign tweak classes so we can adjust the label spacing
return '<div class="tweak-1">$' + Highcharts.numberFormat(this.y,3,".",",") + '</div>';
} else if (this.x == Date.UTC(2012, 1, 1)) {
return '<div class="tweak-2">$' + Highcharts.numberFormat(this.y,3,".",",") + '</div>';
} else if (this.x == Date.UTC(2011, 7, 1) || this.x == Date.UTC(2012, 7, 1) ) {
return '<div class="tweak-3">$' + Highcharts.numberFormat(this.y,2,".",",") + '</div>';
} else if ( this.x == Date.UTC(2012, 0, 17) ) {
return '<div class="tweak-4">$' + Highcharts.numberFormat(this.y,3,".",",") + '</div>';
}
}}
}
},
credits: {
enabled: false
},
series: [{
name: 'Growth of $10,000 Investment',
type: 'line',
color: '#002d56',
yAxis: 1,
data: [
[Date.UTC(2011, 5, 1), 10000],
[Date.UTC(2011, 8, 1), 9996],
[Date.UTC(2011, 11, 1), 10652],
[Date.UTC(2012, 2, 1), 11387],
[Date.UTC(2012, 5, 1), 11586],
[Date.UTC(2012, 8, 1), 11984],
[Date.UTC(2012, 11, 1), 12179]
]
}, {
name: 'Historical Distributions Per Share',
color: '#762123',
type: 'line',
enableMouseTracking: false,
data: [
[Date.UTC(2011, 5, 1), 0.70],
[Date.UTC(2011, 6, 1), 0.70],
[Date.UTC(2011, 7, 1), 0.70],
[Date.UTC(2011, 8, 1), 0.70],
[Date.UTC(2011, 9, 1), 0.70],
[Date.UTC(2011, 9, 25), 0.70],
[Date.UTC(2011, 10, 1), 0.717],
[Date.UTC(2011, 11, 1), 0.717],
[Date.UTC(2012, 0, 10), 0.717],
[Date.UTC(2012, 0, 17), 0.728],
[Date.UTC(2012, 0, 24), 0.728],
[Date.UTC(2012, 0, 31), 0.745],
[Date.UTC(2012, 1, 1), 0.745],
[Date.UTC(2012, 1, 28), 0.745],
[Date.UTC(2012, 2, 6), 0.76],
[Date.UTC(2012, 2, 13), 0.76],
[Date.UTC(2012, 2, 20), 0.76],
[Date.UTC(2012, 2, 27), 0.76],
[Date.UTC(2012, 3, 3), 0.76],
[Date.UTC(2012, 3, 10), 0.76],
[Date.UTC(2012, 3, 17), 0.76],
[Date.UTC(2012, 3, 24), 0.76],
[Date.UTC(2012, 4, 1), 0.76],
[Date.UTC(2012, 4, 8), 0.76],
[Date.UTC(2012, 4, 15), 0.76],
[Date.UTC(2012, 4, 22), 0.76],
[Date.UTC(2012, 4, 29), 0.76],
[Date.UTC(2012, 5, 5), 0.76],
[Date.UTC(2012, 5, 12), 0.76],
[Date.UTC(2012, 5, 19), 0.76],
[Date.UTC(2012, 5, 26), 0.76],
[Date.UTC(2012, 6, 3), 0.76],
[Date.UTC(2012, 6, 10), 0.76],
[Date.UTC(2012, 6, 17), 0.76],
[Date.UTC(2012, 6, 24), 0.76],
[Date.UTC(2012, 6, 31), 0.76],
[Date.UTC(2012, 7, 1), 0.76],
[Date.UTC(2012, 7, 7), 0.76],
[Date.UTC(2012, 7, 14), 0.76],
[Date.UTC(2012, 7, 21), 0.76],
[Date.UTC(2012, 7, 28), 0.76],
[Date.UTC(2012, 8, 4), 0.76],
[Date.UTC(2012, 8, 11), 0.76],
[Date.UTC(2012, 8, 18), 0.76],
[Date.UTC(2012, 8, 25), 0.76],
[Date.UTC(2012, 11, 1), 0.76]
],
marker: {
enabled: false
}
}]
});
});

You can add the tickInterval to the xAxis properties:
...
tickInterval: 30 * 24 * 3600 * 1000,
...
There will appear some overlap so also might want to rotate the labels a bit:
See this jsfiddle.

How to apply gradient using highcharts in a dynamic graph.

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart : {
renderTo : 'container',
type : 'line',
backgroundColor : {
linearGradient : [0,0, 0, 0],
stops : [
[0, 'rgb(256, 256, 256)'],
[1, 'rgb(0, 0, 0)']
]
}
},
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",
fillOpacity:0,
fillColor : {
linearGradient : [0, 0, 0, 300],
stops : [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(256,256,256,256)']
]
},
// 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, 200],
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]
]
}
]
});
});
I am getting the required gradient in jsfiddle(through the above code) but the same thing isn't displayed in any web browser.I am using highcharts v 3.0.7.I can apply the background gradient but the individual graph gradient is not being applied in the web browsers.
Thank You.

It looks like you aren't setting the linearGradient for the chart background correctly. Try something like:
chart : {
renderTo : 'container',
type : 'line',
backgroundColor : {
linearGradient : [0,0, 0, 300],
stops : [
[0, 'rgb(256, 256, 256)'],
[1, 'rgb(0, 0, 0)']
]
}
},
Linear gradients are documented here: http://www.highcharts.com/docs/chart-design-and-style/colors
Note the last number (300 vs your value of 0) in the linearGradient option.
http://jsfiddle.net/K4cpG/

Gradient Fill on Line Chart (Highcharts)

I've been unable to find documentation that would let me combine the look of these two charts:
Irregular Time ChartLine/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!

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>

Develop Reference

JavaScript is the programming language of the Web.

Flot dynamically show/hide xaxis label based on data - javascript

Related

Highcharts: Selecting single series from plot with multiple series

Area spline chart using Highchart

Highcharts - show every month on datetime x-axis when the parent container is small

How to apply gradient using highcharts in a dynamic graph.

Gradient Fill on Line Chart (Highcharts)

Categories

Resources