When I create simple line plot/chart using Apache Echarts I also can add built-in data scaling mechanism: dataZoom. It reaches its main goal, but there is a question to scaled data representation, made by dataZoom. By default, dataZoom doesn't take into account the chart scale limits ticks or/and the minimum and maximum allowable values (range of a function, represented by the plot). Instead, the thumbnail of the chart is drawn on the specific value range passed to the plot in series section. In addition, everytime a small indent is added from the minimum and maximum values to the borders of the graphic element.
As a result, the representation of the visualised data looks inconsistent with reality: null is not null, max is not max (because they don't match the lower and higher bounds of the coordinate area of the thumbnail plot, respectively), the amplitude of the chart fluctuations does not correspond to the scale of real data fluctuations.
Screenshot
Is there a way (documented or undocumented) to remove the indents and force the plot to use the minimum and maximum values allowed for the yAxis ticks?
I drawn a small example, it may be pasted to Echarts online editor.
let x = [];
let y = [];
let scaled = [];
/*y = [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 300, 300,
10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 0, 0, 0, 0, 0, 0
];*/
for (let i = 1; i < 300; i++) {
x.push(i);
element = Math.random() * 40 + 50;
y.push(element);
scaled.push(element * 6 - 250);
}
option = {
xAxis: {
data: x
},
yAxis: {
min: 0,
max: 300
},
dataZoom: [
{
start: 50,
end: 58.5
}
],
series: [
{
name: 'Fake Data',
type: 'line',
symbol: 'none',
data: y
},
{
name: 'Simulated Scaling',
type: 'line',
symbol: 'none',
lineStyle: {
opacity: 0.3
},
data: scaled
}
]
};
As you can see, the magnitude of the fluctuations of the graph, drawn by dataZoom doesn't correspond rather to the main data, but to some kind of artificial transformation of them (light green graph). Then try to comment 11st line and uncomment lines from 4 to 7. At the start of the plot you'll see main graph touching y zero line, but not on the thumbnail.
I didn't find any params for dataZoom that make them to look like expected.
In my chart I have these time stamp that are displayed on the x-axis
How do I make them display in the tooltip when I hover over to certain point in the chart?
Highcharts.chart('container', {
...
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
},
});
Can someone please help as I am not able to figure this out?
You can use the same approach in pointFormatter as in the labels formatter function.
tooltip: {
pointFormatter: function(){
let t = new Date(1900, 1, 1, 9, 30, 0);
t.setSeconds(t.getSeconds() + this.x * 5);
return `
Time: ${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}
Y: ${this.y}
Value: ${this.value}
`
}
}
Live demo: https://jsfiddle.net/BlackLabel/jf9x8y3q/
API Reference: https://api.highcharts.com/highcharts/tooltip.pointFormatter
The Highcharts API has a pointFormat property for tooltips, where you can specify the HTML (e.g. <p>Tooltip data: {variable}</p>). You can find the API reference here: https://api.highcharts.com/highcharts/tooltip.pointFormat
Or you could use pointFormatter to specify a callback function instead (https://api.highcharts.com/highcharts/tooltip.pointFormatter).
How can I get width parent element or default chart element when I define the chart for calculated x max in xAxis?
This is my expected code:
xAxis: {
max: data.length < this.parent.width / 32 ? data.length - 1 : this.parent.width / 32,
min: 0,
categories: data,
labels: {
rotation: -40,
style: {
color: '#eb9123'
},
}
},
If you want to know what is the width of the div container where the chart belongs, then you can achieve it by chart.chartWidth. Also, you can update the axis on load event.
chart: {
events: {
load: function () {
var width = this.chartWidth / 32,
dataLen = this.series[0].data.length,
max = dataLen < width ? dataLen - 1 : width;
console.log(max);
this.xAxis[0].update({
max: max
});
}
}
},
example: http://jsfiddle.net/91zbg0dx/
If you want to have that ability responsive, you have to do the same on redraw event.
I have a chart who's data is loaded from a SQL database, the chart MAY contain duplicate values for the same x value.
i.e. X(time) value at time 55 seconds may have a temperature value of: 50, 51, 49, 52, stored on different rows.
I implemented the errorbars in order to represent those discrepancies to the user since multiple y values per x point is not possible for the same series.
The result csv data prior to plotting is [49, 50, 52]... this has been tested and works great, however once I got this working now all of my graphs y-axis begin at value 0 (instead of 49 in this case).
Is there any way to automate the minimum y value to simply be the minimum y value generated, i.e. 49? as it is done without error bars? or will this have to be hard coded?
I am currently implementing a draw point callback function, I could incorporate a way to extract the minimum y-value to set my limits there if there is no already implemented way.
//EDIT Added code and pictures....
function createDyGraph(newChart) {
"use strict";
var min = 100000000; //value way over possible range of data
newChart.dyGraph = new Dygraph(
document.getElementById(newChart.chartGraphID),
newChart.csvData,
{
drawPointCallback: function (g, seriesName, canvasContext, cx, cy,
seriesColor, pointSize, row) {
var col = g.indexFromSetName(seriesName),
val = parseInt(g.getValue(row, col).toString().replace(/,/g, ""), 10),
color = '';
if (newChart.erroneousData[row]) {
color = 'red';
} else {
color = newChart.colors[col - 1];
}
if (val < min) {
min = val;
}
if (color === 'red') {
canvasContext.beginPath();
canvasContext.strokeStyle = 'red';
canvasContext.arc(cx, cy, pointSize, 0, 2 * Math.PI, false);
canvasContext.stroke();
} else {
canvasContext.beginPath();
canvasContext.strokeStyle = seriesColor;
canvasContext.arc(cx, cy, pointSize, 0, 2 * Math.PI, false);
canvasContext.stroke();
}
},
customBars: true,
colors: newChart.colors,
animatedZooms: true,
connectSeparatedPoints: true,
showLabelsOnHighlight: true,
ylabel: 'Count / Value',
xlabel: 'Time (Seconds)',
drawPoints: true,
pointSize: 1,
labels: newChart.labels,
labelsDiv: document.getElementById('legend' + chartIndex),
legend: 'always'
}
);
alert(min);
}
//EDIT: Added JSON Data
[["2014-02-06T16:30:00.000Z",[null,2739,null],[null,1786,null],[null,3680.1204,null],[null,2390.9182,null]],
["2014-02-06T16:30:01.000Z",[null,2739,null],[null,1786,null],[null,3680.1204,null],[null,2390.9182,null]],
["2014-02-06T16:30:02.000Z",[null,2739,null],[null,1786,null],[null,3680.1204,null],[null,2390.9182,null]],
["2014-02-06T16:30:03.000Z",[null,2739,null],[null,1786,null],[null,3680.1204,null],[null,2390.9182,null]],
["2014-02-06T16:30:04.000Z",[null,2739,null],[null,1786,null],[null,3680.1204,null],[null,2390.9182,null]],
["2014-02-06T16:30:05.000Z",[null,2739,null],[null,1786,null],[null,3680.1204,null],[null,2390.9182,null]],
["2014-02-06T16:30:06.000Z",[null,2739,null],[null,1786,null],[null,3680.1204,null],[null,2390.9182,null]],
...
["2014-02-06T16:30:59.000Z",[null,2740,null],[null,1787,null],[null,3681.464,null],[null,2392.2569,null]]]
Well I just figured it out... for customBars the CSV format should not be [null, Value, null] initially, but rather [value, value, value].
Consequently should you want to add min or max to that, the CSV will be updated as
[min, value, max]
series.addPoint (Object options, [Boolean redraw], [Boolean shift], [Mixed animation])
chart: {
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, false, true);
}, 1000);
}
}
},
xAxis: {
maxPadding: 1
}
I want to dynamically update data in a fix x-axis range such as 9:00 to 18:00,but when redrawing happened,the max value in x-axis will increase,how can i keep the value not changed?Just like a stock chart dynamically show the stock price.
(http://finance.yahoo.com/echarts?s=FB+Interactive#symbol=fb;range=1d;compare=;indicator=volume;charttype=area;crosshair=on;ohlcvalues=0;logscale=off;source=undefined;)
My code: http://jsfiddle.net/cruelcage/ny43Z/
can someone help me?
You can tell highcharts what the min and max values to plot on the y-axis:
yAxis: {
min:0,
max:1,
See the updated example http://jsfiddle.net/2ghdH/.
Yoo can do the same on the x-axis as well:
var end = (new Date()).getTime()+100000;
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxPadding :1.5,
max:end
},
http://jsfiddle.net/nV8cu/