We Keep Coding

Highcharts - How to sort data by name?

I am currently working on a horizontal bar graph with Highcharts. I have 5 different categories Low, Medium Low, Medium, Medium High and High I would like to sort the data being returned from the graph by category name by descending order having Low be the starting point. For example, all Low data appears first in the graph, all Medium Low, all Medium appears next and so on.
I've done some research and it appears that the code below is what I need
dataSorting: {
enabled: true,
matchByName: true
},
but when applying this to HighCharts it did not affect my graph. Is this a feature that is provided in HighCharts? Is this something that is possible to do?
Here is a jsfiddle
My code:
let data = [10, 31, 13, 19, 21, 50, 10]
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: "Bar Graph"
},
xAxis: {
},
yAxis: {
min: 0,
formatter: function() {
return this.value + "%";
},
title: {
text: '% of Total'
}
},
legend: {
reversed: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Low',
color: '#0D6302',
data: [data[0]],
showInLegend: true,
}, {
name: 'Medium-Low',
color: '#0B7070',
data: [data[2]]
}, {
name: 'Medium',
color: '#DC9603',
data: [data[3]]
},{
name: 'Low',
color: '#0D6302',
data: [data[1]],
showInLegend: false
},
{
name: 'Medium-High',
color: '#DD5F0C',
data: [data[4]]
}, {
name: 'High',
color: '#C50710',
data: [data[5]]
}]
});
Current look:
Desired look:

You can use the index feature to define the affecting the order of rendering.
Demo: https://jsfiddle.net/BlackLabel/9Lsvmpbh/
series: [{
name: 'Low',
index: 4,
color: '#0D6302',
data: [data[0]],
showInLegend: true,
}, {
name: 'Medium-Low',
index: 3,
color: '#0B7070',
data: [data[2]]
}, {
name: 'Medium',
index: 2,
color: '#DC9603',
data: [data[3]]
},{
name: 'Low',
index: 5,
color: '#0D6302',
data: [data[1]],
showInLegend: false
},
{
name: 'Medium-High',
index: 1,
color: '#DD5F0C',
data: [data[4]]
}, {
name: 'High',
index: 0,
color: '#C50710',
data: [data[5]]
}]
API: https://api.highcharts.com/highcharts/series.line.index

You should reorder your series' objects. According to this, highchart doesn't have a property to sort automatically. You should insert first your Low series, then Medium Low etc. The thing you want to be the last one, you should put it first in the series.
Following this
let data = [10, 31, 13, 19, 21, 50, 10]
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: "Bar Graph"
},
xAxis: {
},
yAxis: {
min: 0,
formatter: function() {
return this.value + "%";
},
title: {
text: '% of Total'
}
},
legend: {
reversed: false
},
plotOptions: {
series: {
stacking: 'sorted'
}
},
series: [{
name: 'High',
color: '#C50710',
data: [data[5]]
}, {
name: 'Medium-High',
color: '#DD5F0C',
data: [data[4]]
}, {
name: 'Medium',
color: '#DC9603',
data: [data[3]]
},{
name: 'Medium-Low',
color: '#0B7070',
data: [data[2]]
},
{
name: 'Low',
color: '#0D6302',
data: [data[1]],
showInLegend: false
}, {
name: 'Low',
color: '#0D6302',
data: [data[0]],
showInLegend: true,
}]
});
I got this result:

Highchart - I have to refresh the page to see new data

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);
}
}
}

Align second scatter series to the side similar to how column and bar charts do using HighCharts

