How to apply gradient using highcharts in a dynamic graph. - javascript

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

Related

Flot dynamically show/hide xaxis label based on data

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.

Button to change the display x-axis range on a google chart

I have a Google area chart that plots some data, approx 5 years of daily data. The user can zoom in and out and this all works fine.
I wanted though to have a button next to the chart that they could click to see the last years worth of data. However, I am not sure how I can change the x-axis range on a Google chart?
you can use axis option viewWindow
which has properties for min & max,
these properties should match the data type of the axis they are applied
see following working snippet,
the x-axis are dates, so we can set the min & max dates to be displayed on the chart...
google.charts.load('current', {
packages: ['controls', 'corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Positive');
data.addColumn('number', 'Negative');
data.addRows([
[new Date(2017, 1, 20), 10, null],
[new Date(2017, 2, 21), 5, null],
[new Date(2017, 3, 22), 0, 0],
[new Date(2017, 4, 23), null, -5],
[new Date(2017, 5, 24), null, -10],
[new Date(2017, 6, 25), null, -5],
[new Date(2017, 7, 26), 0, 0],
[new Date(2017, 8, 27), 10, null],
[new Date(2017, 9, 28), 5, null],
[new Date(2017, 11, 29), 0, 0],
[new Date(2018, 0, 20), 00, null],
[new Date(2018, 0, 21), 5, null],
[new Date(2018, 0, 22), 0, 0],
[new Date(2018, 0, 23), null, -5],
[new Date(2018, 0, 24), null, -10],
[new Date(2018, 0, 25), null, -5],
[new Date(2018, 0, 26), 0, 0],
[new Date(2018, 0, 27), 00, null],
[new Date(2018, 0, 28), 5, null],
[new Date(2018, 0, 29), 0, 0],
[new Date(2018, 1, 20), 10, null],
[new Date(2018, 1, 21), 5, null],
[new Date(2018, 1, 22), 0, 0],
[new Date(2018, 1, 23), null, -5],
[new Date(2018, 1, 24), null, -10],
[new Date(2018, 1, 25), null, -5],
[new Date(2018, 1, 26), 0, 0],
[new Date(2018, 1, 27), 10, null],
[new Date(2018, 1, 28), 5, null],
[new Date(2018, 1, 29), 0, 0],
[new Date(2018, 2, 20), 10, null],
[new Date(2018, 2, 21), 5, null],
[new Date(2018, 2, 22), 0, 0],
[new Date(2018, 2, 23), null, -5],
[new Date(2018, 2, 24), null, -10],
[new Date(2018, 2, 25), null, -5],
[new Date(2018, 2, 26), 0, 0],
[new Date(2018, 2, 27), 10, null],
[new Date(2018, 2, 28), 5, null],
[new Date(2018, 2, 29), 0, 0],
[new Date(2018, 3, 20), 10, null],
[new Date(2018, 3, 21), 5, null],
[new Date(2018, 3, 22), 0, 0],
[new Date(2018, 3, 23), null, -5],
[new Date(2018, 3, 24), null, -10],
[new Date(2018, 3, 25), null, -5],
[new Date(2018, 3, 26), 0, 0],
[new Date(2018, 3, 27), 10, null],
[new Date(2018, 3, 28), 5, null],
[new Date(2018, 3, 29), 0, 0],
[new Date(2018, 4, 20), 10, null],
[new Date(2018, 4, 21), 5, null],
[new Date(2018, 4, 22), 0, 0],
[new Date(2018, 4, 23), null, -5],
[new Date(2018, 4, 24), null, -10],
[new Date(2018, 4, 25), null, -5],
[new Date(2018, 4, 26), 0, 0],
[new Date(2018, 4, 27), 10, null],
[new Date(2018, 4, 28), 5, null],
[new Date(2018, 4, 29), 0, 0],
[new Date(2018, 5, 20), 10, null],
[new Date(2018, 5, 21), 5, null],
[new Date(2018, 5, 22), 0, 0],
[new Date(2018, 5, 23), null, -5],
[new Date(2018, 5, 24), null, -10],
[new Date(2018, 5, 25), null, -5],
[new Date(2018, 5, 26), 0, 0],
[new Date(2018, 5, 27), 10, null],
[new Date(2018, 5, 28), 5, null],
[new Date(2018, 5, 29), 0, 0],
[new Date(2018, 6, 20), 10, null],
[new Date(2018, 6, 21), 5, null],
[new Date(2018, 6, 22), 0, 0],
[new Date(2018, 6, 23), null, -5],
[new Date(2018, 6, 24), null, -10],
[new Date(2018, 6, 25), null, -5],
[new Date(2018, 6, 26), 0, 0],
[new Date(2018, 6, 27), 10, null],
[new Date(2018, 6, 28), 5, null],
[new Date(2018, 6, 29), 0, 0],
[new Date(2018, 9, 20), 10, null],
[new Date(2018, 9, 21), 5, null],
[new Date(2018, 9, 22), 0, 0],
[new Date(2018, 9, 23), null, -5],
[new Date(2018, 9, 24), null, -10],
[new Date(2018, 9, 25), null, -5],
[new Date(2018, 9, 26), 0, 0],
[new Date(2018, 9, 27), 10, null],
[new Date(2018, 9, 28), 5, null],
[new Date(2018, 9, 29), 0, 0],
[new Date(2018, 11, 20), 10, null],
[new Date(2018, 11, 21), 5, null],
[new Date(2018, 11, 22), 0, 0],
[new Date(2018, 11, 23), null, -5],
[new Date(2018, 11, 24), null, -10],
[new Date(2018, 11, 25), null, -5],
[new Date(2018, 11, 26), 0, 0],
[new Date(2018, 11, 27), 10, null],
[new Date(2018, 11, 28), 5, null],
[new Date(2018, 11, 29), 0, 0],
]);
var chart = new google.visualization.ChartWrapper({
chartType: 'AreaChart',
containerId: 'chart-area',
dataTable: data,
options: {
height: 280,
legend: {
alignment: 'end',
position: 'top'
},
animation: {
duration: 500,
easing: 'in',
startup: true
},
chartArea: {
height: '100%',
width: '100%',
top: 36,
left: 36,
right: 18,
bottom: 36
}
}
});
var chartDateRange = data.getColumnRange(0);
var oneYear = (365.25 * 24 * 60 * 60 * 1000);
$('#range-buttons button').on('click', function (sender) {
var hAxis;
var visibleRange = parseInt($(sender.target).data('range'));
if (isNaN(visibleRange)) {
hAxis = null;
} else {
hAxis = {
viewWindow: {
min: new Date(chartDateRange.max.getTime() - oneYear),
max: chartDateRange.max
}
};
}
chart.setOption('hAxis', hAxis);
chart.draw();
});
chart.draw();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="range-buttons">
<span>Zoom: </span>
<button class="ui-button ui-widget ui-corner-all" data-range="31104000000">Last Year</button>
<button class="ui-button ui-widget ui-corner-all">All</button>
</div>
<div id="chart-area"></div>
<div id="filter-range"></div>
</div>

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();
}
}
}
},

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.

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>

Categories

Resources