Proper format of json for Highchart.js with multiple series - javascript

I have examples json data for Higcharts USD currency:
https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/usdeur.json
So i added simply one value to data, there not show in a chart.
[
[
1167609600000,
50,
30
],
[
1167609600001,
60,
40
],
[
1167609600002,
70,
50
]
]
My code:
function myFunction() { Highcharts.getJSON(
'http://192.168.0.157/log1.json', function (data) {
Highcharts.chart('container', {
chart: {
zoomType: 'x', backgroundColor:"#e7ecea"
},
title: {
text: 'Pomiary'
},
subtitle: {
text: document.ontouchstart === undefined ?
'select' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'speed',
data: data
}, {
type: 'area',
name: 'speed2',
data: data
}]
}); } );
};
How i can add next series?

The simplest way is to use keys property:
series: [{
data: data
}, {
keys: ['x', 'someValue', 'y'],
data: data
}]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4797/
API Reference: https://api.highcharts.com/highcharts/series.line.keys

Related

Highchart show string on x-axis

I am trying to show my x-axis values as a string on highcharts for a series but instead get (0,1,2....) which is the xaxis array index position. How do I show the xaxis value formatted as a string on higcharts?
Here is what I have
Highcharts.chart('container', {
title: {
text: 'Chart with time'
},
xAxis: {
type: 'datetime',
"labels": {
"formatter": function() {
console.log(this);
console.log(this.value.toString());
return this.value
}
},
},
series: [{
data: [
['Jan-1', 100],
['Jan-2', 120],
['Jan-3', 130]
]
}]
});
Would like to see 'Jan-1', 'Jan-2' as the labels on the x-axis. Here is a link to the fiddle below https://jsfiddle.net/dLfv2sbd/2/
Remove labels and use type: 'category' instead of type: 'datetime':
Highcharts.chart('container', {
title: {
text: 'Chart with time'
},
xAxis: {
type: 'category',
},
series: [{
data: [
['Jan-1', 100],
['Jan-2', 120],
['Jan-3', 130]
]
}]
});
Check the fiddle.
You can still use datetime this way.
Highcharts.chart('container', {
title: {
text: 'Chart with time'
},
xAxis: {
type: 'datetime',
"labels": {
"formatter": function() {
return Highcharts.dateFormat('%b-%e', this.value)
}
},
},
series: [{
data: [
[Date.UTC(2017,0,1), 100],
[Date.UTC(2017,0,2), 120],
[Date.UTC(2017,0,3), 130]
]
}]
});
https://jsfiddle.net/dLfv2sbd/4/

How to create a stacked chart with cumulative line using Highchart.js

Does anyone have any examples of using Highchart to achieve a result like the one in the image?
function drawChart(result) {
var response =
{
Month: result.Month,
Data: result.Data,
Title: result.title
};
$('#dvChart').highcharts({
chart: {
type: 'column'
},
title: {
text: title
},
xAxis: {
categories: response.Month
},
yAxis: [{
min: 0,
title: {
text: "# Of Tests"
},
},
],
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
stacking: 'normal',
}
}
}
,
series:
response.Data
});
}
My code above can achieve stacked chart but I dont know how to put cumulative lines to the chart.
To get line type series with stacked column series you should set type of type per series for ones with other type than the one defined in chart.type option.
Example: http://jsfiddle.net/t3v579uj/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['r', 'e', 's', 'p', 'o']
},
yAxis: [{
min: 0,
title: {
text: "# Of Tests"
}
}],
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
stacking: 'normal'
}
},
series: [{
data: [1,2,3,4]
},{
data: [1,2,3,4]
},{
data: [1,2,3,4]
},{
type: 'line',
data: [2,3,4,5]
}]
});
});

Highcharts display series.name on X Axis

