Need to create a motion High Chart, i have made a fiddle to explain what i have done yet.
But need to make work the motion play button which is not working, motion will work on clicking the button and it will change the boxes color depends on the random value, motion bar will be of time frame.
https://jsfiddle.net/4aqhB/981/
Motion and series calls :
motion: {
enabled: true,
axisLabel: 'year',
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
series: [0],
// The series which holds points to update
updateInterval: 1,
magnet: {
type: 'both', // thumb / point / both
round: 'floor', // ceil / floor / round
smoothThumb: true, // defaults to true
step: 0.01
}
},
series: [{
name: 'Heat Map',
borderWidth: 1,
data: [[0,0,10],[1,0,5],[2,0,3]],
}]
A heatmap point has structure like this:
{
x: Number
y: Number
value: Number
...
}
Additionally, for the motion plugin the point requires sequence property which is an array of heatmap points - it might be a partial object - if you want to update the point's value (color on heatmap) then the point in the sequence should be like this:
{ value: Number }
Example of the series:
series: [{
name: 'Heat Map',
borderWidth: 1,
data: [{
x: 0,
y: 0,
sequence: [{
value: 10
}, {
value: Math.random() * 10
}, {
value: Math.random() * 10
}]
}, {
x: 1,
y: 0,
sequence: [{
value: 5
}, {
value: Math.random() * 5
}, {
value: Math.random() * 5
}]
}, {
x: 2,
y: 0,
sequence: [{
value: 3
}, {
value: Math.random() * 3
}, {
value: Math.random() * 3
}]
}]
}]
example: https://jsfiddle.net/k4d8okt8/
Related
I've got a Gantt chart:
And I want to use the series.gantt.custom object to set specific properties for each series on the yAxis.
From these properties I want to construct the yAxis labels.
My code:
Highcharts.ganttChart('container', {
yAxis: {
categories: ['1', '2'],
labels: {
formatter() {
return this.value
/* + this.chart.series[this.pos].custom.size */
},
}
},
series: [{
groupPadding: 1,
custom: {
size: "small",
},
type: 'line',
zoneAxis: 'x',
data: [{
y: 0,
x: Date.UTC(2022, 10, 18),
custom: {
label: 1,
}
}, {
y: 0,
x: Date.UTC(2022, 10, 25, 12),
custom: {
label: 2
}
}]
}, {
type: 'line',
zoneAxis: 'x',
custom: {
size: "large",
},
data: [{
y: 1,
x: Date.UTC(2022, 10, 18),
custom: {
label: 1
}
}, {
y: 1,
x: Date.UTC(2022, 10, 25, 12),
custom: {
label: 2
}
}]
}]
});
this.chart.series[this.pos].custom.size it's the bit that is not working.
The labels should be 1 small and 2 large.
A fiddle
You can reach this property through the series.options:
this.chart.series[this.pos].options.custom.size
Demo:
https://jsfiddle.net/BlackLabel/gLkn9uqf/
I have 2 set of datasets I want to display in single line chart for last 7 days, and if possible only show single Y axis with max value from all data sets. I try to use time as xAxes but it is not showing up.
here is my code https://jsfiddle.net/e6trkxL0/
You have to place the labels for datapoints.
let start = new Date(),
end = new Date();
start.setDate(start.getDate() - 7); // set to 'now' minus 7 days.
start.setHours(0, 0, 0, 0); // set to midnight.
let chart = new Chart(document.getElementById("lastSevenDaysOverview"), {
type: "line",
data: {
labels: [],
datasets: [{
label: 'Dataset 1',
data: [1, 4, 66, 7, 12, 3, 8],
borderColor: '#ff3366',
backgroundColor: '#ff3366',
},
{
label: 'Dataset 2',
data: [31, 14, 6, 71, 1, 35, 9],
borderColor: '#880000',
backgroundColor: '#880000',
}
]
},
options: {
interaction: {
mode: 'index',
intersect: true,
},
stacked: false,
responsive: true,
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
},
xAxes: [{
type: "time",
// this is not doing much
// time: {
// min: start,
// max: end,
// unit: "day"
//}
}]
}
}
});
chart.render();
for (let i = 0; i < 7; i++) {
var labelDate = start;
labelDate.setDate(start.getDate() + 1);
chart.data.labels.push(labelDate.toLocaleString())
}
chart.update();
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="lastSevenDaysOverview"></canvas>
2 things, for a time axis in chart.js you need according to the documentation a time adapter. Also you defined you x axis scales as a array which is incorrect. You need to define all scales as an object where the key of the object is the scale ID, you can read more about it in the migration guide
For points to be mapped in the chart you also need to provide a x place which in this case needs to be the date for which the datapoint is valid.
To just show a single axis with the highest values you can let both datasets be mapped to the same y axis:
let start = new Date(),
end = new Date();
start.setDate(start.getDate() - 7); // set to 'now' minus 7 days.
start.setHours(0, 0, 0, 0); // set to midnight.
new Chart(document.getElementById("lastSevenDaysOverview"), {
type: "line",
data: {
datasets: [{
label: 'Dataset 1',
data: [{
x: new Date('10-16-2021'),
y: 1
}, {
x: new Date('10-18-2021'),
y: 4
}, {
x: new Date('10-19-2021'),
y: 66
}],
borderColor: '#ff3366',
backgroundColor: '#ff3366',
},
{
label: 'Dataset 2',
data: [{
x: new Date('10-14-2021'),
y: 31
}, {
x: new Date('10-18-2021'),
y: 14
}, {
x: new Date('10-19-2021'),
y: 6
}],
borderColor: '#880000',
backgroundColor: '#880000'
}
]
},
options: {
interaction: {
mode: 'index',
intersect: true,
},
responsive: true,
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
},
x: {
type: "time",
min: start,
max: end,
time: {
unit: "day"
}
}
},
}
});
<canvas id="lastSevenDaysOverview"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
I'm trying to make a histogram using highcharts, but the data is being bucketed by the server so as far as I can tell, I can't use the histogram chart type.
Here's my chart:
Highcharts.chart('container', {
credits: {
enabled: false
},
title: {
text: null
},
xAxis: {
type: 'category',
labels: {
rotation: -45
}
},
series: [
{
type: 'variwide',
showInLegend: false,
data: [
{ name: '0.00 - 10.10', y: 13, z: 1260000 },
{ name: '10.10 - 34.14', y: 10, z: 3000000 },
{ name: '34.14 - 54.56', y: 9, z: 2550000 },
{ name: '54.56 - 71.43', y: 15, z: 2110000 },
{ name: '71.43 - 102.09', y: 4.6, z: 3830000 },
{ name: '102.09 - 161.56', y: 1.8, z: 7430000 },
{ name: '161.56 - 217.26', y: 5.7, z: 6960000 },
{ name: '217.26 - 301.65', y: 0.7, z: 10550000 },
{ name: '301.65 - 382.82', y: 2.8, z: 10150000 },
{ name: '382.82 - 874.80', y: 0.2, z: 61500000 }
]
}
]
});
#container {
max-width: 800px;
min-width: 380px;
margin: 0 auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/variwide.js"></script>
<div id="container"></div>
As you can see, the labels look pretty bad.
Two solutions, neither of which I can work out how to do:
Rename the points (I can do this) and move them to the right so that they're under the ticks
Better solution: make the x axis linear and have the labels appear in natural places like they would usually on a linear graph, similar to https://www.highcharts.com/demo/histogram . Changing the axis to linear seems to mess everything up on a variwide chart, though…
Any ideas?
Variwide series doesn't support non categorized x axis. It's reported as an issue on github: https://github.com/highcharts/highcharts/issues/7359
Workaround:
Variwide can be simulated by using column series.
Create a separate series for each point and link them together by putting linkedTo: ':previous' in each of them (except of the first one). Then set pointRange for every series. pointRange is series' property and cannot be assigned to individual points - that's why separate series has to be crated for each point.
series: [{
data: [
[5, 99]
],
pointRange: 2
}, {
linkedTo: ':previous',
data: [
[7.5, 72]
],
pointRange: 3
}, {
linkedTo: ':previous',
data: [
[14, 111]
],
pointRange: 10
}]
x position of the point indicates the middle of the column. So if the x = 5 and pointRange = 2 then the column will span from 4 to 6.
Unfortunately Highcharts doesn't handle extremes well while using multiple values of pointRange. Setting x axis minimum fixes it:
xAxis: {
min: 9, // 4 (axis' minimum) + 10 (max point range) / 2 = 9
},
These plotOptions are required to achieve proper widths of columns:
grouping: false,
groupPadding: 0,
pointPadding: 0,
Live demo: http://jsfiddle.net/BlackLabel/27gr3wh8/
API reference: https://api.highcharts.com/highcharts/
How can I pass a third value (e.g. ID number) in a Highcharts time series so that I can open a new window based on it on marker click? JsFiddle here.
I'm familiar with this method for a simple chart with categories, but not for a time series.
Typically, a Highcharts time series accepts a series of arrays like [1401285311000,1], which can be read in a click event with event.point.options.x and event.point.options.y.
Is there a way to add an idto each point, and then read it in a point's click event callback? I've tried passing it as a third value (Highcharts ignores it completely), or putting it under id after the two values ([1401285311000, 1, id: {1}]) which breaks the chart.
Any ideas?
// Replacing ajax call with a simple array for simplicity's sake
var data = [{"name":"Value","unit":"","data":[[1401285311000,5, 1],[1401288036000,10, 2],[1401289436000,8, 3],[1401291099000,15, 4]]}, {"name":"Value 2","unit":"","data":[[1401285311000,10, 1],[1401288036000,12, 2],[1401289436000,5, 3],[1401291099000,9, 4]]}]
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: 'Time Series'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime',
minRange: 14 * 24 * 3600 // fourteen days
},
yAxis: {
title: {
text: ''
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
lineWidth: 3,
marker: {
fillColor: null,
lineWidth: 2,
lineColor: null, // inherit from series
},
events:{
click: function (event, i) {
console.log(event.point);
}
}
},
line: {
dataLabels:{
enabled: false
}
},
},
series: data
});
});
Just because it's time data doesn't mean you can't use point objects instead of arrays:
var data = [{
"name": "Value",
"unit": "",
"data": [
{x: 1401285311000, y: 5, id: 1},
{x: 1401288036000, y: 10, id: 2},
{x: 1401289436000, y: 8, id: 3},
{x: 1401291099000, y: 15, id: 4}
]
}, {
"name": "Value 2",
"unit": "",
"data": [
{x: 1401285311000, y: 10, id: 1},
{x: 1401288036000, y: 12, id: 2},
{x: 1401289436000, y: 5, id: 3},
{x: 1401291099000, y: 9, id: 4}
]
}];
Updated fiddle.
I would like to know if it is possible somehow to create vertical lines (plotLines) in the xAxis for a defined interval.
Here's an example of one of those plot lines for a given date. Would it be possible to define it for a given interval?
xAxis: {
tickInterval: 5 * 4 * 1000,
lineColor: '#FF0000',
lineWidth: 1,
plotLines: [{
value: Date.UTC(2014,03,05),
width: 1,
color: 'green',
dashStyle: 'dash',
}]
},
What you are looking for is a plotBand. This allows a range to be used. General usage is like:
xAxis: {
plotBands: [{ // mark the weekend
color: '#FCFFC5',
from: Date.UTC(2010, 0, 2),
to: Date.UTC(2010, 0, 4)
}],
...
EDIT - Based on clarification you can generate a series like so:
chart: {
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[1];
var Xmin = this.xAxis[0].min;
var Xmax = this.xAxis[0].max;
//console.log(Xmin);
//console.log(Xmax);
series.pointInterval = 24 * 3600 * 1000;
series.pointStart = Date.UTC(2011, 0, 01, 0, 0, 0, 0);
for (var i = Xmin; i < Xmax; i = i + (24 * 3600 * 1000)) {
var x = i,
y = 1;
series.addPoint([x, y], true);
}
}
}
},
You need to make that new series prior (but with no data):
series: [{
name: 'USD to EUR',
data: usdeur
}, {
name: 'Interval',
type: 'column',
data: []
}
Demo here. Doing this every second on that chart you are using is going to grind. Mine is doing it every day. Doing it every minute takes a long time. Note that I am only adding it to the viewable min/max on load. If you want it to span the entire chart you are going to have to define your own Xmin and Xmax.
In general, in Highcharts there's not such thing like range for plotLines. However you cna create simple function for that: http://jsfiddle.net/kZkWZ/57/
function generatePlotLines(from, to, interval) {
var plotLines = [];
while (from < to) {
from += interval;
plotLines.push({
value: from,
width: 1,
color: 'green',
dashStyle: 'dash',
label: {
text: 'some name',
align: 'right',
y: 122,
x: 0
}
})
}
return plotLines;
}
$('#container').highcharts('StockChart', {
xAxis: {
plotLines: generatePlotLines(Date.UTC(2011, 0, 1), Date.UTC(2011, 3, 1), 7 * 24 * 3600 * 1000)
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
});