Related
I created a simple chart:
const myChart = new Chart(document.getElementById('myChartChart').getContext('2d');, {
type: 'scatter',
data: {
datasets: [{
label: 'Dataset',
data: [{
x: -40,
y: 34,
}, {
x: -10,
y: 45,
}, {
x: 140,
y: 45,
}],
fill: true,
stepped: true,
}]
},
options: {
responsive: true,
scales: {
x: {
suggestedMin: -50,
suggestedMax: 150,
ticks: {
callback: function(value, index, values) {
return value + ' °C';
}
},
},
y: {
suggestedMin: 32,
suggestedMax: 46,
ticks: {
callback: function(value, index, values) {
return value + ' bar';
}
},
}
},
plugins: {
legend: {
display: false
}
}
}
});
Fiddle: https://jsfiddle.net/o6b97xL2
But I don't like to have static periodical grid lines and labels but only on my three data points.
With callbacks I only get the defined steps from the grid. How can I achieve something like this:
Image Link (You need at least 10 reputation to post images)
You can define afterBuildTicks callbacks on both axes. In there, you replace the axis ticks with your own ticks extracted from your data.
Please take a look at your amended code and see how it works.
const data = [
{ x: -40, y: 34 },
{ x: -10, y: 45 },
{ x: 140, y: 45 }
];
myChart = new Chart('myChartChart', {
type: 'scatter',
data: {
datasets: [{
label: 'Dataset',
data: data,
fill: true,
stepped: true,
}]
},
options: {
responsive: true,
scales: {
x: {
suggestedMin: -50,
suggestedMax: 150,
afterBuildTicks: axis => axis.ticks = data.map(v => ({ value: v.x })),
ticks: {
callback: v => v + ' °C'
}
},
y: {
suggestedMin: 32,
suggestedMax: 46,
afterBuildTicks: axis => axis.ticks = data.map(v => ({ value: v.y })),
ticks: {
callback: v => v + ' bar'
}
}
},
plugins: {
legend: {
display: false
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
<canvas id="myChartChart"></canvas>
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
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 am trying to draw a chart as below but the x axis stops at end of year 11 which it does not at the moment. I set max to 19 but it did not work.How can I get rid of those grey lines after end of Year 11?
Also for x-axis labels I want to decrease the font size of second category ([1,2,3,4]) and Year with bigger font but in label styles the font size property applies to all labels.
var l=19;
var m=-0.6;
new Highcharts.Chart({
chart: {
renderTo: elementId,
spacingLeft: 10,
spacingRight: 10
},
title: {
text: subject
},
xAxis: {
categories: [{
name: "Year 7",
categories: [1, 2, 3, 4]
}, {
name: "Year 8",
categories: [1, 2, 3, 4]
}, {
name: "Year 9",
categories: [1, 2, 3, 4]
}, {
name: "Year 10",
categories: [1, 2, 3, 4]
}, {
name: "Year 11",
categories: [1, 2, 3, 4]
}],
labels: {
style: {
fontSize: '7.5px'
}
},
plotLines: [{
color: '#5DA06E',
width: 2,
value: l
}, {
color: '#5DA06E',
width: 2,
value: -1
}],
//max: l
},
yAxis: [{
labels: {
enabled: false
},
title: {
text: null
},
min: 0,
max: 1000
},
{
title: {
text: null
},
labels: {
style: {
fontSize: '7.5 px'
},
align: 'left',
x: 3,
formatter: function () {
var value = change[this.value];
return value !== 'undefined' ? value : this.value;
}
},
tickPositions: [0, 280, 360, 440, 520, 600, 680, 760, 840, 920, 1000],
gridLineColor: 'white',
opposite: true,
min: 0,
max: 1000
}],
series: [{
type: 'line',
data: [[m, 0], [l, 280]],
color: '#A5DEC1',
}, {
type: 'line',
data: [[m, 80], [l, 360]],
color: '#94D0A3',
},
...
strong text
Are m and l params constant? Or can you change them? If yes, then see: http://jsfiddle.net/TFhd7/373/
In short: Categories reserves a place from -0.5 to 0.5 with category index. For example Year7 -> 4 means x-values from 3.5 to 4.5. So according to this information let's change that values:
var l = 19.5;
var m = -0.5;
Now modify extremes and plotLines:
plotLines: [{
color: '#5DA06E',
width: 2,
value: l
}, {
color: '#5DA06E',
width: 2,
value: m
}],
max: l - 0.5,
min: m + 0.5,
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.