http://jsfiddle.net/dws18w18/
$('#reg-chart').highcharts({
title: {
text: 'Daily Average Registration',
x: -20
},
xAxis: {
categories: ["2017 JUL 01","2017 JUL 02","2017 JUL 03"]
},
yAxis: {
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: [{
name: 'Users',
data: ["20","1","61"]
}]
})
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<div id="reg-chart"></div>
what's wrong with this snippet? Why it's not showing anything? Also, exact same issue on my production site, works fine on my local server. How to solve this problem?
Data must be numbers not strings
series: [{
name: 'Users',
data: ["20","1","61"] // Don't work
}]
series: [{
name: 'Users',
data: [20,1,61] //Works
}]
Link to updated fiddle
Related
I started exploring highcharts. Created report with organization hierarchy with drilldown.
Unable to format the links in drilldown report, they look like triangles instead of straight lines like in the main org chart and getting messy when the hierarchy in the drilldown gets multiple nodes.
In below example, click on Div.2, see the drilldown links. What chart options do we have to control these triagle svg shapes other than linkLineWidth etc..
Links with Triangle Shape
jsfiddle Test Case
Highcharts.chart('container', {
chart: {
height: 600,
width: 600,
inverted: true,
type: 'organization'
},
title: {
text: 'Highcharts Org Chart'
},
series: [{
name: 'Highsoft',
data: [{
from: "CO",
to: "DIV01",
},
{
from: 'CO',
to: 'DIV02'
}
],
nodes: [{
id: 'DIV01',
title: 'Div Hd 1',
name: 'Div. 1',
drilldown: "DIV01"
},
{
id: 'DIV02',
title: 'Div Hd 2',
name: 'Div. 2',
drilldown: 'DIV02'
}
]
}],
drilldown: {
activeDataLabelStyle: {
color: 'contrast'
},
layout: 'hanging',
series: [{
id: "DIV01",
name: "DIV01",
keys: ['from', 'to'],
data: [
['DIV01', 'DEP01']
],
nodes: [{
id: 'DEP01',
title: 'Dept Hd 1',
name: 'Dept. 1'
}]
},
{
id: "DIV02",
name: "DIV02",
keys: ['from', 'to'],
data: [
['DIV02', 'DEP02'],
['DEP02', 'DEP03'],
['DEP02', 'DEP04'],
['DEP04', 'DEP05'],
['DEP04', 'DEP06'] ,
['DEP04', 'DEP08'] ,
['DEP06', 'DEP07']
],
nodes: [{
id: 'DEP02'
}]
}
]
}
});
It's a bug, more information you will find in Github issue, workaround you can change patch color via CSS fill: none.
.highcharts-series path {
fill: none;
}
demo: https://jsfiddle.net/BlackLabel/ay1czgxp/
I'm an highcharts beginner...and this is my problem:
I have a 3 level drilldown chart with the possibility to change graph using buttons.
Start with a 'column' chart and drilldown to the first level; now if I change the chart type to 'pie' and try to drilldown, this last action does not work correctly
Can you help me?
Thks
var series = [{
name: 'Nascite',
id: 'Nascite',
data: [{
name: '2018',
y: 1000,
drilldown: 'Nascite 2018'
},{
name: '2019',
y: 200,
drilldown: 'Nascite 2019'
}]
}];
var drilldown = {
series: [{
name: 'Nascite 2018',
id: 'Nascite 2018',
data: [{
name: 'USA',
y: 800,
drilldown: 'Nascite 2018 USA'
}, {
name: 'ITALY',
y: 900,
drilldown: 'Nascite 2018 ITALY'
}]
}, {
name: 'Nascite 2019',
id: 'Nascite 2019',
data: [{
name: 'USA',
y: 200,
drilldown: 'Nascite 2019 USA'
}]
},{
name: 'Nascite 2018 USA',
id: 'Nascite 2018 USA',
data: [{
name: 'Texas',
y: 100
},{
name: 'California',
y: 500
}]
},{
name: 'Nascite 2018 ITALY',
id: 'Nascite 2018 ITALY',
data: [{
name: 'TrentinoAA',
y: 400,
drilldown: 'Nascite 2018 ITALY TrentinoAA'
}]
},{
name: 'Nascite 2019 USA',
id: 'Nascite 2019 USA',
data: [{
name: 'Texas',
y: 200
}]
},{
name: 'Nascite 2018 ITALY TrentinoAA',
id: 'Nascite 2018 ITALY TrentinoAA',
data: [{
name: 'Trento',
y: 300
},{
name: 'Bolzano',
y: 100
}]
}]
};
const chart = Highcharts.chart('container', {
chart: {
type: 'column',
events: {
drillup: function(e){},
drilldown: function(e){}
}
},
drillInventory: [],
title: {
text: 'Chart.update'
},
subtitle: {
text: 'Plain'
},
xAxis: {
type: 'category'
},
yAxis: {},
series: series,
drilldown: drilldown
});
document.getElementById('plain').addEventListener('click', () => {
chart.update({
chart: {
type: 'column'
}
});
});
document.getElementById('pie').addEventListener('click', () => {
chart.update({
chart: {
type: 'pie'
}
});
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://github.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<button id="plain">Plain</button>
<button id="pie">Pie</button>
It looks like a bug - I reproted it on the Highcharts Github issue channel where you can follow this thread - https://github.com/highcharts/highcharts/issues/15496
I use highcharts for a chart. I made series with "linkedTo" because I need to group the columns by region and generate a legend displaying these regions. Until then, the result is the desired one. But I can not display the name of my categories on the X axis. Under each column there should be "A", "B", ... As in the picture. See the jsfiddle for the code. Thank you for your help.
http://jsfiddle.net/yucca/hpkLy6t0/24/
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'TEST'
},
subtitle: {
text: 'TEST'
},
xAxis: {
type: 'category',
categories: ['A', 'B', 'C', 'D']
},
legend: {
enabled: true,
labelFormatter: function() {
return this.userOptions.id
}
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: false,
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [
{
id:'China',
color: '#004f9e',
data: [1100]
},
{
id:'International',
color: '#e73357',
data: [10]
},
{
linkedTo: 'International',
color: '#e73357',
data: [1000]
},
{
linkedTo: 'China',
color: '#004f9e',
data: [686]
}
]
});
graph
You need to make a slight alteration to your series in order for this to work.
series: [{
data: [{
id:'China',
color: '#004f9e',
y: 1100
},{
id:'International',
color: '#e73357',
y: 10
},{
linkedTo: 'International',
color: '#e73357',
y: 1000
},{
linkedTo: 'China',
color: '#004f9e',
y: 686
}],
}]
What I did is the following:
I changed the data[] so it holds an array of your values.
I changed the values stored as data: [686] to y: 686
Here you can find a working JSFiddle
With HighCharts 3.0, it is now possible to indicate to colors above and below one threshold. Like this example :
http://jsfiddle.net/highcharts/YWVHx/
Following code :
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function(data) {
$('#container').highcharts({
chart: {
type: 'arearange'
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: data,
color: '#FF0000',
negativeColor: '#0088FF'
}]
});
});
});
Is it possible to have another threshold with a third color, like this for example :
Thanks in advance for your help.
It actually is possible if you don't mind plotting the data twice.
$('#container').highcharts({
chart: {
type: 'arearange'
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
threshold : 0,
data: data,
color: 'orange',
negativeColor: 'blue'
},
{
name: 'Temperatures',
threshold : 10,
data: data,
color: 'red',
negativeColor: 'transparent'
}]
});
});
http://jsfiddle.net/YWVHx/97/
A feature to solve this without "hacks" was added in Highcharts 4.1.0 (February 2015), called zones (API). The given problem can be solved like this, using zones:
plotOptions: {
series: {
zones: [{
value: 0, // Values up to 0 (not including) ...
color: 'blue' // ... have the color blue
},{
value: 10, // Values up to 10 (not including) ...
color: 'orange' // ... have the color orange
},{
color: 'red' // Values from 10 (including) and up have the color red
}]
}
}
See this JSFiddle demonstration of how it looks.
Unfortunately this option is not possible, but you can request your suggestion in http://highcharts.uservoice.com and vote for it.
By the way, I can try use a plotLine, like this:
yAxis: {
title: {
text: 'My Chart'
},
plotLines: [{
id: 'limit-min',
dashStyle: 'ShortDash',
width: 2,
value: 80,
zIndex: 0,
label : {
text : '80% limit'
}
}, {
id: 'limit-max',
color: '#008000',
dashStyle: 'ShortDash',
width: 2,
value: 90,
zIndex: 0,
label : {
text : '90% limit'
}
}]
},
I have a chart that looks like this:
http://jsfiddle.net/rtGFm/37/
I would like to have a "sort" button that sorts high to low each category, putting the columns in a different order for each category. Is this possible with HighCharts?
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [
'foreclosures',
'nuisances',
'distance from city center'
]
},
yAxis: {
min: 0,
title: {
text: ''
}
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' mm';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Alger Heights',
data: [49.9, 71.5, 50]
}, {
name: 'Shawmut Hills',
data: [83.6, 78.8, 67]
}, {
name: 'Baxter',
data: [48.9, 38.8, 100]
}, {
name: 'Midtown',
data: [42.4, 33.2, 80]
}, {
type: 'scatter',
data: [55,60,70],
marker: {
symbol: 'square',
lineColor: '#FFFFFF',
lineWidth: 1,
radius: 8
},
name: 'Average'
}]
});
});
I had the same problem :) highcharts still does not provide any solution for this problem, but it is flexibel enough so that you can sort anyway - just by javascript.
Put your data in a separate value:
var dataMain = [{name:"test1",data:5}, {name:"test1",data:1},{name:"test1",data:2}]
In series you can just add a function which sorts your data:
series: (function(){
for(var i = 0;i<dataMain.length;i++){
dataMain[i].data = dataMain[i].data.sort(function(a,b){
return a[0] - b[0] ;
})
return dataMain;
}
Hope I got everything wright.
Got it to work, I believe. Trick is to add each column in correct order as a new serie with same type (column), reuse colors and hide legend...
Very hackish, the JS code to sort like 8 categories independently will be ugly but the result looks fine.
Edit: Updated fiddle, I see the spacing between the categories grows with series, doesn't look supernice.
My jsfiddle is here
$(function () {
$('#container').highcharts({
chart: {
inverted: true
},
title: {
text: 'Series sorted in within categories'
},
xAxis: {
categories: ['January']
},
series: [{
type: 'column',
name: 'Stockholm',
data: [{x:0, y:95, color: Highcharts.getOptions().colors[0]}]
}, {
type: 'column',
name: 'Göteborg',
data: [{x:0, y:80, color: Highcharts.getOptions().colors[1]}]
}, {
type: 'column',
name: 'Göteborg',
data: [{x: 1, name: 'February', y: 98, color: Highcharts.getOptions().colors[1] // VGR's color
}],
showInLegend: false,
dataLabels: {
enabled: false
}
}, {
type: 'column',
name: 'Stockholm',
data: [{x: 1, name: 'February', y: 80, color: Highcharts.getOptions().colors[0] // VGR's color
}],
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
br,
Jens
I think this can be done,
this may look like a little work around.
since we have a limited number of columns i mean 4 in the given example.
if we have arrays with sorting done with respect to each series then we can handle them.
on button click we can update the chart with new set of data as well as category array.
May be there is no solution from the APi.
According to me this is a possible approach.
Thanks,