I'm trying to display each series name on X-Axis
http://jsfiddle.net/Jr79Y/9/
series: [{
name: 'Test',
data: [20]
}, {
name: 'Test',
data: [20]
}, {
name: 'Test',
data: [40]
}]
Does somebody knows how to do this?
This is a much simpler solution than anything I'm seeing for answers so far:
xAxis: {
categories:[]
}
.
series: [{
data: [{name:'Test 1',y:20,color:'red'},
{name:'Test 2',y:20,color:'blue'},
{name:'Test 3',y:40,color:'green'}]
}]
Example:
http://jsfiddle.net/jlbriggs/Jr79Y/37/
Although unless you have a really good reason for having each bar be a different color, it usually just adds unnecessary visual clutter and you're better off leaving them a single color.
http://jsfiddle.net/Jr79Y/35/
xAxis: {
categories: ['Test1', 'Test2', 'Test3']
}
For the series, this is quite dirty but it works:
series: [{
name: 'Test1',
data: [20, 0, 0]
}, {
name: 'Test2',
data: [0, 20, 0]
}, {
name: 'Test3',
data: [0, 0, 40]
}
Try this:
xAxis: {
categories: ['Test', 'Test', 'Test'],
title: {
text: null,
}
},
And in series part:
series: [{
name: 'Values',
data: [20,20,40]
},]
Reference.
EDITED:
You are using three group so you need to modify your data format. If you want the different color then try this:
series: [{
name: 'Values',
data: [20,0,0]
},
{
name: 'Values',
data: [0,20,0]
},
{
name: 'Values',
data: [0,0,40]
},]
Check this out
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories:['Test 1', 'Test 2', 'Test3']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
}
//colorByPoint: true
},
series: {
colorByPoint: true
}
},
legend: {
layout: 'vertical',
floating: true,
backgroundColor: '#FFFFFF',
align: 'right',
verticalAlign: 'top',
y: 60,
x: -60
},
series: [{
data: [40,20,20]
}]
});
});
http://jsfiddle.net/Jr79Y/36/

How to set interval points on the x-axis in HighCharts?

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/

How to make a multi pane on highstock (highcharts) which contain a stacked area graph?

I want to know if it will be possible to use the two pane view (as this example) with a stacked area graph ?
I tryed to make it works in a fiddle http://jsfiddle.net/g2xDj/2/, but, the stacked area graph is not displayed.
var stacked_data = [{
name: 'Asia',
data: [[1364292000,502], [1364294000,635], [1364296000,809], [1364298000,947], [1364300000,1402], [1364302000,3634], [1364304000,5268]]
}, {
name: 'Africa',
data: [[1364292000,106], [1364294000,107], [1364296000,111], [1364298000,133], [1364300000,221], [1364302000,767], [1364304000,1766]]
}, {
name: 'Europe',
data: [[1364292000,163], [1364294000,203], [1364296000,276], [1364298000,408], [1364300000,547], [1364302000,729], [1364304000,628]]
}];
var line_data = [[1364292000,502], [1364294000,635], [1364296000,809], [1364298000,947], [1364300000,1402], [1364302000,3634], [1364304000,5268]];
// create the chart
$('#container').highcharts('StockChart',
{
chart : {
//type: 'area',
renderTo : 'container',
zoomType: 'x'
},
plotOptions: {
area: {
stacking: 'normal'
}
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Historical'
},
yAxis: [{
title: {
text: 'Load'
},
height: 200,
lineWidth: 2
},
{
title: {
text: 'Load 2'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2
}
],
series: [
{
name: "area",
data: stacked_data,
yAxis: 0
},{
name: "line",
data: line_data,
yAxis: 1
}]
});
});
Anybody have an idea to help me ?
In your example you have incorrect structure of series, because in stackedArea you try to push "series" structure for data.
Additionaly you should multiply all timestamp by 1000 to achieve JS timestamp format.
Updated example: http://jsfiddle.net/g2xDj/4/
var series = [{
name: 'Asia',
data: [
[1364292000000, 502],
[1364294000000, 635],
[1364296000000, 809],
[1364298000000, 947],
[1364300000000, 1402],
[1364302000000, 3634],
[1364304000000, 5268]
]
}, {
name: 'Africa',
data: [
[1364292000000, 106],
[1364294000000, 107],
[1364296000000, 111],
[1364298000000, 133],
[1364300000000, 221],
[1364302000000, 767],
[1364304000000, 1766]
]
}, {
name: 'Europe',
data: [
[1364292000000, 163],
[1364294000000, 203],
[1364296000000, 276],
[1364298000000, 408],
[1364300000000, 547],
[1364302000000, 729],
[1364304000000, 628]
]
}];
var line_data = {
type:'line',
yAxis:1,
data:[
[1364292000000, 502],
[1364294000000, 635],
[1364296000000, 809],
[1364298000000, 947],
[1364300000000, 1402],
[1364302000000, 3634],
[1364304000000, 5268]
]};
series.push(line_data);

Categories