How to keep side bars in Chartjs bar graph from clipping?

How to keep side bars in Chartjs bar graph from clipping? - javascript

I created a chartjs bar graph to represent a set of measurements over a 60 minute interval. I have managed to get the graph up and running but the end bars of it keep getting clipped. The code is here https://jsfiddle.net/bagelboy/yxs9tr5c/
//
var hourBarctx = document.getElementById("hourBarChart");
var hourBarChart = new Chart(hourBarctx, {
// type: 'line',
type: 'bar',
data: {
labels: [
// min: moment.unix(new Date(2018, 1, 0, 0, 0, 0).getTime() / 1000),
// max: moment.unix(new Date(2018, 1, 0, 0, 30, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 0, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 1, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 2, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 3, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 4, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 5, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 59, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 60, 0).getTime() / 1000),
],
datasets: [{
label: 'All Units',
data: [42, 43, 70, 89, 47, 42, 43, 70],
// backgroundColor: 'rgba(0, 0, 200, 0.1)',
backgroundColor: 'rgba(0, 99, 132, 0.6)',
borderColor: 'rgba(0, 99, 132, 1)',
// borderWidth: 0
borderWidth: 1,
},
{
label: 'TV',
data: [],
backgroundColor: 'rgba(76, 175, 80, 0.1)',
borderWidth: 1,
},
{
label: 'Light',
data: [],
backgroundColor: 'rgba(0, 175, 80, 0.1)',
borderWidth: 1,
},
{
label: 'AC',
data: [],
backgroundColor: 'rgba(76, 0, 80, 0.1)',
borderWidth: 1,
}
]
},
options: {
tooltips: {
enabled: true,
callbacks: {
label: function(tooltipItem, data) {
var label = data.labels[tooltipItem.index];
var val = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
return label;
}
}
},
title: {
display: true,
text: 'Hour'
},
elements: {
},
scales: {
xAxes: [{
gridLines: {
offsetGridLines: true
},
categoryPercentage: 1.0,
barPercentage: 1.0,
type: "time",
stacked: true,
time: {
unit: 'minute',
unitStepSize: 1,
displayFormats: {
// day: 'MM/DD/YYYY hh:mm a X Z ',
minute: 'mm',
},
//new Date(year, month, day, hours, minutes, seconds, milliseconds)
min: moment.unix(new Date(2018, 1, 0, 0, 0, 0).getTime() / 1000),
max: moment.unix(new Date(2018, 1, 0, 0, 60, 0).getTime() / 1000),
}
}, ],
yAxes: [{
// barPercentage: 1,
// categoryPercentage: 1,
ticks: {
beginAtZero: true
}
}]
}
}
});
Anyone know how to keep the ends from being clipped like this?

I think it's the way you are trying to do the axis, its looking to show the values between 00-01, 01-02 etc, in the last data point your axis doesn't go to 1am, and the first data point is similar, i was able to fix it by changing:
min: moment.unix(new Date(2018, 1, 0, 0, 0, 0).getTime() / 1000),
max: moment.unix(new Date(2018, 1, 0, 0, 60, 0).getTime() / 1000),
to:
min: moment.unix(new Date(2018, 1, 0, 0, -1, 0).getTime() / 1000),
max: moment.unix(new Date(2018, 1, 0, 0, 61, 0).getTime() / 1000),
Might not be exactly what you want but in the fiddle (after adding moment.js as a dependency) it doesn't cut off your bars.
I haven't worked with time like this, but maybe the data supplied needs to be different to get it to work.

Related

Highchart x-range chart extending the data point without ending

