I am trying to update the Sunburst chart series on the change of dropdown. But my chart data series is not updating. Right now When I am trying to update the chart just the tooltip is getting updated chart is not redrawing.
Below is my code and JS fiddle demo URL:
https://jsfiddle.net/n0y87osa/6/
var options = {
chart: {
height: '70%',
// type: 'sunburst'
renderTo: 'container'
},
plotOptions: {
sunburst: {}
},
series: [{
type: "sunburst",
name: 'Root',
data: data,
point:{
events:{
click: function (event) {
alert(this.name);
}
}
},
allowDrillToNode: true,
cursor: 'pointer',
dataLabels: {
style: {
fontSize: "12px",
//color: "#515151",
fontWeight: 'normal !important',
fontFamily: "'Open Sans', sans-serif",
textOutline : 0,
color: '#fff'
},
},
levels: [{
level: 1,
levelIsConstant: false,
dataLabels: {
filter: {
property: 'outerArcLength',
operator: '>',
value: 64
},
},
},{
level: 2,
dataLabels: {
rotationMode: 'parallel'
}
}, {
level: 3,
colorVariation: {
key: 'brightness',
to: -0.4 //Tells the gradation extent
}
}]
}],
tooltip: {
shared: true,
}
};
var chart = new Highcharts.Chart(options);
$('#type_').on('change',function(){
alert(this.value);
chart.series[0].setData(data2);
chart.redraw()
});
Issue reproduced in a minimal live example: https://jsfiddle.net/BlackLabel/qrhpsbx5/
Error in console: Uncaught TypeError: Cannot read properties of undefined (reading 'x')
The problem occurs because you are incorrectly using the index property in your data. Highcharts uses index from data also to calculate the length of data, which is causing incompatibilities during data updates.
As a solution, you can change the name of the property:
var data2 = [{
id: '0.0',
parent: '',
name: 'KSE ALL',
customIndex: 32819
}, ...];
or store it in custom:
var data2 = [{
id: '0.0',
parent: '',
name: 'KSE ALL',
custom: {
index: 32819
}
}, ...];
Live demo: https://jsfiddle.net/BlackLabel/xnespquj/
API Reference: https://api.highcharts.com/highcharts/series.sunburst.data.custom
I did destroy the chart and redraw it with updated data series.
var chart;
function sunBurstChart (data1){
var options = {
chart: {
height: '70%',
// type: 'sunburst'
renderTo: 'container'
},
series: [{
type: "sunburst",
name: 'Root',
data: data1,
point:{
events:{
click: function (event) {
alert(this.name);
}
}
},
allowDrillToNode: true,
cursor: 'pointer',
dataLabels: {
/**
* A custom formatter that returns the name only if the inner arc
* is longer than a certain pixel size, so the shape has place for
* the label.
*/
style: {
fontSize: "12px",
//color: "#515151",
fontWeight: 'normal !important',
fontFamily: "'Open Sans', sans-serif",
textOutline : 0,
color: '#fff'
},
},
levels: [{
level: 1,
levelIsConstant: false,
dataLabels: {
filter: {
property: 'outerArcLength',
operator: '>',
value: 64
},
style: {
fontSize: "12px",
//color: "#515151",
fontWeight: 'normal !important',
fontFamily: "'Open Sans', sans-serif",
textShadow: false ,
backgroundColor: 'rgba(255, 255, 255, 1)',
},
},
},{
level: 2,
dataLabels: {
rotationMode: 'parallel'
}
}, {
level: 3,
colorVariation: {
key: 'brightness',
to: -0.4 //Tells the gradation extent
}
}]
}],
chart = new Highcharts.Chart(options);
}
sunBurstChart(data);
$('#type_').on('change',function(){
// alert(this.value);
chart.destroy();
sunBurstChart(data2);
chart.redraw();
});
Related
I'm trying to have zones within my graph that change color when the value exceeds a particular threshold.
Here is my graph:
The Highchart resources have an example for how to do this:
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/color-zones-simple/
My problem however, is that I can't find an example anywhere for how to do it when your Highchart is importing the data from a text file.
I've styled my chart pretty heavily so this is my highchart code snippet:
$(function () {
// Load the fonts
Highcharts.createElement('link', {
href: 'http://fonts.googleapis.com/css?family=Signika:400,700',
rel: 'stylesheet',
type: 'text/css'
}, null, document.getElementsByTagName('head')[0]);
// Add the background image to the container
Highcharts.wrap(Highcharts.Chart.prototype, 'getContainer', function (proceed) {
proceed.call(this);
this.container.style.background =null;
});
Highcharts.theme = {
colors: ['#5B8256'],
chart: {
backgroundColor: null,
style: {
fontFamily: "Arial, Helvetica, sans-serif"},
plotBorderColor: '#606063'},
title: {
style: {
color: '#eeeeee',
fontSize: '16px',
fontWeight: ''}},
subtitle: {
style: {
color: '#eeeeee'}},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.85)',
style: {color: '#F0F0F0'},
borderWidth: 0},
legend: {
itemStyle: {
fontWeight: 'bold',
fontSize: '13px'}},
xAxis: {
labels: {
style: {
color: '#eeeeee'}}},
yAxis: {
labels: {
style: {
color: '#eeeeee'}}},
plotOptions: {
series: {shadow: true},
marker: {lineColor: '#333'},
candlestick: {lineColor: '#404048'},
map: {shadow: false}},
navigator: {
xAxis: {gridLineColor: '#D0D0D8'}},
rangeSelector: {
buttonTheme: {fill: '#eeeeee',stroke: '#C0C0C8','stroke-width': 1,
states: {
select: {fill: '#D0D0D8'}}}},
scrollbar: {trackBorderColor: '#eeeeee'},
background2: null};
Highcharts.setOptions(Highcharts.theme);
var options = {
chart: {
zoomType: 'x',
renderTo: 'container',
defaultSeriesType: 'column',
resetZoomButton: {
theme: {display: 'none'}}},
title: {
text: 'Max Pressure Today:',
style: {
fontSize: '14px',opacity: 0,
style: {color: '#'}}},
xAxis: {type: 'datetime'},
yAxis: [{ // Primary yAxis
labels: {format: '{value}',
style: {color: '#eeeeee'}},
title: {
text: '',
style: {color: '#1E1E1E'}},
opposite: false},],
legend: {enabled: false},
tooltip: {shared: true,valueSuffix: ' psi'},
plotOptions: {
column: {pointPadding: 0.2,borderWidth: 0},
series: {name: 'Pressure',pointStart: Date.UTC(2016, 10, 7),pointInterval: 12 * 3600 * 1000}},
series: []};
$.get('demo-data.txt', function(data) {
var lines = data.split('\n');
lines = lines.map(function(line) {var data = line.split(',');
data[1] = parseFloat(data[1]);return data;});
var series = {data: lines};
options.series.push(series);
var chart = new Highcharts.Chart(options);});});
Any help pointing me in the right direction would be appreciated.
You can add zones by plot-options, for example:
plotOptions: {
series: {
zones: [{
value: 20,
color: '#7cb5ec'
}, {
color: '#90ed7d'
}],
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/5w9rvonz/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.zones
I'm using Highcharts' x-range chart module to render a range of multiple values. I have a couple of issues in implementing it.
The hover and select states are not having any effect on the chart
The legend icon is not showing the color of the data
Code below:
var myChart7 = Highcharts.chart('sample', {
chart: {
type: 'xrange',
},
title: null,
xAxis: {
opposite: true,
labels: {
useHTML: true,
formatter: function() {
return this.value + "ms";
},
}
},
yAxis: {
title: {
text: ''
},
labels: {
enabled: true,
},
categories: [],
reversed: true
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true
},
allowPointSelect: true,
states: {
hover: {
color: '#a4edba'
},
select: {
color: '#EFFFEF',
borderColor: 'black',
dashStyle: 'dot'
}
},
pointWidth: 15,
borderRadius: 10,
dashStyle: 'Solid',
}
},
legend: {
enabled: true,
align: 'left',
},
series: [{
color: '#C4D9FF',
name: 'Sample 1',
data: [{
x: 0,
x2: 90,
y: 0,
response: '200',
color: '#C4D9FF',
borderColor: '#789CDF',
}],
},
{
color: '#FFD7C5',
name: 'Sample 2',
data: [{
x: 5,
x2: 70,
y: 1,
response: '200',
color: '#FFD7C5',
borderColor: '#F99B6F',
}],
}, {
color: '#DCFFF5',
name: 'Sample 3',
data: [{
x: 35,
x2: 70,
y: 2,
response: '400',
color: '#DCFFF5',
borderColor: '#35C097',
}],
}
],
});
<div id="sample">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/highstock.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/modules/xrange.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/highcharts-more.js"></script>
JSFiddle link
I don't know if I'm implementing it in the right or wrong way. Please guide me. TIA.
I'm working on Chrome version 85 on mac. Haven't tested it on other browsers.
Those features hasn't been implemented in the version of the Highcharts which you are using. In the current version everything works fine: https://jsfiddle.net/BlackLabel/trxjw4np/
In the x-range series type the legend item doesn't inherit the color from the series, but you can set it programmatically.
Demo: https://jsfiddle.net/BlackLabel/trxjw4np/
events: {
load() {
let chart = this;
chart.legend.allItems.forEach(item => {
item.legendSymbol.css({
fill: item.userOptions.color
})
})
}
}
API: https://api.highcharts.com/highcharts/chart.events.load
I have included a Highcharts chart embed on my website. Now I would like to create many additional charts using other series data. However, I would like all of these additional charts have exactly the same styling and be the same type as my chart1. The only things I will have to change in each chart is the subtitle and series name. I can easily just copy my chart1 code and rename it chart2, chart3 etc. and this works fine. However, I would very much like to just replicate my chart1 for the other data series while only changing subtitles and series name for each data series (CHART1 SUBTITLE and CHART1 SERIESNAME).
I have tried different solutions but none worked so far. Below is the code I have made for my chart1.
chartOptions.chart1 = {
chart: {
type: 'column'
},
title: {
text: 'CHARTNAME',
style: {
fontFamily: 'Montserrat,serif',
spacingTop: 30,
fontSize: '22px'
}
},
subtitle: {
text: 'CHART1 SUBTITLE',
align: 'left',
x: 55,
style: {
fontFamily: 'Montserrat,serif',
spacingTop: 25,
color: "#000",
fontSize: '14px'
}
},
xAxis: {
categories: [],
labels: {
rotation: -20,
}
},
yAxis: {
title: {
text: 'TITLETEXT',
rotation: 270,
y: -30
},
},
series: [{
name: 'CHART1 SERIESNAME',
color: '#006699',
data: []
}],
tooltip: {
}
},
};
Below is the code I use to initialize the series data in chart1. Here I have added a 'chart2' and I essentially hoped it would somehow be able to initialize that in 'chart1' and somehow also changing the chart subtitle and series name.
$('chart').ready(function() {
var tableName = '<?php echo $tableName; ?>'
$.getJSON("../companychart/chartdataNew.php", {id: escape(tableName)}, function(json) {
chartOptions.chart1.xAxis.categories = json['XAXIS NAME']['data'];
chartOptions.chart1.series[0].data = json['SERIES 1']['data'];
chartOptions.chart2.xAxis.categories = json['XAXIS NAME']['data'];
chartOptions.chart2.series[0].data = json['SERIES 2']['data'];
});
You can use Highcharts.merge method to extend default options (used in each chart) by particular chart options (series, subtitle). Check the demo posted below.
HTML:
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>
JS:
var chart1 = {
subtitle: {
text: 'CHART1 SUBTITLE',
},
series: [{
name: 'CHART1 SERIESNAME',
color: '#006699',
data: [1, 2, 3, 4, 5]
}]
},
chart2 = {
subtitle: {
text: 'CHART2 SUBTITLE',
},
series: [{
name: 'CHART2 SERIESNAME',
color: '#0034ef',
data: [5, 1, 2, 6, 2]
}]
},
chart3 = {
subtitle: {
text: 'CHART3 SUBTITLE',
},
series: [{
name: 'CHART3 SERIESNAME',
color: '#23ee45',
data: [3, 5, 2, 3, 1]
}]
},
chartDefaultOptions;
chartDefaultOptions = {
chart: {
type: 'column'
},
title: {
text: 'CHARTNAME',
style: {
fontFamily: 'Montserrat,serif',
spacingTop: 30,
fontSize: '22px'
}
},
subtitle: {
align: 'left',
x: 55,
style: {
fontFamily: 'Montserrat,serif',
spacingTop: 25,
color: "#000",
fontSize: '14px'
}
},
xAxis: {
categories: [],
labels: {
rotation: -20,
}
},
yAxis: {
title: {
text: 'TITLETEXT',
rotation: 270,
y: -30
},
}
};
Highcharts.chart('container1', Highcharts.merge(chartDefaultOptions, chart1));
Highcharts.chart('container2', Highcharts.merge(chartDefaultOptions, chart2));
Highcharts.chart('container3', Highcharts.merge(chartDefaultOptions, chart3));
Demo:
https://jsfiddle.net/BlackLabel/7utogs95/
I am working on a script that produces a chart (Highcharts). This work fine but I would like to add a "click" function which when clicked opens another scropt on the same site. After reading about clickable columns I am not sure how to make it work.
How would I made a column clickable to say google.com
The code I have is:
$(function () {
var categories=[];
var data2 =[];
var chart;
$(document).ready(function() {
$.getJSON("../charts/imaint_audit_water_temp_cold_chart.php", function(json) {
$.each(json,function(i,el) {
if (el.name=="Count")
categories = el.data;
else data2.push(el);
});
$('#container1').highcharts({
chart: {
renderTo: 'container',
type: 'column',
marginTop: 40,
marginRight: 30,
marginBottom: 50,
plotBackgroundColor: '#FCFFC5'
},
title: {
text: 'Failed cold water temperatures',
x: -20, //center
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '10px'
}
},
subtitle: {
text: '',
x: -20
},
xAxis: {
labels: {
enabled: false
}
},
yAxis: {
showFirstLabel: false,
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:2,
tickInterval: 10,
gridLineColor:'#ddd',
title: {
text: '',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '10px'
}
},
plotLines: [{
color: '#808080'
}]
},
legend: {
enabled: true,
itemStyle: {
font: '11px Trebuchet MS, Verdana, sans-serif',
color: '#000000'
},
itemHoverStyle: {
color: '#000000'
},
itemHiddenStyle: {
color: '#444'
}
},
colors: [
'#0066CC',
'#FF2F2F',
],
plotOptions: {
series: {
point: {
events: {
click: function() {
}
}
}
},
legendIndex:0,
dataLabels: {
enabled: true,
color: '#000000',
align: 'center',
cursor: 'pointer',
y: 0, // 10 pixels down from the top
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
}
},
credits: {
enabled: false
},
series: data2
});
});
});
});
Many thanks in advance for your time.
Here is explained: http://api.highcharts.com/highcharts#plotOptions.series.point.events.click
You could accomplish this with custom url in each bar:
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
location.href = this.options.url;
}
}
}
}
},
series: [{
data: [{
y: 29.9,
url: 'http://bing.com/search?q=foo'
}, {
y: 71.5,
url: 'http://bing.com/search?q=bar'
}, {
y: 106.4,
url: 'http://bing.com/search?q=foo+bar'
}]
}]
working fiddle: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-point-events-click-url/
or all the same URL:
point: {
events: {
click: function () {
location.href = "http://stackoverflow.com";
}
}
}
Hope it helps!
UPDATE
If is in a frame, you could try using:
window.top.location.href='URLGoesHere';
"_top" loads content in the top-level frameset (in effect, the whole
browser window), no matter how many nested levels down the current
frame is located
Trying to show description about y-axis labels as tooltip.
Is it possible to show corresponding tooltips on y-axis labels?
Here is the Fiddle where I am trying to add tooltip to y-axis lables
Code:
$(function(){
var chart1;
$(document).ready(function(){
var options = {
colors: ["#3ACB35", "#DE3A15", "#FF9A00", "#00B8F1"],
chart: {
renderTo: 'container',
type: 'bar',
backgroundColor: 'black',
borderColor: 'black',
borderWidth: 0,
className: 'dark-container',
plotBackgroundColor: 'black',
plotBorderColor: '#000000',
plotBorderWidth: 0
},
credits: {
enabled: false
},
title: {
text: 'Count Per Category',
style: {
color: 'white',
font: 'normal 22px "Segoe UI"'
},
align: 'left'
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.75)',
style: {
color: '#F0F0F0'
}
},
categories: {
enabled: 'true'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0,
itemStyle: {
font: '9pt Segoe UI',
color: 'white'
},
itemHoverStyle: {
color: 'grey'
}
},
xAxis: {
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5'],
tickInterval: 1,
labels: {
enabled: true,
style: {
color: 'white'
}
},
title: {
enabled: false
},
gridLineColor: '#222222'
},
yAxis: {
title:
{
enabled: true,
text: "Document Count",
style: {
fontWeight: 'normal',
color: 'white'
}
},
labels: {
style: {
color: 'white'
}
},
gridLineColor: '#222222'
},
exporting: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal',
cursor: 'pointer'
}
},
series: []
};
options.series = [{
data: [3, 4, 4, 3, 9]
}];
chart1 = new Highcharts.Chart(options);
});
})
For each category, I have a tooltip like:
cat1: descrption1
cat2: descrption2
cat3: descrption3
cat4: descrption4
When mouse is hovered on "cat1", "description1" need to be shown as tooltip.Somewhat like below:
Use formatter with HTML enabled for labels: http://jsfiddle.net/W5wag/2/
xAxis: {
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5'],
tickInterval: 1,
labels: {
enabled: true,
formatter: function() {
return '<span title="My custom title">' + this.value + '</span>';
},
useHTML: true,
style: {
color: 'white'
}
}
},
Of course you need store somewhere reference cat1 <-> description1 to feed span title with description.
Extending Paweł Fus' solution I define the label and title text by delimiting the values for categories using ' - '. The value can then be split into an array by the formatter to display the first array value as the label and the second array value as the title text: http://jsfiddle.net/wqpckxL7/
xAxis: {
categories: ['cat1 - the first and best category',
'cat2 - this category is less popular',
'cat3',
'cat4',
'cat5'],
tickInterval: 1,
labels: {
enabled: true,
formatter: function() {
// split using -
var values = this.value.split(" - ");
// check we have more than 1 value
if (values.length > 1) {
// use first item in the array as the displayed label and the second for the title text
return '<span title="' + values[1] + '">' + values[0] + '</span>';
} else {
// if only one value then format as normal
return this.value;
}
},
useHTML: true,
style: {
color: 'white'
}
},
}
Add pointFormat property to your tooltip object as:
tooltip: {
.....,
.....,
pointFormat: '<b>{point.y}</b>',
}
DEMO Link: