yet.
I am testing my code only locally on my PC.
Code: Select all
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Board</title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="highslide/highslide-full.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css"/>
<script type="text/javascript"> hs.allowMultipleInstances = false; hs.outlineType = 'rounded-white'; </script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 500px; height: 180px; margin: 0 auto"></div>
<script type="text/javascript">
$(function () {
Highcharts.setOptions({
global: {
useUTC: false,
timeZoneOffset: -180
},
lang: {
shortMonths: ['Sau', 'Vas', 'Kov', 'Bal', 'Geg', 'Bir', 'Lie', 'Rgp', 'Rgs', 'Spa', 'Lap', 'Grd'],
drillUpText: ' < Atgal '
}
});
// Create the chart
$('#container').highcharts({
credits: {
enabled: false
},
xAxis: [{
id: 0,
startOnTick: false,
labels: {
y: 15,
format: '{value:%e %b}',
zIndex: 0
},
tickWidth: 0,
tickPixelInterval: 10,
title: {
text: null
},
type: 'datetime'
},{
id: 1,
startOnTick: false,
labels: {
y: 15,
zIndex: 0
},
tickWidth: 0,
title: {
text: null
},
type: 'category',
lineWidth: 0
}],
yAxis: {
gridLineWidth: 0,
gridLineColor: '#e0e0e0',
labels: {
y: 0,
x: 0,
overflow: 'justify',
enabled: false,
maxStaggerLines: 0,
align: 'center'
},
title: {
margin: 0,
text: null
},
gridLineInterpolation: null
},
tooltip: {
enabled: false,
shared: true,
xDateFormat: '%e %b',
valueSuffix: ' Lt',
borderColor: 'null',
borderRadius: 10
},
plotOptions: {
areaspline: {
lineColor: '#c0c0c0',
marker: {
enabled: false,
fillColor: '#e0e0e0',
radius: 3,
lineWidth: 1,
lineColor: '#c0c0c0'
},
lineWidth: 1,
states: {
hover: {
marker: {
radius: 3,
lineWidth: 1
}
}
}
},
column: {
allowPointSelect: false,
cursor: 'pointer',
pointWidth: 35,
dataLabels: {
enabled: true,
inside: false,
overflow: 'none',
y: -10,
x: 0,
verticalAlign: 'middle',
padding: 0,
}
}
},
chart: {
events: {
drilldown: function(e){
UpdateTitle('BP s/f ', Highcharts.dateFormat('%Y-%m-%d', e.point.x))
},
drillup: function(){
UpdateTitle('BP s/f', null)
}
},
spacingBottom: 20,
type: 'column',
borderRadius: 2,
spacingTop: 0,
width: 1012,
marginLeft: 0,
spacingRight: 0,
marginBottom: 40,
marginRight: 0,
marginTop: 25,
height: 180,
spacingLeft: 0
},
title: {
margin: 10,
y: 15,
text: 'BP s/f',
x: 20,
align: 'left',
},
subtitle: {
x: 20,
align: 'left'
},
Exporting: {
scale: 1,
buttons: {
contextButton: {
enabled: false
}
},
enabled: false
},
legend: {
enabled: false,
symbolWidth: 12
},
series: [ {
index: 1,
type: 'column',
color: '#30bf09',
name: 'BP s/f',
data: [{
x: 1399410000000,
y: 16675,
drilldown: 'day01'
},{
x: 1399496400000,
y: 6906,
drilldown: 'day02'
},{
x: 1399582800000,
y: 5290,
drilldown: 'day03'
},{
x: 1399669200000,
y: 764,
drilldown: 'day04'
},{
x: 1399755600000,
y: 248,
drilldown: 'day05'
},{
x: 1399842000000,
y: 8585,
drilldown: 'day06'
},{
x: 1399928400000,
y: 5176,
drilldown: 'day07'
},{
x: 1400014800000,
y: 10836,
drilldown: 'day08'
},{
x: 1400101200000,
y: 13217,
drilldown: 'day09'
},{
x: 1400187600000,
y: 7213,
drilldown: 'day10'
},{
x: 1400274000000,
y: 711,
drilldown: 'day11'
},{
x: 1400360400000,
y: 1038,
drilldown: 'day12'
},{
x: 1400446800000,
y: 6612,
drilldown: 'day13'
},{
x: 1400533200000,
y: 14496,
drilldown: 'day14'
}]
},{
index: 0,
type: 'areaspline',
color: '#e0e0e0',
name: 'Planas',
data: [
[1399410000000, 2930],
[1399496400000, 2930],
[1399582800000, 2930],
[1399669200000, 0],
[1399755600000, 0],
[1399842000000, 2930],
[1399928400000, 2930],
[1400014800000, 2930],
[1400101200000, 2930],
[1400187600000, 2930],
[1400274000000, 0],
[1400360400000, 0],
[1400446800000, 2930],
[1400533200000, 2930]
]
}],
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
fontWeight: 'regular',
color: '7f7f7f'
},
activeDataLabelStyle: {
textDecoration: 'none',
fontWeight: 'semi-bold',
color: '4c4c4c'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
align: 'right',
x: -5,
y: 0,
verticalAlign: 'top'
}
},
series: [{
id: 'day01',
xAxis: 1,
point: {
events: {
click: function (e) {
hs.htmlExpand(null, {
pageOrigin: {
x: e.pageX + 170,
y: e.pageY - 10
},
headingText: 'Sąskaitos-faktūros',
maincontentId: 'drill_slide',
radius: 1,
width: 300,
height: 150
});
}
}
},
data: [
['ESET', 20000],
['OERP', 4000],
['Presta', 2000],
['Export', 600],
['ESET', 75],
['SoftMak', 75],
['Google', 750],
['Blancco', 0],
['Axence', 200],
['Kiti', 1500],
['...', 0],
['...', 0],
['Box', 550],
['Nuoma', 75]
]
},{
id: 'day02',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftM', 75],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ]
]
},{
id: 'day03',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day04',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day05',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day06',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day07',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day08',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day09',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day10',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day11',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day12',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day13',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day14',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ]
]}
]
}
})
var chart = $('#container').highcharts();
function UpdateTitle(argument1, argument2) {
chart.setTitle({text: argument1}, {text: argument2})
}
});
</script>
<div id="drill_slide" class="highslide-maincontent">
<table style="width:280px" cellspacing=2 cellpadding=0 size=0 font color="#ff0000">
<tr>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Jill</td>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Smith</td>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>50</td>
<td><FONT COLOR="#ff0000" FACE="Lucida Sans Unicode" SIZE=2>Project A</td>
</tr>
<tr>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Axence</td>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Google</td>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>94</td>
<td><FONT COLOR="#ff0000" FACE="Lucida Sans Unicode" SIZE=2>Project K</td>
</tr>
<tr>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>John</td>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Doe</td>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>80</td>
<td><FONT COLOR="#ff0000" FACE="Lucida Sans Unicode" SIZE=2>Project N</td>
</tr>
<tr>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Jill</td>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Smith</td>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>50</td>
<td><FONT COLOR="#ff0000" FACE="Lucida Sans Unicode" SIZE=2>Project A</td>
</tr>
<tr>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Eve</td>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Jackson</td>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>94</td>
<td><FONT COLOR="#ff0000" FACE="Lucida Sans Unicode" SIZE=2>Project K</td>
</tr>
<tr>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>John</td>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Doe</td>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>80</td>
<td><FONT COLOR="#ff0000" FACE="Lucida Sans Unicode" SIZE=2>Project N</td>
</tr>
<tr>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Jill</td>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Smith</td>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>50</td>
<td><FONT COLOR="#ff0000" FACE="Lucida Sans Unicode" SIZE=2>Project A</td>
</tr>
<tr>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Eve</td>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Jackson</td>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>94</td>
<td><FONT COLOR="#ff0000" FACE="Lucida Sans Unicode" SIZE=2>Project K</td>
</tr>
<tr>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>John</td>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Doe</td>
<td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>80</td>
<td><FONT COLOR="#ff0000" FACE="Lucida Sans Unicode" SIZE=2>Project N</td>
</tr>
</table>
</div>
</body>
</html>