I'm trying to use scheduler in order to show classes time from one entire day. The problem is that class time is 50 minutes, and between some classes has interval.
I did that using business hours, but it has a strange behavior in labels. Labels do not respect business time, the only thing I could do is show labels from 50 to 50 minutes too, but it is not enough because of intervals.
See below how it shows:
And now, how I would like it is:
And here is my code:
<script>
$(function(){
var todayDate = moment().startOf('day');
var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
var TODAY = todayDate.format('YYYY-MM-DD');
var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
$('#calendar').fullCalendar({
resourceAreaWidth: 230,
editable: true,
aspectRatio: 1.5,
scrollTime: '07:25',
slotLabelInterval: '00:50:00',
slotDuration: '00:50:00',
slotLabelFormat: 'HH:mm',
defaultView: 'timelineDay',
resourceLabelText: 'Turma / Sub-turma',
businessHours: [
{ id: 'a1', start: '07:25:00', end: '08:15:00', dow: [0,1,2,3,4,5] },
{ id: 'a2', start: '08:15:00', end: '09:05:00', dow: [0,1,2,3,4,5] },
{ id: 'a3', start: '09:20:00', end: '10:10:00', dow: [0,1,2,3,4,5] },
{ id: 'a4', start: '10:10:00', end: '11:00:00', dow: [0,1,2,3,4,5] },
{ id: 'a5', start: '11:10:00', end: '12:00:00', dow: [0,1,2,3,4,5] },
{ id: 'a6', start: '12:00:00', end: '12:50:00', dow: [0,1,2,3,4,5] },
{ id: 'a7', start: '13:15:00', end: '14:05:00', dow: [0,1,2,3,4,5] },
{ id: 'a8', start: '14:05:00', end: '14:55:00', dow: [0,1,2,3,4,5] },
{ id: 'a9', start: '15:10:00', end: '16:00:00', dow: [0,1,2,3,4,5] },
{ id: 'a10', start: '16:00:00', end: '16:50:00', dow: [0,1,2,3,4,5] },
{ id: 'a11', start: '17:00:00', end: '17:50:00', dow: [0,1,2,3,4,5] },
{ id: 'a12', start: '17:50:00', end: '18:40:00', dow: [0,1,2,3,4,5] },
{ id: 'a13', start: '19:00:00', end: '19:50:00', dow: [0,1,2,3,4,5] },
{ id: 'a14', start: '19:50:00', end: '20:40:00', dow: [0,1,2,3,4,5] },
{ id: 'a15', start: '20:55:00', end: '21:45:00', dow: [0,1,2,3,4,5] },
{ id: 'a16', start: '21:45:00', end: '22:35:00', dow: [0,1,2,3,4,5] }
],
minTime: '07:25:00',
maxTime: '22:35:00',
resources: [
{ id: 'd', title: '1ยบ Semestre', children: [
{ id: 'd1', title: 'Turma A', children: [
{ id: 'd11', title: 'Sub-turma A' },
{ id: 'd12', title: 'Sub-turma B' },
] },
{ id: 'd2', title: 'Turma B' }
] },
],
events: [
{ id: 'e1', resourceId: 'd2', start: TODAY + 'T07:25:00', end: TODAY + 'T08:15:00', title: 'event ' },
{ id: 'e2', resourceId: 'd2', start: TODAY + 'T08:15:00', end: TODAY + 'T09:05:00', title: 'event ' },
{ id: 'e3', resourceId: 'd2', start: TODAY + 'T09:20:00', end: TODAY + 'T10:10:00', title: 'event ' },
{ id: 'e4', resourceId: 'd2', start: TODAY + 'T10:10:00', end: TODAY + 'T11:00:00', title: 'event ' },
{ id: 'e5', resourceId: 'd2', start: TODAY + 'T11:10:00', end: TODAY + 'T12:00:00', title: 'event ' },
{ id: 'e6', resourceId: 'd2', start: TODAY + 'T12:00:00', end: TODAY + 'T12:50:00', title: 'event ' },
{ id: 'e7', resourceId: 'd2', start: TODAY + 'T13:15:00', end: TODAY + 'T14:05:00', title: 'event ' },
{ id: 'e8', resourceId: 'd2', start: TODAY + 'T14:05:00', end: TODAY + 'T14:55:00', title: 'event ' },
{ id: 'e9', resourceId: 'd2', start: TODAY + 'T15:10:00', end: TODAY + 'T16:00:00', title: 'event ' },
{ id: 'e10', resourceId: 'd2', start: TODAY + 'T16:00:00', end: TODAY + 'T16:50:00', title: 'event ' },
{ id: 'e11', resourceId: 'd2', start: TODAY + 'T17:00:00', end: TODAY + 'T17:50:00', title: 'event ' },
{ id: 'e12', resourceId: 'd2', start: TODAY + 'T17:50:00', end: TODAY + 'T18:40:00', title: 'event ' },
{ id: 'e13', resourceId: 'd2', start: TODAY + 'T19:00:00', end: TODAY + 'T19:50:00', title: 'event ' },
{ id: 'e14', resourceId: 'd2', start: TODAY + 'T19:50:00', end: TODAY + 'T20:40:00', title: 'event ' },
{ id: 'e15', resourceId: 'd2', start: TODAY + 'T20:55:00', end: TODAY + 'T21:45:00', title: 'event ' },
{ id: 'e16', resourceId: 'd2', start: TODAY + 'T21:45:00', end: TODAY + 'T22:35:00', title: 'event ' },
]
});
});
</script>
Please help-me!!
Best regards
Related
I am messing around with highcharts for a company project and I have the name/number from calculations (totals) being displayed int he legend. The problem is they also display on the graph. I can't for the life of me figure out how to turn them off on the chart, yet leave them on in the legend. I've read through the API and maybe I missed it but could use some help if you all don't mind.
Code:
Highcharts.chart('high_charts_admin', {
title: {
text: 'Adset ID: '+results[1].data[0].adset_id,
},
subtitle: {
text: 'Campaign Name: '+results[1].data[0].campaign_name,
},
yAxis: {
title: {
text: ''
}
},
xAxis: {
title: {
text: 'Day of the Campaign',
},
//type: 'datetime',
categories: results[0][8]
},
legend: {
//labelFormatter: function() {
// return '<span style="color: '+this.color+'">'+ this.name + '</span>';
// },
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
itemWidth: 250,
itemStyle: {
fontSize: '16px',
color: 'black'
},
itemMarginTop: 12,
itemMarginBottom: 12,
squareSymbol: true,
symbolHeight: 25,
symbolWidth: 30,
symbolRadius: 100,
},
chart: {
marginRight: 300,
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 0,
type: 'series',
//showInLegend: false,
}
},
series: [{
name: 'Results: '+results[2][0],
data: results[0][0],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Reach: '+results[2][1],
data: results[0][1],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Impressions: '+results[2][2],
data: results[0][2],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Cost Per Lead: '+results[2][3],
data: results[0][3],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Spend: '+results[2][4],
data: results[0][4],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'CTR (All): '+results[2][5],
data: results[0][5],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'CPC (All): '+results[2][6],
data: results[0][6],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Clicks: '+results[2][7],
data: results[0][7],
type: 'spline',
marker: {
radius: 2
},
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
Here is my code:
Highcharts.chart('high_charts_admin', {
title: {
text: 'Adset ID: '+results[1].data[0].adset_id,
},
subtitle: {
text: 'Campaign Name: '+results[1].data[0].campaign_name,
},
yAxis: {
title: {
text: ''
}
},
xAxis: {
title: {
text: 'Day of the Campaign',
},
//type: 'datetime',
categories: results[0][8]
},
legend: {
//labelFormatter: function() {
// return '<span style="color: '+this.color+'">'+ this.name + '</span>';
// },
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
itemWidth: 250,
itemStyle: {
fontSize: '16px',
color: 'black'
},
itemMarginTop: 12,
itemMarginBottom: 12,
squareSymbol: true,
symbolHeight: 25,
symbolWidth: 30,
symbolRadius: 100,
},
chart: {
marginRight: 300,
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 0,
type: 'series',
//showInLegend: false,
}
},
series: [{
name: 'Results: '+results[2][0],
data: results[0][0],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Reach: '+results[2][1],
data: results[0][1],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Impressions: '+results[2][2],
data: results[0][2],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Cost Per Lead: '+results[2][3],
data: results[0][3],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Spend: '+results[2][4],
data: results[0][4],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'CTR (All): '+results[2][5],
data: results[0][5],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'CPC (All): '+results[2][6],
data: results[0][6],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Clicks: '+results[2][7],
data: results[0][7],
type: 'spline',
marker: {
radius: 2
},
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
You have added total value in the series name
name: 'Results: '+results[2][0],
So it is showing in charts as well as in legend.
Instead of this you should use custom param in series defination like
series: [{
name: 'Results1',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
total: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reduce((tot,num)=>{return tot+num}),
type: 'spline',
marker: {
radius: 5
}
}]
Above I added total param in series, then I will use labelFormatter to show the total value in legend.
legend: {
labelFormatter: function() {
return this.userOptions.name + ': ' + this.userOptions.total
},
},
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
legend: {
labelFormatter: function() {
return this.userOptions.name + ': ' + this.userOptions.total
},
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Results1',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
total: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reduce((tot, num) => {
return tot + num
}),
type: 'spline',
marker: {
radius: 5
},
}, {
name: 'Results2',
data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 116.4],
total: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 116.4].reduce((tot, num) => {
return tot + num
}),
type: 'spline',
marker: {
radius: 5
},
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<div id="container" style="height: 400px"></div>
Fiddle demo
I think that removing the series-label module script from your HTML document is a solution which you are looking for.
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>
Demo: https://jsfiddle.net/BlackLabel/f6rya8k3/
API: https://api.highcharts.com/highcharts/plotOptions.series.label
I need guide make my chart as shown in the attached screenshot.
I have been using HighCharts for this purpose, but couldn't find appropriate options or configurations to do so. Following is the screen shot of my required design:
I am also attaching the fiddle link to my current implementation that I used to achieve these design requirements.
My Fiddle
HTML:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
JavaScript:
Highcharts.stockChart('container', {
chart: {
spacingLeft: 200,
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
title : {
text : 'Activity'
},
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 3,
text: 'Daily',
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
}, {
type: 'year',
count: 1,
text: 'Weekly',
dataGrouping: {
forced: true,
units: [['week', [1]]]
}
}, {
type: 'all',
text: 'Monthly',
dataGrouping: {
forced: true,
units: [['month', [1]]]
}
}],
buttonTheme: {
width: 60
},
selected: 2
},
legend: {
enable: true,
align: 'left',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 100
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%b'
}
},
series: [{
name: 'Label 1',
color: "#00aade",
data: [[1501545600000, 5], [1504224000000,4], [1506816000000, 6],[1509494400000,5]]
},
{
name: 'Label 2',
color: "#8cc63e",
data: [[1501545600000, 1], [1504224000000,0], [1506816000000, 2],[1509494400000,0]]
}]
});
Kindly if some one can guide me in doing proper configurations or styling to achieve this.
Thanks.
This is the closest I could get
http://jsfiddle.net/0yax1bav/5/
Add spacing on the left:
chart: {
spacingLeft: 300,
},
Move legend to the left:
legend: {
enabled: true,
align: 'left',
verticalAlign: 'top',
layout: 'vertical',
x: -250,
y: 150
},
Move title to the left:
title : {
align: 'left',
x: -280,
text : 'Activity',
floating: true
},
Move range to the left:
rangeSelector: {
floating: true,
x: 0,
verticalAlign: 'middle',
buttonPosition: {
align: 'left',
y: 20,
x: -140
},
inputPosition: {
align: 'left',
y: 15,
x: -280
},
...
Disable exporting buttons:
exporting:{
buttons:{
contextButton: {
enabled: false
}
}
}
Highcharts.stockChart('container', {
chart: {
spacingLeft: 300,
},
legend: {
enabled: true,
align: 'left',
verticalAlign: 'top',
layout: 'vertical',
x: -250,
y: 150
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
exporting:{
buttons:{
contextButton: {
enabled: false
}
}
},
title : {
align: 'left',
x: -280,
text : 'Activity',
floating: true
},
rangeSelector: {
floating: true,
x: 0,
verticalAlign: 'middle',
buttonPosition: {
align: 'left',
y: 20,
x: -140
},
inputPosition: {
align: 'left',
y: 15,
x: -280
},
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 3,
text: 'Daily',
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
}, {
type: 'year',
count: 1,
text: 'Weekly',
dataGrouping: {
forced: true,
units: [['week', [1]]]
}
}, {
type: 'all',
text: 'Monthly',
dataGrouping: {
forced: true,
units: [['month', [1]]]
}
}],
buttonTheme: {
width: 60
},
selected: 2
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%b'
}
},
series: [{
name: 'Label 1',
color: "#00aade",
data: [[1501545600000, 5], [1504224000000,4], [1506816000000, 6],[1509494400000,5]]
},
{
name: 'Label 2',
color: "#8cc63e",
data: [[1501545600000, 1], [1504224000000,0], [1506816000000, 2],[1509494400000,0]]
}]
});
I was able to get this far. Highcharts x,y coordinates are a bit challenging to use, but you needed to do a bit more styling on buttonPosition,inputPosition, and Title (see screenshot) to move them to the right side:
HTML:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js">
</script>
<div id="container" style="height: 400px; min-width: 310px"></div>
JavaScript:
Highcharts.stockChart('container', {
chart: {
marginLeft: 300,
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
title : {
text : 'Activity',
x: -280
},
rangeSelector: {
x: 0,
verticalAlign: 'middle',
buttonPosition: {
align: 'left',
y: 20,
x: -140
},
inputPosition: {
align: 'left',
y: 15,
x: -280
},
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 3,
text: 'Daily',
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
}, {
type: 'year',
count: 1,
text: 'Weekly',
dataGrouping: {
forced: true,
units: [['week', [1]]]
}
}, {
type: 'all',
text: 'Monthly',
dataGrouping: {
forced: true,
units: [['month', [1]]]
}
}],
buttonTheme: {
width: 60
},
selected: 2
},
legend: {
width: 100,
align: 'left',
x: 0, // = marginLeft - default spacingLeft
y: -100,
itemWidth: 100,
borderWidth: 1
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%b'
}
},
series: [{
name: 'Label 1',
color: "#00aade",
data: [[1501545600000, 5], [1504224000000,4], [1506816000000, 6],[1509494400000,5]]
},
{
name: 'Label 2',
color: "#8cc63e",
data: [[1501545600000, 1], [1504224000000,0], [1506816000000, 2],[1509494400000,0]]
}]
});
The legend doesn't appear to be rendering - check to make sure that your data is in the proper format and also try playing around with x and y.
I have a wrong point data shown.
It doesn't show the correct data, check out the picture.
Startpoint is Date.UTC(2016, 06, 30) and not the Date.UTC(2016, 07, 30) as in the tooltip. Here is the result I get:
$(function() {
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Waterflow'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Flow im Mio'
},
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: 'Main',
data: ([
[Date.UTC(2016, 06, 30), 3072.541365],
[Date.UTC(2016, 07, 31), 3315.618228],
[Date.UTC(2016, 08, 31), 3367.458135],
[Date.UTC(2016, 09, 30), 3370.195785],
[Date.UTC(2016, 10, 31), 3424.501986],
[Date.UTC(2016, 11, 30), 3479.865412],
[Date.UTC(2016, 12, 31), 3521.730275],
])
}, ]
});
});
In Date.UTC(Year,Month*,Day,Hour,Minute,Seconds) the Month is starting from 0. This is mentioned in the documentation.
So to specify the month June you have to use 5 and not 6.
How could I achieve the chart below as accurate as possible?
I'm trying to achieve the chart in the picture below with highcharts, the problem I have is that I can't achieve the gradients and the purple cut-line
this is what I have donde so far : jsFiddle
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
options: {
title: {
text: "Historical report"
},
heigth: 200
},
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: [
{
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
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [
{
name: 'John',
data: [3, 9, null, 5, 4, 10, 12],
lineColor: "#5A66AF"
}, {
name: 'Jane',
data: [1, 10, null, 3, 3, 5, 4],
lineColor: '#47a06b'
}, {
name: 'Roberto',
data: [10, 15, null, 15, 9, 9, 4],
lineColor: '#2ba9db'
}
]
});
});
The line is achieved by the DashStyle property:
http://api.highcharts.com/highcharts#plotOptions.line.dashStyle
The gradient fill is a matter of defining the gradient stops in the fillColor property:
http://api.highcharts.com/highcharts#plotOptions.area.fillColor
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/area-fillcolor-gradient/
(though, FWIW, that extreme white end to the gradient is reeeeally distracting...)
I want to have a day vs timescatter plot. I have some unix time values. I just need to plot them on X and Y axis such that the days of the week (e.g. Monday, Tuseday etc.) on the X axis and the time e.g.(2:24,13:40 etc. ) on the Y axis. I have tried using the datetime type. But I think I am missing something.
Here is what I have tried to do:
data=[["Saturday", 1390723133.57414], ["Sunday", 1390803027.3852], ["Monday", 1390862581.18321], ["Monday", 1390830748.67335], ["Wedneday", 1391015403.93726], ["Wedneday", 1391006992.20059], ["Sunday", 1390804961.8415]]
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'test'
},
xAxis: {
title: {
enabled: true,
text: 'Day of the week'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true,
},
yAxis: {
title: {
text: 'Time of the day'
},
type: 'datetime',
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
series: [{
name: '',
color: 'rgba(223, 83, 83, .5)',
data: data
}]
});
});
});
You need parse your data to correct format, because in data array you need to have timestamps or numbers, not days / strings as you have.