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
}]
});
Related
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>
Can someone please take a look at my jsFiddle example and let me know why the colors on the heatmap chart don’t appear to scale with the values? There is some significant variation that I would expect to propagate into the chart.
Also, how can I adjust the tooltip so that the values for x,y are formatted in the same way as the axis values?
https://jsfiddle.net/samwhite/uadrecjg/
var data1 = Papa.parse(document.getElementById('data1').innerHTML);
var data2 = Papa.parse(document.getElementById('data2').innerHTML);
function convertDataFromCsv(data) {
var convData = [];
data.forEach(function(elem) {
convData.push({
x: parseFloat(elem[0]),
y: parseFloat(elem[1]),
z: parseInt(elem[2])
});
});
return convData;
}
Highcharts.chart('heatmap_container', {
chart: {
type: 'heatmap'
},
xAxis: {
labels: {
formatter: function() {
let seconds = this.value * 5;
let t = new Date(1900, 1, 1, 9, 30, 0);
t.setSeconds(t.getSeconds() + this.value * 5);
return `${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`
}
},
tickInterval: 2
},
yAxis: {
labels: {
formatter: function() {
return `${this.value/100}`;
}
}
},
legend: {
align: 'right',
margin: 0,
verticalAlign: 'middle',
symbolHeight: 300
},
colorAxis: [{
type: 'logarithmic',
reversed: false,
layout: 'vertical',
maxColor: '#d52120',
minColor: '#ffffff',
min: 1,
max: 100000,
}, {
type: 'logarithmic',
reversed: false,
layout: 'vertical',
maxColor: '#1d843d',
minColor: '#ffffff',
min: 1,
max: 100000,
}],
series: [{
nullColor: '#EFEFEF',
color:'#d52120',
data: convertDataFromCsv(data1.data),
turboThreshold: Number.MAX_VALUE
}, {
nullColor: '#EFEFEF',
color:'#1d843d',
data: convertDataFromCsv(data2.data),
turboThreshold: Number.MAX_VALUE
}, {
colorAxis: 1
}]
});
Current colors:
For example, I see the same red and green colors.
Desired colors:
The color green and red should go from light to dark to scale with the values as seen below
UPDATE:
This is how the chart looks like when importing the data from CSV files using the z value:
https://jsfiddle.net/samwhite/4w8r7chn/1/
Use value instead of z property:
function convertDataFromCsv(data) {
var convData = [];
data.forEach(function(elem) {
convData.push({
x: parseFloat(elem[0]),
y: parseFloat(elem[1]),
value: parseInt(elem[2])
});
});
return convData;
}
Live demo: https://jsfiddle.net/BlackLabel/rcaetjbw/
API Reference: https://api.highcharts.com/highcharts/series.heatmap.data
I am using Vue Js and Echarts library to build some graphs. I have a situation where I need to calculate the Standard Deviation and average for some data. The series are the average. I would like to add the error bar like the following screenshots to show the STD DEV in the graph.
Is there anyway to add the error bar to the Echart? I appreciate your effort and help !
Could this be what you want?
var categoryData = [];
var errorData = [];
var barData = [];
var dataCount = 50;
for (var i = 0; i < dataCount; i++) {
var val = Math.random() * 1000;
categoryData.push('category' + i);
errorData.push([
i,
echarts.number.round(Math.max(0, val - Math.random() * 100)),
echarts.number.round(val + Math.random() * 80)
]);
barData.push(echarts.number.round(val, 2));
}
function renderItem(params, api) {
var xValue = api.value(0);
var highPoint = api.coord([xValue, api.value(1)]);
var lowPoint = api.coord([xValue, api.value(2)]);
var halfWidth = api.size([1, 0])[0] * 0.1;
var style = api.style({
stroke: api.visual('color'),
fill: null
});
return {
type: 'group',
children: [{
type: 'line',
shape: {
x1: highPoint[0] - halfWidth, y1: highPoint[1],
x2: highPoint[0] + halfWidth, y2: highPoint[1]
},
style: style
}, {
type: 'line',
shape: {
x1: highPoint[0], y1: highPoint[1],
x2: lowPoint[0], y2: lowPoint[1]
},
style: style
}, {
type: 'line',
shape: {
x1: lowPoint[0] - halfWidth, y1: lowPoint[1],
x2: lowPoint[0] + halfWidth, y2: lowPoint[1]
},
style: style
}]
};
}
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
title: {
text: 'Avg/Error chart'
},
legend: {
data: ['avg', 'error']
},
dataZoom: [{
type: 'slider',
start: 50,
end: 70
}, {
type: 'inside',
start: 50,
end: 70
}],
xAxis: {
data: categoryData
},
yAxis: {},
series: [{
type: 'scatter',
name: 'avg',
data: barData,
itemStyle: {
color: '#77bef7'
}
}, {
type: 'custom',
name: 'error',
itemStyle: {
normal: {
borderWidth: 1.5
}
},
renderItem: renderItem,
encode: {
x: 0,
y: [1, 2]
},
data: errorData,
}]
};
reworked from here
I'm not sure I understood correctly but you need to add new series with error data and change symbol to circle. Something like this: https://echarts.apache.org/examples/en/editor.html?c=boxplot-light-velocity
How did you try to do this? Please show you code.
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/
I want to create a scater with datetime as the xAxis, I managed to do so but the x-interval is with days, I am having a hard time doing so where the x-interval is with minutes.
My JS:
function startDashboard3DScatter() {
$.getJSON('/Handlers/MainHandler.ashx?op=getNetwork', function (data) {
Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: {
cx: 0.4,
cy: 0.3,
r: 0.5
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
]
};
});
// Set up the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'networkAlerts',
margin: 100,
type: 'scatter',
width: 600,
height: 300,
options3d: {
enabled: true,
alpha: 10,
beta: 30,
depth: 250,
viewDistance: 5,
frame: {
bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },
back: { size: 1, color: 'rgba(0,0,0,0.04)' },
side: { size: 1, color: 'rgba(0,0,0,0.06)' }
}
}
},
title: {
text: 'Network'
},
plotOptions: {
scatter: {
width: 100,
height: 100,
depth: 20
},
series: {
marker: {
lineWidth: 1
}
}
},
yAxis: {
min: 0,
title: { text: 'Risk Score' }
},
xAxis: {
min: 0,
max: 6,
gridLineWidth: 1,
title: { text: 'Time line' },
labels: {
formatter: function () {
var date = new Date();
date.setDate(date.getDate() - this.value);
return date.toDateFormat();// this.value + ' %';
}
}
},
zAxis: {
min: 0,
max: 10
},
legend: {
enabled: false
},
series: data
});
});
};
My data response from the get request =
data =
[
{"name":"name1", "id":"D/1", "color": "#55BF3B", "data": [[6, 100]]},
{"name":"name2", "id":"D/5", "color": "#55BF3B", "data": [[3, 1]]}
]
The data is ['days before today, yValue']
So i have done this where i send the days before today and i format xAxis, the problem as i said is that the points are with 1day interval and i want to make it 1 minute or 1 hour interval.
Any ideas, I am stuck on this for days.
Ok the solution wasn't very hard after all:
Changed:
labels: {
formatter: function () {
var date = new Date(new Date().getTime() - (this.value * 60 * 60 * 1000));
return date.toDateFormat();
}
}
And in the Server code return the hours instead of days and it works.