I am getting into Highcharts little by little i am stuck at an aparently simple problem...
I have an area chart with 2 series.
$(function() {
$('#grafico3a').highcharts('StockChart', {
chart: {
type: 'area'
},
series: [{
name: 'Series1',
data: Series1,
}, {
name: 'Series2',
data: Series2,
}
]
});
});
the data file is this:
var Series1 = [
[Date.UTC(2003,8 ,24, 0 ), 243 ],
[Date.UTC(2003,8 ,24, 1 ), 21 ],
[Date.UTC(2003,8 ,24, 2 ), 377 ],
[Date.UTC(2003,8 ,24, 3 ), 70 ],
];
var Series2 = [
[Date.UTC(2003,8 ,24, 0 ), 2880 ],
[Date.UTC(2003,8 ,24, 1 ), 3460 ],
[Date.UTC(2003,8 ,24, 2 ), 3090 ],
[Date.UTC(2003,8 ,24, 3 ), 980 ],
];
It works perfectly but now i am trying to change it so to read series from single lines.. something like this:
var Series = [
[Date.UTC(2003,8 ,24, 0 ), 243, 2880 ],
[Date.UTC(2003,8 ,24, 1 ), 21, 3460 ],
[Date.UTC(2003,8 ,24, 2 ), 377, 3090 ],
[Date.UTC(2003,8 ,24, 3 ), 70, 980 ],
];
Probably it is very simple but i cannot make it work!!
Can anyone help me, please???
Thanks!
Peter.
Related
Please help me ...
enter image description here
My JSON Data:
{
"name": "PAKET BRIGHTY UNDERARM GLOWING",
"id": "PAKET BRIGHTY UNDERARM GLOWING",
"dataLabels": {
"enabled": false
},
"data": [
[
"BRIGHTY GLOWING UNDERARM (PO100RB)",
570
],
[
"5 BRIGHTY UNDERARM GLOWING (BR9)",
114
],
[
"BRIGHTY GLOWING UNDERARM (PO100RB)",
228
],
[
"3 BRIGHTY UNDERARM GLOWING (BR9)",
76
],
[
"BRIGHTY GLOWING UNDERARM (PO100RB)",
1040
],
[
"20 BRIGHTY UNDERARM GLOWING (BR9)",
52
],
[
"BRIGHTY GLOWING UNDERARM (PO100RB)",
1368
],
[
"2 BRIGHTY UNDERARM GLOWING (BR9)",
684
],
[
"BRIGHTY GLOWING UNDERARM (PO100RB)",
360
],
[
"15 BRIGHTY UNDERARM GLOWING (BR9)",
24
],
[
"BRIGHTY GLOWING UNDERARM (PO100RB)",
120
],
[
"12 BRIGHTY UNDERARM GLOWING (BR9)",
10
],
[
"BRIGHTY GLOWING UNDERARM (PO100RB)",
1020
],
[
"10 BRIGHTY UNDERARM GLOWING (BR9)",
102
]
]
}
I'll try to draw two different series in the same chart. I already did with the same data xAxis. But in my real case it couldn't be same.
For example
Temperature1
data [ 36 , 37 , 36 , 45];
categories[ 10 , 11 , 12 , 13]
Temperature2
data [34 , 38 , 35 , 23 ];
categories[10.5 , 11.3 , 12.5 , 13.7]
As you see the xAxis values are not the same for each series.
I saw some solution like use two xAxis but it does not work for me. I need to make a draw with only one xAxis.
Any help about it.
<button id="btn">Redraw</button>
<script>
jQuery('#btn').bind('click', function() {
var chart1 = jQuery('#chart_1').highcharts();
chart1.series[0].update({
data: [ 36 , 37 , 36 , 45];
}, false);
chart1.series[1].update({
data: [34 , 38 , 35 , 23 ]
}, false);
chart1.xAxis[0].update({
categories: [ 10 , 11 , 12 , 13]
});
chart1.redraw();
});
Combine the data and category to a 2 Dimensional array.
Then sort the data based on categories in increasing order, the array should like: [ [ 10, 36 ], [ 10.5, 34 ], [ 11, 37 ], [ 11.3, 38 ], [ 12, 36 ], [
12.5, 35 ], [ 13, 45 ], [ 13.7, 23 ] ]
Use this as data in the chart, it will be populated as below:
$('#container').highcharts({
series: [{
type: 'line',
data: [
[10, 36],
[10.5, 34],
[11, 37],
[11.3, 38],
[12, 36],
[12.5, 35],
[13, 45],
[13.7, 23]
]
}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
Example by Highcharts: https://www.highcharts.com/demo/combo-dual-axes/grid
Use null points:
Highcharts.chart('container', {
chart: {
type: 'scatter'
},
xAxis: {
categories: ['10', '10.5', '11', '11.3', '12', '12.5', '13', '13.7']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
series: [{
name: 'Series1',
data: [36, null, 37, null, 36, null, 45]
}, {
name: 'Series 2',
data: [null, 34, null, 38, null, 35, null, 23]
}]
});
Demo:
https://jsfiddle.net/BlackLabel/ag6x4sqt/
My JSfiddle: https://jsfiddle.net/sathishkumar_v/sw0fa4m8/2/.
Highcharts.chart('container', {
title: {
text: 'Highcharts Sankey Diagram'
},
series: [{
keys: ['from', 'to', 'weight'],
data: [
['Brazil', 'Portugal', 5 ],
['Brazil', 'France', 1 ],
['Brazil', 'Spain', 1 ],
['Brazil', 'England', 1 ],
['Canada', 'Portugal', 1 ],
['Canada', 'France', 5 ],
['Canada', 'England', 1 ],
['Canada', 'Brazil', 4 ],
],
type: 'sankey',
name: 'Sankey demo series'
}]
});
We have two from side labels: Brazil, and Canada. The to side has the labels: Portugal, France, Spain, England, and Brazil.
The plotted graph is failing to display the Brazil label at right side as expected. Instead, it is showing the Brazil label in the bottom left corner.
I think you will need to change the data order like that :
data: [
['Canada', 'Brazil', 4 ], // In first position
['Brazil', 'Portugal', 5 ],
['Brazil', 'France', 1 ],
['Brazil', 'Spain', 1 ],
['Brazil', 'England', 1 ],
['Canada', 'Portugal', 1 ],
['Canada', 'France', 5 ],
['Canada', 'England', 1 ],
],
Fiddle
Edit 2nd solution
Use nodes Api Doc
data: [
['Brazil', 'Portugal', 5 ],
['Brazil', 'France', 1 ],
['Brazil', 'Spain', 1 ],
['Brazil', 'England', 1 ],
['Canada', 'Portugal', 1 ],
['Canada', 'France', 5 ],
['Canada', 'England', 1 ],
['Canada', 'Brazil-end', 4 ],
],
nodes: [{
id: 'Brazil-end',
name: 'Brazil'
}
],
Fiddle
Highcharts 5.x.x
I setup zones on a series of data to stop a solid line being drawn at value 0.
This works fine when the yAxis.min and yAxis.max properties are not defined, however after setting those two properties the zones are ignore and a solid line appears.
Toggle comment the yAxis config.
Example
Highcharts.chart('container', {
yAxis: { min: 0, max: 100 },
xAxis: { type: 'datetime' },
series: [
{
data: [
[
1499249640000,
0.003
],
[
1499249700000,
1.9205
],
[
1499249760000,
1.9611
],
[
1499249820000,
1.928
],
[
1499249880000,
0.943
],
[
1499249940000,
0.944
],
[
1499250000000,
0.952
],
[
1499250060000,
0.044
],
[
1499250120000,
0.961
]
],
type: 'area'
},{
zones: [{
value: 0.01,
color: 'rgb(255, 255, 255, 0)'
}],
data: [
[
1499249640000,
0
],
[
1499249700000,
0
],
[
1499249760000,
1.9611
],
[
1499249820000,
0
],
[
1499249880000,
0.943
],
[
1499249940000,
0
],
[
1499250000000,
0
],
[
1499250060000,
0
],
[
1499250120000,
0
]
],
type: 'line'
}]
});
I have a pie chart that has 20 'slices' and I only need to display the Legend for the highest 3 numbers.
For example, my series:
series: [{
name: 'Costs',
data: [
[
'Rent',
2520
],
[
'Spending money',
1572
],
[
'Travel',
1325
],
[
'Home',
1142
],
[
'Personal',
949
],
[
'Groceries',
577
],
[
'Car',
469
],
[
'Clothing',
415
],
[
'Gifts',
391
],
[
'Entertainment',
310
],
[
'Other',
1480
]
]
}],
Using the above data, I only want to show legends for Rent, Spending Money and Other.
I can see we have an showInLegend: false option but that relates to hiding series, where I want to hide legends relating to data within a series.
What's the next step?
I recommend to disable default legend and use your own, like in the example:
http://jsfiddle.net/N3KAC/1/
$legend = $('#customLegend');
$.each(chart.series[0].data, function (j, data) {
$legend.append('<div class="item"><div class="symbol" style="background-color:'+data.color+'"></div><div class="serieName" id="">' + data.name + '</div></div>');
});
$('#customLegend .item').click(function(){
var inx = $(this).index(),
point = chart.series[0].data[inx];
if(point.visible)
point.setVisible(false);
else
point.setVisible(true);
});
Then you will have a chance to add condtions etc, which achieve your goal.