')
.css({ position: 'absolute', top: 0, height: 470, width: '100%' })
.appendTo($container);
var $masterContainer = $('
')
.css({ position: 'absolute', top: 370, height: 120, width: '100%' })
.appendTo($container);
//get timescale hourly daily monthly
var TimeScale = document.getElementById('SelectTimeScale').options[document.getElementById('SelectTimeScale').selectedIndex].value;
// var TimeScale = document.getElementById('SelectTimeScale').selectedIndex;
// create master and in its callback, create the detail chart
createMaster(TimeScale);
}
//});
///////////////////
//FITBIT
/**
* Synchronize zooming through the setExtremes event handler.
*/
function syncExtremes(e) {
var thisChart = this.chart;
if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
Highcharts.each(Highcharts.charts, function (chart) {
if (chart !== thisChart) {
if (chart.xAxis[0].setExtremes) { // It is null while updating
chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
}
}
});
}
}
function showFitbitDays()
{
var dayLimit = document.getElementById('SelectFitbit').options[document.getElementById('SelectFitbit').selectedIndex].value;
console.log(dayLimit);
var dataSteps = [
];
dataSteps=dataSteps.slice(dataSteps.length-dayLimit);
var dataMoodPanda =[
]
dataMoodPanda=dataMoodPanda.slice(dataMoodPanda.length-dayLimit);
var dataSleep=[
];
dataSleep=dataSleep.slice(dataSleep.length-dayLimit);
var dataCaloriesIn=[
];
dataCaloriesIn=dataCaloriesIn.slice(dataCaloriesIn.length-dayLimit);
var dataCaloriesOut=[
];
dataCaloriesOut=dataCaloriesOut.slice(dataCaloriesOut.length-dayLimit);
Highcharts.chart('containerFitbitSteps', {
chart: {
marginLeft: 55,
marginRight: 55,
zoomType: 'x',
},
plotOptions: {
series: {
lineWidth: 4,
//negative red
//threshold:5,
negativeColor:'rgba(249,122,122, 0.7)',
//end negative red
marker: {
enabled: true,
radius: 5 ,
states: {
hover: {
enabled: true,
radius: 7
}
}
}
}
},
credits: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: 'Source: Fitbit and MoodPanda'
},
xAxis: [{
tickInterval: 24 * 3600 * 1000,
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: ''
},
crosshair: true,
labels: {
rotation: -90
},
}],
yAxis: [{
min:0,
labels: {
format: '{value}k',
style: {
//color: Highcharts.getOptions().colors[0]
}
},
title: {
text: 'Steps',
style: {
//color: Highcharts.getOptions().colors[0]
}
}
}, {
min:0,
max:10,
//minorTickInterval: 1,
//
//tickInterval:2,
title: {
text: 'Happiness',
style: {
color:'#99cc00',
}
},
labels: {
format: '{value} ',
style: {
color:'#99cc00',
}
},
opposite: true
}],
tooltip: {
shared: true
},
series: [{
pointPadding: -0.2
, color:'#F39C12',
name: 'Steps',
type: 'column',
data: dataSteps,
tooltip: {
valueSuffix: 'k steps'
}
},
{
color:'#99cc00',
name: 'Happiness',
type: 'line',
yAxis: 1,
lineWidth: 4,
data: dataMoodPanda,
tooltip: {
valueSuffix: '/10'
}
}
]
});
Highcharts.chart('containerFitbitSleep', {
chart: {
zoomType: 'x',
},
plotOptions: {
series: {
lineWidth: 4,
//negative red
//threshold:5,
negativeColor:'rgba(249,122,122, 0.7)',
//end negative red
marker: {
enabled: true,
radius: 5 ,
states: {
hover: {
enabled: true,
radius: 7
}
}
}
}
},
credits: {
enabled: false
},
title: {
text: 'o'
},
subtitle: {
text: 'Source: Fitbit and MoodPanda'
},
xAxis: [{
tickInterval: 24 * 3600 * 1000,
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: ''
},
crosshair: true,
labels: {
rotation: -90
},
}],
yAxis: [{
min:0,
labels: {
format: '{value}',
style: {
//color: Highcharts.getOptions().colors[0]
}
},
title: {
text: 'Hours sleep',
style: {
//color: Highcharts.getOptions().colors[0]
}
}
}, {
min:0,
max:10,
//minorTickInterval: 1,
//
//tickInterval:2,
title: {
text: 'Happiness',
style: {
color:'#99cc00',
}
},
labels: {
format: '{value} ',
style: {
color:'#99cc00',
}
},
opposite: true
}],
tooltip: {
shared: true
},
series: [{
pointPadding: -0.2
, color:'#a1a3e7',
name: 'Sleep',
type: 'column',
data: dataSleep,
tooltip: {
valueSuffix: ' hours'
}
},
{
color:'#99cc00',
name: 'Happiness',
type: 'line',
yAxis: 1,
lineWidth: 4,
data: dataMoodPanda,
tooltip: {
valueSuffix: '/10'
}
}
]
});
Highcharts.chart('containerFitbitCaloriesOut', {
chart: {
zoomType: 'x',
},
plotOptions: {
series: {
lineWidth: 4,
//negative red
//threshold:5,
negativeColor:'rgba(249,122,122, 0.7)',
//end negative red
marker: {
enabled: true,
radius: 5 ,
states: {
hover: {
enabled: true,
radius: 7
}
}
}
}
},
credits: {
enabled: false
},
title: {
text: 'o'
},
subtitle: {
text: 'Source: Fitbit and MoodPanda'
},
xAxis: [{
tickInterval: 24 * 3600 * 1000,
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: ''
},
crosshair: true,
labels: {
rotation: -90
},
}],
yAxis: [{
min:0,
labels: {
format: '{value}k',
style: {
//color: Highcharts.getOptions().colors[0]
}
},
title: {
text: 'Calories ',
style: {
//color: Highcharts.getOptions().colors[0]
}
}
}, {
min:0,
max:10,
//minorTickInterval: 1,
//
//tickInterval:2,
title: {
text: 'Happiness',
style: {
color:'#99cc00',
}
},
labels: {
format: '{value} ',
style: {
color:'#99cc00',
}
},
opposite: true
}],
tooltip: {
shared: true
},
series: [
{
pointPadding: 0
, color:'#F39C12',
name: 'Calories burnt',
type: 'column',
data: dataCaloriesOut,
tooltip: {
valueSuffix: 'k calories'
}
},
{
pointPadding: 0
, color:'#f97a7a',
name: 'Calories consumed',
type: 'column',
data: dataCaloriesIn,
tooltip: {
valueSuffix: 'k calories'
}
},
{
color:'#99cc00',
name: 'Happiness',
type: 'line',
yAxis: 1,
lineWidth: 4,
data: dataMoodPanda,
tooltip: {
valueSuffix: '/10'
}
}
]
});
}
function showFitbitAdvanced()
{
Highcharts.chart('containerFitbitStepsGrouped', {
chart: {
marginLeft: 55,
marginRight: 55,
type: 'column'
},
credits: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: 'Source: Fitbit and MoodPanda'
},
xAxis: {
type: 'category',
title:{text:'Daily steps'}
},
yAxis: {
min: 0,
max:10,
title: {
text: 'Happiness',
style: {
color:'#99cc00',
}
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Average happiness {point.y:.1f}'
},
series: [{
name: 'Happiness',
color: '#AFD246' ,
data: [
],
}]
});
Highcharts.chart('containerFitbitCaloriesInGrouped', {
chart: {
marginLeft: 55,
marginRight: 55,
type: 'column'
},
credits: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: 'Source: Fitbit and MoodPanda'
},
xAxis: {
type: 'category',
title:{text:'Daily calories consumed'}
},
yAxis: {
min: 0,
max:10,
title: {
text: 'Happiness',
style: {
color:'#f97a7a',
}
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Average happiness {point.y:.1f}'
},
series: [{
name: 'Happiness',
color: '#f97a7a' ,
data: [
],
}]
});
Highcharts.chart('containerFitbitCaloriesOutGrouped', {
chart: {
marginLeft: 55,
marginRight: 55,
type: 'column'
},
credits: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: 'Source: Fitbit and MoodPanda'
},
xAxis: {
type: 'category',
title:{text:'Daily calories burned'}
},
yAxis: {
min: 0,
max:10,
title: {
text: 'Happiness',
style: {
color:'#F39C12',
}
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Average happiness {point.y:.1f}'
},
series: [{
name: 'Happiness',
color: '#F39C12' ,
data: [
],
}]
});
Highcharts.chart('containerFitbitSleepGrouped', {
chart: {
marginLeft: 55,
marginRight: 55,
type: 'column'
},
credits: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: 'Source: Fitbit and MoodPanda'
},
xAxis: {
type: 'category',
title:{text:'Daily sleep hours'}
},
yAxis: {
min: 0,
max:10,
title: {
text: 'Happiness',
style: {
color:'#a1a3e7',
}
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Average happiness {point.y:.1f}'
},
series: [{
name: 'Happiness',
color: '#a1a3e7' ,
data: [
],
}]
});
}
///////////////////////
//HEATMAP
//$(document).ready(function () {
function showHeatmap()
{
chart = new Highcharts.Chart({
chart: {
renderTo: 'containerHeatMap',
type: 'heatmap',
plotBackgroundColor: 'none',
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: ''
},
credits: {
enabled: false
},
subtitle: {
text: ''
},
exporting: {
enabled: false
},
xAxis: {
categories: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23' ],
title: 'Time (e.g 13:00)'
},
yAxis: {
categories: ['Sun', 'Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon','Sun'],
title: null
},
colorAxis: {
min: 0,
max:10,
minColor: '#ff0000',
maxColor:'#33ff00'
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 200
},
tooltip: {
formatter: function () {
return '' + this.series.yAxis.categories[this.point.y] + ' ' + this.series.xAxis.categories[this.point.x] + ':00 Average: ' + this.point.value;
}
},
series: [{
name: 'Avg Happiness',
borderWidth: 1,
data: [[0,3,7],[1,2,5],[1,4,6],[1,5,3],[2,1,6],[2,3,5],[2,4,5],[2,5,7],[2,6,6],[2,7,7],[3,2,5],[3,4,7],[3,5,7],[3,7,6],[4,1,5],[4,3,6],[4,4,6],[4,5,5],[4,6,5],[4,7,5],[5,1,5],[5,2,6],[5,3,5],[5,4,5],[5,5,5],[5,6,5],[5,7,5],[6,1,5],[6,2,7],[6,3,5],[6,4,5],[6,5,6],[6,6,6],[6,7,7],[7,1,6],[7,2,7],[7,3,6],[7,4,7],[7,5,6],[7,6,6],[7,7,6],[8,1,7],[8,2,5],[8,3,6],[8,4,6],[8,5,6],[8,6,6],[8,7,6],[9,1,5],[9,2,6],[9,3,6],[9,4,6],[9,5,6],[9,6,4],[9,7,6],[10,1,6],[10,2,7],[10,3,5],[10,4,5],[10,5,6],[10,6,5],[10,7,6],[11,1,6],[11,2,5],[11,3,5],[11,4,6],[11,5,6],[11,6,5],[11,7,6],[12,1,6],[12,2,6],[12,3,6],[12,4,7],[12,5,6],[12,6,5],[12,7,6],[13,1,6],[13,2,6],[13,3,6],[13,4,6],[13,5,6],[13,6,5],[13,7,6],[14,1,6],[14,2,7],[14,3,6],[14,4,6],[14,5,7],[14,6,4],[14,7,6],[15,1,6],[15,2,6],[15,3,5],[15,4,7],[15,5,7],[15,6,6],[15,7,5],[16,1,6],[16,2,5],[16,3,6],[16,4,7],[16,5,5],[16,6,6],[16,7,5],[17,1,6],[17,2,4],[17,3,6],[17,4,6],[17,5,4],[17,6,5],[17,7,6],[18,1,6],[18,2,5],[18,3,6],[18,4,7],[18,5,6],[18,7,5],[19,1,5],[19,2,6],[19,3,7],[19,4,3],[19,5,7],[19,6,7],[20,6,7],[20,7,6],[21,2,7],[21,3,6],[21,5,3],[21,6,7],[22,2,6],[22,4,6],[22,5,7],[22,7,5],[23,1,6],[23,3,6] ],
dataLabels: {
enabled: false,
color: 'black',
style: {
textShadow: 'none',
HcTextStroke: 'none'
}
}
}]
});
}
//});
//END HEATMAP
///////////////////////
function showAdvanced()
{
chart = new Highcharts.Chart({
chart: {
renderTo: 'containerDonut',
margin: [30, 0, 0, 0],
plotBackgroundColor: 'none',
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: ''
},
credits: {
enabled: false
},
subtitle: {
text: ''
},
tooltip: {
formatter: function() {
return ''+ this.series.name +'
'+
this.point.name +': '+ this.y +' %';
}
},
exporting: {
enabled: false
},
legend: {
enabled: true,
align: 'center',
verticalAlign: 'top'
},
series: [{
type: 'pie',
name: 'Other People',
size: '45%',
innerSize: '20%',
data: [
{ name: 'Happy', y: 40.7, color: '#AFD246' },
{ name: 'Ok', y:20.3, color: '#F39C12' },
{ name: 'Unhappy', y: 39, color: '#f97a7a' },
],
dataLabels: {
enabled: false
},
showInLegend: true
}, {
type: 'pie',
name: 'Joshua R',
innerSize: '45%',
data: [
{ name: 'Happy', y: 65.5, color: '#AFD246' },
{ name: 'Ok', y:20.7, color: '#F39C12' },
{ name: 'Unhappy', y: 13.8, color: '#f97a7a' },
],
dataLabels: {
enabled: false
},
showInLegend: false
}]
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'containerStacked',
defaultSeriesType: 'area',
},
title: {
text: ''
},
credits: {
enabled: false
},
subtitle: {
text: ''
},
xAxis: {
categories: ['Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
labels: {
enabled: false
},
title: {
text: null
},
},
legend: {
enabled: true,
align: 'center',
verticalAlign: 'top'
},
tooltip: {
enabled: false
},
plotOptions: {
area: {
stacking: 'percent',
lineWidth: 2,
}
},
exporting: {
enabled: false
},
series: [{
name: 'Happy',
data: [43, 48, 55, 48, 56, 43, 45],
color:'#AFD246'
}, {
name: 'Ok',
data: [22, 16, 11, 13, 14, 15, 16],
color:'#F39C12'
}, {
name: 'Unhappy',
data: [18, 13, 11, 9, 6, 8, 6],
color:'#f97a7a'
}]
});
}