if we have a code like this
yAxis : {
title : {
text : 'Exchange rate'
},
plotLines : [{
value : 0.6738,
color : 'green',
dashStyle : 'shortdash',
width : 2,
label : {
text : 'Last quarter minimum'
}
}, {
value : 0.7419,
color : 'red',
dashStyle : 'shortdash',
width : 2,
label : {
text : 'Last quarter maximum'
}
}]
},
how can i take the plotlines json string and asign it to a variable and pass this variable to the plotline object ???
i tried something like this
var jsonObj = [];
jsonObj.push({ "value": 1256211571000, "color": '#D2691E', "width": 1, "label": { "text": 'rinse'} });
var myLines = JSON.stringify(jsonObj);
and then pass mylines to plotlines but it didn't really work
Assuming this object is in a variable called data, just do:
data.yAxis.plotLines.push({
"value": 1256211571000,
"color": '#D2691E',
"width": 1,
"label": {
"text": 'rinse'
}
});
This is just a JavaScript object, not JSON. JSON is a string representation of an object (or array).
Here is an example , if it works for you
'
$(document).ready(function() {
$.getJSON('yourpage.php?getdata=y&compid=<?php echo $comp_details[0]['id']; ?>', function(data) {
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
dataLength = data.length;
for (i = 0; i < dataLength; i++) {
//console.log(data[i][2]);
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
])
}
// set the allowed units for data grouping
var groupingUnits = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]];
// create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
alignTicks: false,
zoomType: 'x'
},
rangeSelector: {
selected: 0
},
title: {
text: '<?php echo strtoupper($_GET['CompanySymbol']); ?>'+' Historical'
},
yAxis: [{
title: {
text: 'OHLC'
},
height: 200,
lineWidth: 2,
min:0
}, {
title: {
text: 'Volume'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2
},
{
height: 200,
min: 0,
lineWidth: 2,
opposite: true
}],
tooltip: {
crosshairs: [true,true],
shared: true
},
series: [{
type: 'ohlc',
name: '<?php echo strtoupper($_GET['CompanySymbol']); ?>',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
},
{
type: 'line',
name:'Fuerte',
yAxis: 2,
data:[<?php echo $newdata; ?>]
},
{
type: 'line',
name:'Debil',
yAxis: 2,
data:[<?php echo $newdata1; ?>]
},
{
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
});
chart.yAxis[2].setExtremes(10,90);
});
});'
Related
I am using highcharts to render a column chart and my legends as well. I want to be get the total count of all the legends together (default legend and linkedTo legend).
Ex:
in the fiddle below: I have 2 legends: now when I click on one of them, I want to see the cumulative count of all the series pertaining to that legend clicked.
http://jsfiddle.net/5eb0utxq/
is that possible, currently its getting some count, but im not sure if that is the total count of all the series related to that legend.
code:
$(function() {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
plotOptions: {
series: {
showInLegend: true,
}
},
legend: {
labelFormatter: function() {
var totalLegend = this.yData.reduce(function(pv, cv) { return pv + cv; }, 0);
return this.name +" : "+ totalLegend;
}
},
series: [{
data: [4740, 1378, 8],
name: "Confirmed",
id: "Confirmed",
type: "column",
y: "86",
stack: "ACTIVE"
}, {
data: [2932, 141],
name: "Potential", id: "Potential",
stack: "ACTIVE",type: "column",
y: "86"
}, {
data:[1752, 11],
linkedTo: "Confirmed",
name: "Confirmed",showInLegend: false,
type: "column",
y: "86",
stack: "REOPENED"
}, {
data: [1089, 2],
linkedTo: "Potential",showInLegend: false,
name: "Potential",
type: "column",
y: "86",
stack: "REOPENED"
}, {
data: [2332, 1960, 42],
linkedTo: "Potential",
name: "Potential",showInLegend: false,
type: "column",
y: "86",
stack: "NEW"
}, {
data: [480, 4684, 2258],
linkedTo: "Confirmed",
name: "Confirmed",showInLegend: false,
type: "column",
y: "86",
stack: "NEW",
}]
});
});
You need to count yData from all linked series, this is the main series, so you can use the below code:
legend: {
...,
labelFormatter: function() {
var totalLegend = 0;
[...this.linkedSeries, this].forEach(function(lSeries) {
lSeries.yData.forEach(el => {
totalLegend += el
});
});
return this.name + ' (' + totalLegend + ')';
}
}
Live demo: http://jsfiddle.net/BlackLabel/kfger78b/
API Reference: https://api.highcharts.com/highcharts/legend.labelFormatter
I have this plot, where I put some markers (stripLines) on minimun and maximum values. I´d like to show the xValue only on the markers, to make the chart more readable.
In this plot I'm using an interval of 50 and my data for xAxis is not set properly. What I wish to do is to show the value on xAxis only where the markers show up. Is there any property that does that? I can't find it on the documentaion.
Here is the code where I generate the chart
const options = {
theme: "light2", // "light1", "dark1", "dark2"
animationEnabled: true,
zoomEnabled: false,
toolTip:{
enabled: false,
},
axisX: [{
crosshair: {
enabled: true
},
stripLines:[
{
value: marker[0],
thickness: 2,
label: ""
},
{
value: marker[1],
thickness: 2,
label: ""
},
],
//title: "X title 1",
//margin: 20,
valueFormatString: "DD/MMM/YY" ,
labelMaxWidth: 70,
//labelWrap: true,
interval: 50,
titleFontColor:"#7680B2",
lineColor:"#7680B2",
tickColor:"#7680B2",
labelFontColor:"#7680B2",
lineThickness: 2,
},
{
//title: "X title 2",
margin: 0,
valueFormatString: "DD/MMM/YY" ,
//zlabelWrap: true,
interval: 50,
titleFontColor:"#62D2A9",
lineColor:"#62D2A9",
tickColor:"#62D2A9",
labelFontColor:"#62D2A9",
lineThickness: 2,
}],
axisY: {
includeZero: false
},
data: [
{
color:"#7680B2",
type: "spline",
axisXIndex: 0,
xValueType: "dateTime",
dataPoints: dataPoints,
},
{
color:"#62D2A9",
type: "spline",
axisXIndex: 1,
xValueType: "dateTime",
dataPoints: dataPoints2,
},
]
}
return (
<div className="ChartWithZoom">
<h1>Longe do pico</h1>
<CanvasJSChart options = {options}
/* onRef={ref => this.chart = ref} */
/>
</div>
);
I think I found a workaround, there is a function that handles that situation, labelFormatter: function ( e ), this is my solution:
var chart = new CanvasJS.Chart("container",
{
.
.
axisX:{
interval: 1,
intervalType: 'day',
labelFormatter: function ( e ) {
let data = CanvasJSReact.CanvasJS.formatDate(e.value, "DD/MMM/YY");
//marker is an array that I get the dates for the marker
let minMarker = CanvasJSReact.CanvasJS.formatDate(marker[0], "DD/MMM/YY");
let maxMarker = CanvasJSReact.CanvasJS.formatDate(marker[1], "DD/MMM/YY");
if ( data === minMarker || data === maxMarker ) {
return CanvasJSReact.CanvasJS.formatDate(e.value, "DD/MMM/YY");
} else {
return "";
}
};
},
.
.
});
chart.render();
e: { // parameter sent to function
chart,
axis,
value,
label
}
This is the result:
Below is the chart code, my problem is JSON needs to be used to grab updated data.
I dont want the whole chart to be re-render, but instead only the candles (add the new ones).
I guess there has to be a loop looking every sec in the new data by looping the JSON and create a chart.update?
Would love a answer from anyone with how i should solve this with code!
https://codeshare.io/alxOMZ
$.getJSON('/api/v1/public/getcharts?market=BTC-'+coinsymbol, function (data) {
// split the data set into trading and volume
var trading = [],
volume = [],
dataLength = data.length,
// set the allowed units for data grouping
groupingUnits = [[
'hour', // unit name
[1] // allowed multiples
], [
'day',
[1, 7]
]],
i = 0;
for (i; i < dataLength; i += 1) {
trading.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
]);
}
// create the chart
Highcharts.stockChart('container', {
title: {
text: null
},
scrollbar: {
enabled: false
},
credits: {
enabled: false
},
chart: {
renderTo: 'container',
backgroundColor: 'none',
},
rangeSelector: {
selected: 2,
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1D'
}, {
type: 'day',
count: 7,
text: '7D'
}, {
type: 'month',
count: 1,
text: '1M'
}, {
type: 'all',
count: 1,
text: 'All'
}],
selected: 5,
inputEnabled: false
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
candlestick: {
lineColor: '#E75162',
upLineColor: '#5BB789',
upColor: '#5BB789',
color: '#E75162'
}
},
yAxis: [{
crosshair: {
snap: false
},
height: '100%',
resize: {
enabled: false
}
}, {
top: '100%',
height: '10%',
offset: 0
}],
tooltip: { enabled: false },
series: [
{
type: 'candlestick',
name: coinsymbol,
data: trading,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: coinsymbol+' Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
});
});
-----CODE-----
$.getJSON('/api/v1/public/getcharts?market=BTC-'+coinsymbol, function (data) {
// split the data set into trading and volume
var trading = [],
volume = [],
dataLength = data.length,
// set the allowed units for data grouping
groupingUnits = [[
'hour', // unit name
[1] // allowed multiples
], [
'day',
[1, 7]
]],
i = 0;
for (i; i < dataLength; i += 1) {
trading.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
]);
}
// create the chart
Highcharts.stockChart('container', {
title: {
text: null
},
scrollbar: {
enabled: false
},
credits: {
enabled: false
},
chart: {
renderTo: 'container',
backgroundColor: 'none',
},
rangeSelector: {
selected: 2,
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1D'
}, {
type: 'day',
count: 7,
text: '7D'
}, {
type: 'month',
count: 1,
text: '1M'
}, {
type: 'all',
count: 1,
text: 'All'
}],
selected: 5,
inputEnabled: false
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
candlestick: {
lineColor: '#E75162',
upLineColor: '#5BB789',
upColor: '#5BB789',
color: '#E75162'
}
},
yAxis: [{
crosshair: {
snap: false
},
height: '100%',
resize: {
enabled: false
}
}, {
top: '100%',
height: '10%',
offset: 0
}],
tooltip: { enabled: false },
series: [
{
type: 'candlestick',
name: coinsymbol,
data: trading,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: coinsymbol+' Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
});
});
Looking at the highcharts api quickly on google, you may need an event property followed by load property, and your logic, which would probably include something like
chart: {
events: {
load: function () {
// here's how you would access your series
var series = this.series[0];
setInterval(function () {
//modify your series here.
}, 1000);
}
}
}
I am creating a dynamic updated highstock chart with 2 series but at start one series is rendering in wrong place. And when I resize the selection in navigator the series comes back to its correct place.
Here is the config of highstock:
Highcharts.setOptions({
global: {
useUTC: false
}
});
var groupingUnits = [['millisecond', [1, 2, 5, 10, 20, 25, 50, 100, 200, 500]],
['second',[1, 2, 5, 10, 15, 30]],
['minute',[1, 2, 5, 10, 15, 30]],
['day',[1]]
];
// Create the chart
Highcharts.stockChart('container', {
chart: {
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
var series1 = this.series[1];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, false);
series1.addPoint([x, y], true, false);
}, 500);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1min'
},
{
count: 3,
type: 'minute',
text: '3min'
}, {
count: 5,
type: 'minute',
text: '5min'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 3
},
exporting: {
enabled: false
},
title: {
text: 'Live Chart'
},
yAxis: [
{
labels: {
align: 'right',
x: -3
},
title: {
text: 'Line'
},
height: '60%',
lineWidth: 2,
resize: {
enabled: true
}
},
{
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
tooltip: {
split: true
},
series: [
{
type: 'line',
name: 'OHLC',
data: [[]],
dataGrouping: {
units: groupingUnits
}
},
{
type: 'column',
name: 'Volume',
data: [[]],
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}
]
});
I have created a fiddle for the same:
https://jsfiddle.net/xu058sgp/23/
I have tried changing the height and top property of yAxis but nothing seems to fix this issue. I am not sure but it can be due to the frequency in which the data is getting updated.
Can someone point me out what I am doing wrong here.
As a workaround you could initialize the series and then remove the points before adding your own points.
Initialization:
series: [{
type: 'line',
name: 'OHLC',
data: [0], //added this 0
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: [0], //added this 0
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
Then, remove the points before adding new ones:
events: {
load: function () {
// set up the updating of the chart each second
var chart = this
var series = this.series[0];
var series1 = this.series[1];
//Remove 0 data
series.setData([], false); //false to avoid redrawing, so we only redraw once per update
series1.setData([], false);
//update graph
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], false, false);
series1.addPoint([x, y], false, false);
//redraw graph
chart.redraw();
}, 500);
}
}
Working example: https://jsfiddle.net/ewolden/xu058sgp/46/
I have a bubble chart and would like to set the interval points on the x-axis to a predefined list. For example, the list is [90, 100, 103, 108, 110, 112, 116, 120]. Here's my code:
jQuery("#center_col_wrapper").highcharts({
chart: {
type: 'bubble'
},
title: {
text: 'Highcharts Bubbles'
},
xAxis: {
allowDecimals: false,
title: {
text: "BUBBLE CHART"
},
categories: ['90', '100', '110']
},
yAxis: {
title: {
text: ""
},
labels: {
enabled: false
}
},
series: [
{
name:"S1", data: [[100,10,87]]
},
{
name:"S2", data: [[100,11,87]]
},
{
name:"S3", data: [[110,12,87]]
},
{
name:"S4", data: [[110,13,87]]
}
]
});
Here's my jsfiddle: http://jsfiddle.net/mLP7U/
You can specify
minTickInterval: 10,
min: 90,
within your xAxis configuration.
See http://api.highcharts.com/highcharts#xAxis.min
and http://api.highcharts.com/highcharts#xAxis.minTickInterval
for explanations on these items. This will make only the 90, 100, and 110 labels appear on your x axis
So I was able to do this using formatter function in labels. I set min to 0, max to 5, and tickInterval to 1. An array was defined and formatter used this array to choose the appropriate label.
var labels = ["70", "90", "100", "110", "130", "145"];
jQuery("#container").highcharts({
chart: {
type: 'bubble'
},
title: {
text: 'Highcharts Bubbles'
},
xAxis: {
allowDecimals: false,
title: {
text: "Change"
},
tickInterval: 1,
min: 0,
max: 5,
labels: {
formatter: function() {
if (labels[this.value]) {
return labels[this.value]
}
return "e"
}
}
},
yAxis: {
gridLineColor: "#ffffff",
title: {
text: ""
},
labels: {
enabled: false
},
tickInterval: 1,
min: 0,
max: 5
},
series: [
{
name:"A", data: [[2,1,87]]
},
{
name:"B", data: [[2,2,87]]
},
{
name:"C", data: [[2,3,87]]
},
{
name:"D", data: [[4,1,87]]
}
]
});
http://jsfiddle.net/mLP7U/6/