I am building a vega chart. on the x-axis, I don't want to show 0 value on the axis.
Add the following config to scale(VEGA CHART):
Config: "nice": false,"zero": false
Example config:
"scales": [
{
"name": "y",
"nice": false,
"zero": false,
"padding": 15
}..]
Related
I am using live random data in my chart . Here i want to display current feed value in right side of chart which will travel along with chart's last point.
I am trying to display tootip in last point which series will added dynamically. But i am unable to add tootip to last point alone.
Can anyone help me to achieve this.
Here is jsfiddle and what i am trying is
To show a tooltip you could use toolip.refresh(point).
Example: http://jsfiddle.net/a6pshutt/7/
...
setInterval(function () {
var x = (new Date()).getTime(),
y = Math.random();
len = series.data.length;
series.addPoint([x,y], false, true);
series2.data[0].update([x,y]);
tooltip.refresh(series2.data[0]); // <----------here
}, 1000);
...
To show a dataLabel you could enable it for the scatter point in your scatter series.
Example: http://jsfiddle.net/83kp2d4t/
...
events: {
load: function () {
var tooltip = this.tooltip,
series = this.series[0],
len = series.data.length;
this.addSeries({
id: 'end point',
type: 'scatter',
marker: {
enabled:true,
symbol:'circle',
radius:4,
fillColor:'white',
lineColor: 'black',
lineWidth:2
},
dataLabels:{
enabled: true // <----------here
},
data: [[
series.data[len - 1].x,
series.data[len - 1].y
]]
});
...
I'm creating a multichart (line and column) and I need to format the tooltip value for only one of my series. The thing is: formatter doesn't seem to work inside series.
I have a point value like: 212575200
In tooltip it's being formatted into 2.125.752,00
But I need it to be formatted into: 2.1 M (for million)
(K for thousand, M for million, B for billion)
How can I format a tooltip value for only one of my series?
This is the code I'm using:
series : [{
name : ((tipoGrafico == 'line' || tipoGrafico == 'column')?'ult':' '),
data : dadosJson,
pointStart: dadosJson[0][0],
pointInterval: 24 * 3600 * 1000,
yAxis: 0, // Em qual grafico do eixo Y irão esses dados
tooltip: {
valueDecimals: CASAS_DECIMAIS,
}
},{
type: 'column',
name: nomeEstudo,
data: volume,
pointStart: dadosJson[0][0],
pointInterval: 24 * 3600 * 1000,
yAxis: 1,
tooltip: {
valueDecimals: ((nomeEstudo != "neg") ? CASAS_DECIMAIS : 0),
pointFormat: '<tspan style="color:{series.color}"> {series.name}: </tspan><tspan> ' + formatNumber(('{point.y}'/formataValores('{point.y}').divisor))+formataValores('{point.y}').letra + '</tspan>'
},
}],
Notice that I'm trying pointFormat, but It's returning a NaN from my other JS functions, because it can't figure out in time '{point.y}' is actually a Number, not a String.
In the formatter you can check which serie is displayed in the tooltip, then use condition (i.e based on the id of serie or name or index) and return content.
Following kind of function will help you:
tooltip:
{
formatter: function() {
for(var temp=0,tempLength = this.points.length;temp<tempLength; temp++)
{
//You will get the point value here by using following code
var Value = this.points[temp].y;
//Now you can apply any format to this value
}
}
}
Can I have a plot which is a combination of both ohlc and line plot without time range using Highcharts/Highstock?
You should use two series (first ohlc and second line).
http://jsfiddle.net/ZZAR5/1/
series: [{
type: 'ohlc',
data: [
[1147996800000, 63.26, 64.88, 62.82, 64.51],
[1148256000000, 63.87, 63.99, 62.77, 63.38],
[1148342400000, 64.86, 65.19, 63.00, 63.15],
[1148428800000, 62.99, 63.65, 61.56, 63.34],
[1148515200000, 64.26, 64.45, 63.29, 64.33],
[1148601600000, 64.31, 64.56, 63.14, 63.55],
[1148947200000, 63.29, 63.30, 61.22, 61.22],
[1149033600000, 61.76, 61.79, 58.69, 59.77]
]
}, {
type: 'line',
data: [
[1147996800000, 63.26],
[1148256000000, 63.87],
[1148342400000, 64.86],
[1148428800000, 62.99],
[1148515200000, 64.26],
[1148601600000, 64.31],
[1148947200000, 63.29],
[1149033600000, 61.76]
]
}]
Disabling navigator: http://api.highcharts.com/highstock#navigator.enabled
rangeselector: http://api.highcharts.com/highstock#rangeSelector.enabled
I need change first tick label on yAxis. I changed the minimum value on the yAxis:
yAxis: [{
title : {
text : 'Position'
},
gridLineWidth: 1,
startOnTick: false,
min: 1, //changed min value
reversed: true,
}]
but the value is not shown in front yAxis. How to sign the first value in the yAxis?
Here's my chart.
if I write:
yAxis: [{
title : {
text : 'Позиция'
},
startOnTick: false,
showFirstLabel: true,
min: 1,
reversed: true,
tickInterval: 1,
labels: {
formatter: function() {
if (this.value < 1)
return null;
else if (this.value == 1)
return this.value;
else if (this.value % 2 == 0)
return this.value;
}
}
}]
then scaling yAxis turns bad for my data :( chart
You can define your own yAxis.tickPositioner to define all positions where you wish a tick should be placed.
Since in your case you don't want to override the entire behavior, but just place a tick at the min position, you can leverage the axis.getLinearTickPositions(interval, min, max) method to get the array of default positions that would be otherwise generate, and then append your additional ticks to this array.
The code below has ticks added on both the min and max of the y-axis
yAxis: {
showFirstLabel: true,
showLastLabel: true,
tickPositioner: function(min, max) {
// specify an interval for ticks or use max and min to get the interval
var interval = Math.round((max - min) / 5);
var dataMin = this.dataMin;
var dataMax = this.dataMax;
// push the min value at beginning of array
var positions = [dataMin];
var defaultPositions = this.getLinearTickPositions(interval, dataMin, max);
//push all other values that fall between min and max
for (var i = 0; i < defaultPositions.length; i++) {
if (defaultPositions[i] > dataMin && defaultPositions[i] < dataMax) {
positions.push(defaultPositions[i]);
}
}
// push the max value at the end of the array
positions.push(dataMax);
return positions;
}
}
Show tick on min and max of y axis | Highchart & Highstock # jsFiddle
Demo of your chart # jsFiddle
For me it seems everything is working fine. The minimum value of your reversed chart is 1, which is right on top of the y-Axis. However if you want to show this value on the axis, have a look at this post for a description.
I have a series of json data in a highstock chart and I want to trim this data in values that are only 0 or 1: 0 if the data is 0, else 1. What I have to write in my option? My code now is this:
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'chart_div'
},
rangeSelector: {
selected: 1
},
title: {
text: 'prova'
},
{% if net.ntype == "ztc" and sens.type == 2 %}
// HERE I WANT TO DO AN OPTION TO TRIM VALUES
// TO 0 OR 1
{% end %}
series: [{
name: 'prova',
data: data,
step: true,
tooltip: {
valueDecimals: 2
}
}]
})
}
First loop in your Jason using $each()
Creat an array for example x
Then add if condition and push to x your date time and value either 0 or 1
Then your data :x;
This is just an idea if you can give us your code we can help you more