I am creating a chart and have so far found that a scatter and errorbar combination chart is the best fit. I have hit a problem when adding an extra pair of series that because I have used a scatter, that they are placed on top of each other.
This is the standard view for the chart which is correct:
This is what I WANT to happen when I add an extra pair of series data:
But this is what happens:
var chart;
$(function () {
$('#container').highcharts({
title: {
text: 'Chart'
},
tooltip: {
enabled: false
},
xAxis: [{
categories: ['Col1', 'Col2', 'Col3']
}],
yAxis: [{ // Primary yAxis
title: {
text: 'Chart'
}, opposite: true
}
, { // Secondary yAxis
title: {
text: 'Score'
}
}],
plotOptions: {
scatter: {
dataLabels: {
enabled: true,
x: 0,
y: 10
},
enableMouseTracking: false
},
errorbar: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Value',
type: 'scatter',
yAxis: 1,
data: [1001.418, 1000.006, 1005.237],
dataLabels: {
backgroundColor: Highcharts.getOptions().colors[0],
padding: 3,
color: '#ffffff',
style: {
"textShadow": "none",
"lineHeight": "13px"
},
useHTML:true
},
marker: {
symbol: "square"
},
}, {
type: 'errorbar',
whiskerColor: '#555',
stemColor: '#555',
yAxis: 1,
data: [[1000.46, 1002.376], [999.071, 1000.941], [1002.753, 1007.721]]
},
//START extra data
{
name: 'Compare',
type: 'scatter',
yAxis: 1,
data: [1001.918, 1000.506, 1005.737],
dataLabels: {
backgroundColor: Highcharts.getOptions().colors[1],
padding: 3,
style: {
"textShadow": "none",
"lineHeight": "13px"
},
useHTML:true
},
marker: {
symbol: "square"
},
}, {
type: 'errorbar',
whiskerColor: '#555',
stemColor: '#555',
yAxis: 1,
data: [[1001.46, 1003.376], [1000.071, 1001.941], [1003.753, 1006.721]]
},
//END extra data
{
//force the ErrorBar icon into the legend
name: 'ErrorBar',
type: 'scatter',
marker: {
symbol: "url(data:image/gif;base64,R0lGODlhDwAMAIAAAFVVVf///yH5BAEHAAEALAAAAAAPAAwAAAIXhI8ZywEN4Yt0UnmjzWtzn4GXWFXJeRQAOw==)"
},
data:[null]
}
]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
http://jsfiddle.net/ewurrLgk/
I have taken a look through the API and I have tried to use other chart types like Line and Column and although they do align correctly, the error bar pretty much disappears because those chart types start from zero. I've also tried pointPlacement but that just moves them both into the middle. Is what I am trying to do just not possible using a scatter?

You should use pointPlacement, but set per particular series. I prepared a minified demo for you:
series: [{
type: 'scatter',
pointPlacement:-0.2,
data: [51,73]
},{
type: 'scatter',
pointPlacement:0.2,
data: [8,7.6]
},{
type: 'errorbar',
pointPlacement:-0.2,
data: [[48, 51], [68, 73]]
}, {
type: 'errorbar',
pointPlacement:0.2,
data: [[6, 8], [5.9, 7.6]]
}]
http://jsfiddle.net/6e749xx9/1/

Add series function in Highstock

I have a Highstock diagram such as below:
And I want to add some series to this diagram by addSeries function. But new diagram type is "line". In this case it's return error and does not draw as good as I want.
my code is:
$('.diagram').highcharts('StockChart', {
rangeSelector: {
allButtonsEnabled: true,
selected: 6,
inputEnabled: false,
buttonTheme: {
fill: 'none',
width: 60,
style: {
color: '#000',
fontWeight: 'bold',
fontSize: 14,
},
},
buttons: [{
type: 'day',
count: 1,
text: '?? ???'
}, {
type: 'week',
count: 1,
text: '?? ????'
}, {
type: 'month',
count: 1,
text: '?? ???'
},{
type: 'month',
count: 3,
text: '?? ???'
}, {
type: 'ytd',
text: '??? ????'
}, {
type: 'year',
count: 1,
text: '?? ???'
}, {
type: 'all',
text: '???'
}]
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: '???? - ????'
},
height: '60%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: '???'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'candlestick',
name: data[0].name,
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}],
plotOptions: {
candlestick: {
color: '#009933',
upColor: '#d14836',
lineColor:'#009933',
upLineColor:'#d14836',
}
},
});
and I call this function when I want to append new diagram:
function appendBollinger (newData) {
var chart = $('.diagram').highcharts();
chart.addSeries({
type: 'line',
data: newData
}, true, true);
}
Can you help me? Thnx.

Highstock when multiple lines share a y axis one line is drawn at an offset

I am using Highstock/Highchart and if I draw two lines on a graph, who share a single Y axis, one of the lines isn't displayed on the Y axis properly. It is offset to higher values. For example, a value is 120 but the dot shows up on the 200 line. I would post a pic but I can't yet.
I have tried setting the Y axis max by the highest value but the line goes off the chart because it's still rendered with an offset.
Here is my config for the chart :
$scope.chartConfig = {
options: {
style: {
fontSize: '12px'
},
chart: {
alignTicks: true,
type: 'spline'
},
rangeSelector: {
inputEnabled: true, //$('#container').width() > 480,
selected: 0,
buttons: [{
type: 'week',
count: 1,
text: '1w'
},
{
type: 'month',
count: 1,
text: '1m'
},
{
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}]
},
navigator: {
enabled: true
},
tooltip: {
animation: true,
enabled: true,
shadow: true,
shared: false,
useHTML: false,
xDateFormat: '%m/%d/%Y'
},
colors: ['#51324e', '#6e6e6e', '#3d2b3b', '#515151', '#342d3d', '#3e3e3e', '#413451', '#4f4b4b', '#351032', '#3e3e3e'],
plotOptions: {
pointStart: 0,
'line': {
'cursor': 'pointer',
'marker': {
'lineWidth': 1.5,
},
'lineWidth': 1
},
column: {
grouping: true
},
series: {
stacking: 'normal',
}
}
},
xAxis: {
title: {
text: ''
},
},
yAxis: {
//min: 10,
max: null,
title: {
text: ''
}
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
}
},
useHighStocks: true,
series: [{
//type: 'column',
marker : {
enabled : true,
radius : 4,
fillColor: {},
lineColor: {},
lineWidth: 3,
symbol: 'diamond'
},
name: '',
data: [[
0,0
]],
dataGrouping: {
units: [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]]
}
},
{
//type: 'column',
marker : {
enabled : true,
radius : 4,
fillColor: {},
lineColor: {},
lineWidth: 3,
symbol: 'diamond'
},
name: '',
data: [[
0,0
]],
dataGrouping: { // TODO: delete me?
units: [[
'week', // unit name
[1]
], [
'month',
[1, 2, 3, 4, 6]
]]
}
}
],
title: {
style: {
color: '#51324e'
}
},
credits: {
enabled: false
}
};
In the HTML:
<highchart id="chart" class="hiChart-container" config="chartConfig"></highchart>
And all I change is the data and series name to update the chart...
I am only importing Highstock and using Highchart-ng.
I cannot do var chart = new Chart($scope.chartConfig) because my javascript framework is AngularJS and hence we are using Highchart-ng
How do I adjust the lines to be scaled to the Y axis?