I have an x-range highchart which is used to display an event timeline. I was able to make it work for events which has start and end date. But I have events that are not yet ended and for those I need to extend the data point of the chart without stopping like below. Green event hasn't finished yet.
Following is my existing code:
Highcharts.chart('container', {
chart: {
type: 'xrange',
height: 100
},
title: {
text: ''
},
xAxis: {
visible: true,
tickLength: 0,
lineWidth: 6,
lineColor: '#000',
labels: {
enabled: false
}
},
yAxis: {
visible: false
},
legend: {
enabled: false
},
series: [{
name: '',
borderRadius: 0,
pointPadding: 0,
borderWidth: 6,
groupPadding: 0,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
color: 'transparent',
borderColor: 'rgba(230, 141, 11, 0.5)'
}, {
x: Date.UTC(2014, 10, 26),
x2: Date.UTC(2014, 11, 5),
y: 0,
color: 'transparent',
borderColor: 'rgba(228, 53, 70, 0.5)'
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 10),
y: 0,
color: 'transparent',
borderColor: 'rgba(40, 167, 69, 0.5)'
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 12),
y: 0,
color: 'transparent',
borderColor: 'rgba(40, 147, 164, 0.5)'
}],
dataLabels: {
enabled: false
}
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<div id="container"></div>
I tried putting Date.UTC(0, 0, 0) for the x2 but it didn't work as expected. Is this possible with xrange charts in highcharts. Thanks in advance!

You can set the x2 value to a later date than xAxis.max:
xAxis: {
...,
max: Date.UTC(2014, 11, 5)
},
...,
series: [{
data: [{
x: Date.UTC(2014, 10, 26),
x2: Date.UTC(2014, 11, 15),
...
}],
...
}]
Live demo: http://jsfiddle.net/BlackLabel/9f6Lejbs/
API Reference: https://api.highcharts.com/highcharts/xAxis.max

Chart.js Dynamically Updating Chart with X Axis Time

I'm using Chart.js version 2.7.1 and I am dynamically updating my Line chart when temperature data comes in.
The problem is that the lines never pass the halfway mark of the x axis in time. Every time I update, the chart auto scales the right side ( max time ) of the x axis to be further out, so my data never approaches the right side of the chart. What I want is for the line to approach the right side, and only a small margin of time is extended into the future for the x-axis each time I update. How can I accomplish this?
Here is how I configure the chart:
var ctx = document.getElementById('tempChart').getContext('2d');
ctx.canvas.width = 320;
ctx.canvas.height = 240;
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
legend: {
display: true
},
datasets: [{
fill: false,
data: [],
label: 'Hot Temperature',
backgroundColor: "#FF2D00",
borderColor: "#FF2D00",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
},
{
fill: false,
data: [],
label: 'Cold Temperature',
backgroundColor: "#0027FF",
borderColor: "#0027FF",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
}]
},
options: {
animation: false,
responsive: true,
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time ( UTC )'
},
type: 'time',
time: {
tooltipFormat: "hh:mm:ss",
displayFormats: {
hour: 'MMM D, hh:mm:ss'
}
},
ticks: {
maxRotation: 90,
minRotation: 90
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Temperature ( Celcius )'
},
}]
}
}
});
Here is the chart:

as you can see in the following snippet and thanks also to Daniel W Strimpel for creating the initial snippet, you problem is in the hot and cold temperature data.
{ x: new Date(2019, 0, 1, 14, 1, 19, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 20, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 21, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 22, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 23, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 24, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 25, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 26, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 27, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 28, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 29, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 30, 0) }
both of those arrays have n number of entries in the end missing the y coordinate including the temperature value. I recreated your scenario by deleting the y for the 5 last entries of the cold and hot temperatures data.
The chart will add the date to the x axis, but it will not add a temperature value and the line will not show up.
{x: new Data(2019, 0, 14, 1, 26, 0) }
The code snippet recreates your scenario, you can run it to understand the problem and fix it by adding the y value to the last 5 entries in the getHotTempData and getColdTempData
var ctx = document.getElementById('tempChart').getContext('2d');
ctx.canvas.width = 320;
ctx.canvas.height = 240;
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
legend: {
display: true
},
datasets: [{
fill: false,
data: getHotTempData(),
label: 'Hot Temperature',
backgroundColor: "#FF2D00",
borderColor: "#FF2D00",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
},
{
fill: false,
data: getColdTempData(),
label: 'Cold Temperature',
backgroundColor: "#0027FF",
borderColor: "#0027FF",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
}]
},
options: {
animation: false,
responsive: true,
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time ( UTC )'
},
type: 'time',
time: {
tooltipFormat: "hh:mm:ss",
displayFormats: {
hour: 'MMM D, hh:mm:ss'
}
},
ticks: {
maxRotation: 90,
minRotation: 90
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Temperature ( Celcius )'
},
}]
}
}
});
function getHotTempData() {
return [
{ x: new Date(2019, 0, 1, 14, 1, 19, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 20, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 21, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 22, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 23, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 24, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 25, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 26, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 27, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 28, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 29, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 30, 0) }
];
}
function getColdTempData() {
return [
{ x: new Date(2019, 0, 1, 14, 1, 19, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 20, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 21, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 22, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 23, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 24, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 25, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 26, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 27, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 28, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 29, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 30, 0) }
];
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="tempChart"></canvas>

how to pass values to tooltip which not in x and y axis in highcharts

I need to display additional values on the tooltip: the name, the count and another value(android). I saw this in an Example I tried to create similar one but I could not result same
$(function() {
var hour = 3600 * 1000;
var options = {
chart: {
renderTo: 'container',
type: 'line',
options3d: {
enabled: true,
alpha: 0,
beta: 0,
depth: 0,
viewDistance: 25
}
},
title: {
text: ''
},
subtitle: {
text: ''
},
legend: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
labels: {
align: 'left',
style: {
color: '#423D3C',
fontWeight: 'normal',
fontFamily: 'Open Sans'
}
},
showLastLabel: false,
tickmarkPlacement: 'on',
tickPosition: 'inside',
tickWidth: 0,
tickPixelInterval: 60,
lineWidth: 2,
lineColor: '#423D3C',
maxPadding: 0,
minPadding: 0,
gridLineWidth: 0,
offset: 0,
startOnTick: true,
type: 'datetime',
dateTimeLabelFormats: {
day: '%H:%M'
},
endOnTick: true
},
yAxis: {
tickPositioner: function() {
var maxDeviation = Math.ceil(Math.max(Math.abs(this.dataMax), Math.abs(this.dataMin)));
var halfMaxDeviation = Math.ceil(maxDeviation / 2);
return [0, halfMaxDeviation, maxDeviation];
},
title: {
text: "user"
}
},
tooltip: {
backgroundColor: '#1B1A1A',
borderColor: '#1B1A1A',
crosshairs: true,
shadow: false,
style: {
color: 'white',
fontSize: '12px',
padding: '8px'
},
enabled: true,
crosshairs: false,
shared: false,
snap: 30,
formatter: function() {
var s = '<b>' + Highcharts.dateFormat('%H:%M',
new Date(this.x)) + '</b>';
$.each(this.points, function() {
s += '<br/>' + this.series.name + ': ' +
point.y + 'm' + '<br/>' + this.series.android + ': ' +
this.series.android + 'm';
console.log(this.series.android);
});
return s;
},
shared: true
},
plotOptions: {
line: {
//dashStyle: 'ShortDot',
lineWidth: 2
},
series: {
pointStart: 0 * hour,
pointInterval: hour,
},
dataGrouping: {
enabled: false
},
marker: {
enabled: false,
states: {
hover: {
enabled: true
}
},
symbol: 'circle'
},
},
series: [],
};
$.getJSON('data.json', function(list) {
var newseries;
$.each(list, function(i, item) {
newseries = {};
newseries.name = item.name;
newseries.data = item.data;
newseries.android = item.android;
options.series.push(newseries);
});
var chart = new Highcharts.Chart(options);
console.log(options.series);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width: 50%;min-width: 310px; height: 400px; margin: 0 auto"></div>
and my data.json has
[
{
"name":"Today",
"data":[17, 5, 27, 0, 28, 0, 27, 0, 25, 0, 27, 28, 26, 0, 0, 0, 60, 0, 46, 0, 0, 0, 0, 0],
"android":[0, 0, 13, 0, 14, 0, 8, 0, 12, 0, 20, 0, 22, 0, 17, 19, 0, 0, 0, 0, 0, 0, 20, 21],
"ios":[0, 0, 0, 0, 22, 20, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 36, 48, 0, 38, 30]
},
{
"name":"Yesterday",
"data":[0, 0, 0, 0, 22, 20, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 36, 48, 0, 38, 30],
"android":[17, 5, 27, 0, 28, 0, 27, 0, 25, 0, 27, 28, 26, 0, 0, 0, 60, 0, 46, 0, 0, 0, 0, 0],
"ios":[0, 0, 13, 0, 14, 0, 8, 0, 12, 0, 20, 0, 22, 0, 17, 19, 0, 0, 0, 0, 0, 0, 20, 21]
},
{
"name":"Week_ago",
"data":[0, 0, 13, 0, 14, 0, 8, 0, 12, 0, 20, 0, 22, 0, 17, 19, 0, 0, 0, 0, 0, 0, 20, 21],
"android":[0, 0, 0, 0, 22, 20, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 36, 48, 0, 38, 30],
"ios":[17, 5, 27, 0, 28, 0, 27, 0, 25, 0, 27, 28, 26, 0, 0, 0, 60, 0, 46, 0, 0, 0, 0, 0]
}
]
my result is like
my expected tooltip
I need values in tooltip I don't know why it results in undefined value but in console.log has a value of android also, but when I do console.log(this.series.android) am getting undefined for android values.
Am new to high charts any help would be appreciated
Thanks in advance

Here modified_data is the data object containing additional data need for displaying exta information in tooltip
var newseries;
$.each(jsond, function(i, item) {
var modified_data = [];
$.each(item.data, function(j) {
modified_data.push({
y: item.data[j],
android: item.android[j]
})
})
newseries = {};
newseries.name = item.name;
newseries.data = modified_data;
//newseries.android = item.android;
options.series.push(newseries);
});
Tooltip formatter
formatter: function() {
var s = '<b>' + Highcharts.dateFormat('%H:%M',
new Date(this.x)) + '</b>';
$.each(this.points, function() {
//console.log(this)
s += '<br/>' + this.series.name + ': ' +
this.y + 'm' + '<br/>' + 'Android' + ': ' +
this.point.android + 'm';
});
return s;
},
Fiddle Snippet
$(function() {
var hour = 3600 * 1000;
var options = {
chart: {
renderTo: 'container',
type: 'line',
options3d: {
enabled: true,
alpha: 0,
beta: 0,
depth: 0,
viewDistance: 25
}
},
title: {
text: ''
},
subtitle: {
text: ''
},
legend: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
labels: {
align: 'left',
style: {
color: '#423D3C',
fontWeight: 'normal',
fontFamily: 'Open Sans'
}
},
showLastLabel: false,
tickmarkPlacement: 'on',
tickPosition: 'inside',
tickWidth: 0,
tickPixelInterval: 60,
lineWidth: 2,
lineColor: '#423D3C',
maxPadding: 0,
minPadding: 0,
gridLineWidth: 0,
offset: 0,
startOnTick: true,
type: 'datetime',
dateTimeLabelFormats: {
day: '%H:%M'
},
endOnTick: true
},
yAxis: {
tickPositioner: function() {
var maxDeviation = Math.ceil(Math.max(Math.abs(this.dataMax), Math.abs(this.dataMin)));
var halfMaxDeviation = Math.ceil(maxDeviation / 2);
return [0, halfMaxDeviation, maxDeviation];
},
title: {
text: "user"
}
},
tooltip: {
backgroundColor: '#1B1A1A',
borderColor: '#1B1A1A',
crosshairs: true,
shadow: false,
style: {
color: 'white',
fontSize: '12px',
padding: '8px'
},
enabled: true,
crosshairs: false,
shared: false,
snap: 30,
formatter: function() {
var s = '<b>' + Highcharts.dateFormat('%H:%M',
new Date(this.x)) + '</b>';
$.each(this.points, function() {
//console.log(this)
s += '<br/>' + this.series.name + ': ' +
this.y + 'm' + '<br/>' + 'Android' + ': ' +
this.point.android + 'm';
});
return s;
},
shared: true
},
plotOptions: {
line: {
//dashStyle: 'ShortDot',
lineWidth: 2
},
series: {
pointStart: 0 * hour,
pointInterval: hour,
},
dataGrouping: {
enabled: false
},
marker: {
enabled: false,
states: {
hover: {
enabled: true
}
},
symbol: 'circle'
},
},
series: [],
};
var jsond = [{
"name": "Today",
"data": [17, 5, 27, 0, 28, 0, 27, 0, 25, 0, 27, 28, 26, 0, 0, 0, 60, 0,
46, 0, 0, 0, 0, 0
],
"android": [0, 0, 13, 0, 14, 0, 8, 0, 12, 0, 20, 0, 22, 0, 17, 19, 0, 0,
0, 0, 0, 0, 20, 21
]
}, {
"name": "Yesterday",
"data": [0, 0, 0, 0, 22, 20, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 36,
48, 0, 38, 30
],
"android": [17, 5, 27, 0, 28, 0, 27, 0, 25, 0, 27, 28, 26, 0, 0, 0, 60, 0,
46, 0, 0, 0, 0, 0
]
}, {
"name": "Week_ago",
"data": [0, 0, 13, 0, 14, 0, 8, 0, 12, 0, 20, 0, 22, 0, 17, 19, 0, 0, 0,
0, 0, 0, 20, 21
],
"android": [0, 0, 0, 0, 22, 20, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 36,
48, 0, 38, 30
]
}]
//$.getJSON('data.json', function(list) {
var newseries;
$.each(jsond, function(i, item) {
var modified_data = [];
$.each(item.data, function(j) {
modified_data.push({
y: item.data[j],
android: item.android[j]
})
})
newseries = {};
newseries.name = item.name;
newseries.data = modified_data;
//newseries.android = item.android;
options.series.push(newseries);
});
var chart = new Highcharts.Chart(options);
//console.log( options.series);
});
//});
/*
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width: 50%;min-width: 310px; height: 400px; margin: 0 auto"></div>

It is the problem with your data.json file. Check the highcharts documentation. Change your value in the formats mentioned in documentation. For eg:
[
{
"name":"Today",
"data":[[17,0],[5,0], [27,13], [0,0], [28,14], [0,0], [27,8], [0,0], [25,12], [0,0], [27,20], [28,0], [26,22], [0,0], [0,17], [0,19], [60,0], [0,0], [46,0], [0,0], [0,0], [0,0], [0,20], [0,21]]
}
]
and change the tooltip formatter function according to this.

Highcharts 24 hours displayed on x axis

I would like to show 24 hour days going across the Highcharts chart with 1 hour intervals on the x axis and 7 days on the y axis.
How do I get the chart to start at midnight and run for 24 hours across?
As you can see below the chart is currently starting at 8:00am and going until 3:00pm. Instead we would like it to start at 12:00am and end at 11:59pm.
$('#graph').highcharts({
exporting: { enabled: false },
chart: {
type: 'columnrange',
inverted: true
},
title: {
text:''
},
yAxis: {
type: 'datetime',
tickAmount: 24,
tickInterval: 3600 * 1000,
minTickInterval: 3600 * 1000,
lineWidth: 1,
dateTimeLabelFormats: {
day: '%H:%M'
},
title: {
enabled: false
}
},
xAxis: {
categories: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
},
legend: {
enabled: false
},
plotOptions: {
series: {
pointWidth: 10,
}
},
series: [{
data: [
{
x: 0,
low: Date.UTC(2010, 1, 1, 9, 0, 0),
high: Date.UTC(2010, 1, 1, 12, 0, 0),
color: 'blue'
}, {
x: 0,
low: Date.UTC(2010, 1, 1, 12, 30, 0),
high: Date.UTC(2010, 1, 1, 14, 0, 0),
color: 'blue'
},
{
x: 1,
low: Date.UTC(2010, 1, 2, 9, 0, 0),
high: Date.UTC(2010, 1, 2, 12, 0, 0),
color: 'blue'
},
{
x: 2,
low: Date.UTC(2010, 1, 3, 9, 0, 0),
high: Date.UTC(2010, 1, 3, 12, 0, 0),
color: 'blue'
},
{
x: 3,
low: Date.UTC(2010, 1, 4, 9, 0, 0),
high: Date.UTC(2010, 1, 4, 12, 0, 0),
color: 'blue'
},
{
x: 4,
low: Date.UTC(2010, 1, 5, 9, 0, 0),
high: Date.UTC(2010, 1, 5, 12, 0, 0),
color: 'blue'
},
{
x: 5,
low: Date.UTC(2010, 1, 6, 9, 0, 0),
high: Date.UTC(2010, 1, 6, 12, 0, 0),
color: 'blue'
},
{
x: 6,
low: Date.UTC(2010, 1, 7, 9, 0, 0),
high: Date.UTC(2010, 1, 7, 12, 0, 0),
color: 'blue'
},
]
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="graph"></div>
----------------EDIT----------------
I updated the data to replicate what we actually want. The output is working but "broken". We would like the graph to look like the picture.

You can use yAxis.min and yAxis.max for setting the min and max values of your axis. You can use tickPositioner for setting the positions of your labels on axis:
http://api.highcharts.com/highcharts/yAxis.tickPositioner
yAxis: {
min: Date.UTC(2010, 0, 1, 0, 0, 0),
max: Date.UTC(2010, 0, 2, 0, 0, 0),
type: 'datetime',
tickPositioner: function() {
var info = this.tickPositions.info;
var positions = [];
for (i = Date.UTC(2010, 0, 1, 0, 0, 0); i <= Date.UTC(2010, 0, 2, 0, 0, 0); i += 3600 * 1000) {
positions.push(i);
}
positions.info = info;
return positions;
},
lineWidth: 1,
dateTimeLabelFormats: {
day: '%H:%M'
},
title: {
enabled: false
}
},
Here you can see an example how it can work:
http://jsfiddle.net/1yccghgy/1/

how to change size of grid layout cells using flot

I want to change size of grid layout cells. But when i find API of jquery flot, i didn't find any method which use to change size of grid layout cells.
This is image which i want to change size of grid layout cells (horizontal + vertical) to bigger. How can i do this ?
Thanks in advance.
Here is my code:
let options_hour = {
series: {
lines: {
show: true,
lineWidth: 1.2
}
},
grid: {
backgroundColor: "#ffffff",
borderWidth: {
top: 1,
right: 1,
bottom: 1,
left: 1
},
highlightColor: "#FF0000"
},
xaxis: {
mode: "time",
timezone: "browser",
show: true,
ticks: 9,
tickColor: "#000000",
min: initialize_hour - 3600000 * 6,
max: initialize_hour - 600000,
ticks: [
initialize_hour - 3600000 * 6,
initialize_hour - 3600000 * 5,
initialize_hour - 3600000 * 4,
initialize_hour - 3600000 * 3,
initialize_hour - 3600000 * 2,
initialize_hour - 3600000 * 1,
initialize_hour - 600000
],
font: {
size: 9,
color: "#980000"
},
timeformat: "%H:%M"
},
yaxis: {
font: {
size: 9,
color: "#980000"
},
min: 0,
ticks: [
[0, '0'],
[2.25, 'NNW'],
[4.5, 'NW'],
[6.75, 'WNW'],
[9, 'W'],
[11.25, 'WSW'],
[13.5, 'SW'],
[15.75, 'SSW'],
[18, 'S'],
[20.25, 'SSE'],
[22.5, 'SE'],
[24.75, 'ESE'],
[27, 'E'],
[29.25, 'ENE'],
[31.5, 'NE'],
[33.75, 'NNE'],
[36, 'N']
],
tickColor: "#000000"
}
};

Develop Reference

JavaScript is the programming language of the Web.

How to keep side bars in Chartjs bar graph from clipping? - javascript

Related

Highchart x-range chart extending the data point without ending

Chart.js Dynamically Updating Chart with X Axis Time

how to pass values to tooltip which not in x and y axis in highcharts

Highcharts 24 hours displayed on x axis

how to change size of grid layout cells using flot

Categories

Resources