We Keep Coding

Make highcharts fullscreen also fullscreen the div wrapping the chart

Is there a way to make the div wrapping the chart part of the fullscreen as well?
This is my code: fiddle
THis code only fulscreens the chart. When I try and do to point the div I need in the fullscreen:
Highcharts.FullScreen = function(container) {
this.init(ontainer.parentNode.parentNode);
};
My fullscreen is getting cut off and also not adding the parent div to the full screen. Is there to make the whole div with id yo and the other div inside (<div>Random Data and text.......</div>) as part of the fullscreen?

You can connect the content of a custom element through chart.renderer.text().add() by specifying this element with the html() method:
chart.renderer.text(selector.html(), 0, 0).add();
...hiding this element through css, set the display: none:
.random_data {
display: none;
}
This is the piece of code to add:
function (chart) {
chart.renderer
.text($(".random_data").html(), 10, 10)
.css({
color: "green",
fontSize: "12px",
})
.add();
}
JavaScript:
let chart = Highcharts.chart(
"container",
{
chart: {
type: "column",
},
title: {
text: "",
},
xAxis: {
categories: ["one", "two", "three"],
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
},
},
yAxis: {
title: {
text: "",
},
endOnTick: false,
},
series: [
{
name: "books",
data: [
["one", 64161.71548379661],
["two", 3570.6197029028076],
["three", -200.70625619033547],
],
marker: {
symbol: "circle",
},
},
],
},
function (chart) {
chart.renderer
.text($(".random_data").html(), 10, 10)
.css({
color: "green",
fontSize: "12px",
})
.add();
}
);
let btn = document.getElementById("btn");
btn.addEventListener("click", function () {
Highcharts.FullScreen = function (container) {
console.log(container.parentNode.parentNode);
this.init(container.parentNode); // main div of the chart
};
Highcharts.FullScreen.prototype = {
init: function (container) {
if (container.requestFullscreen) {
container.requestFullscreen();
} else if (container.mozRequestFullScreen) {
container.mozRequestFullScreen();
} else if (container.webkitRequestFullscreen) {
container.webkitRequestFullscreen();
} else if (container.msRequestFullscreen) {
container.msRequestFullscreen();
}
},
};
chart.fullscreen = new Highcharts.FullScreen(chart.container);
});
CSS:
.random_data {
display: none;
}
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="yo">
<div class="random_data">Random Data and text.......</div>
<div id="container" style="height: 400px; margin-top: 1em;"></div>
</div>
<button id="btn">
Show full screen
</button>

How to rolloverSlice every 5 seconds in amCharts?

Is it possible to rolloverSlice a pie chart based on seconds without an event?
Is clicking or hovering the part of the chart is the only way to rollover a slice or is there anyway to forloop this by index to show the parts every seconds
Here is my code
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="asset--chart"></div>
<style>
#asset--chart {
width : 100%;
height : 500px;
font-size : 11px;
}
</style>
var pieChartData = [
{
asset: 'Funiture',
marketValue: 50000.00
}, {
asset: 'Cash',
marketValue: 6250.00
}, {
asset: 'Car',
marketValue: 10000.00
}, {
asset: 'Other',
marketValue: 11250.00
}
];
chartAsset = AmCharts.makeChart(
'asset--chart', {
type: 'pie',
dataProvider: pieChartData,
valueField: 'marketValue',
titleField: 'asset',
startEffect: 'easeOutSine',
pulledField: 'pullOut',
//pullOutOnlyOne: true,
// pullOutEffect: 'easeInSine',
responsive: {
enabled: true
},
labelsEnabled: false,
balloon: {
fillAlpha: 0.95,
borderThickness: 1,
borderColor: '#000000',
shadowAlpha: 0,
}
}
);
chartAsset.addListener('rollOverSlice', function(e) {
chartAsset.clickSlice(e.dataItem.index);
});
Here is the fiddle: http://jsfiddle.net/Lrktmwa5/

AmCharts provides manual rollOverSlice and rollOutSlice methods that take the index of the slice where you want to simulate hover and mouseout actions. You can call them in a setInterval or setTimeOut loop depending on your use case:
var counter = 0;
setInterval(function() {
//check if the previous slice is pulled out in order
//to simulate a mouseout action to pull it back in for this chart
if (chartAsset.chartData[(counter + (chartAsset.dataProvider.length - 1)) % chartAsset.dataProvider.length].pulled) {
chartAsset.rollOutSlice((counter + (chartAsset.dataProvider.length - 1)) % chartAsset.dataProvider.length);
}
chartAsset.rollOverSlice(counter);
counter = (counter + 1) % chartAsset.dataProvider.length;
}, 5000);
Demo below:
var pieChartData = [{
asset: 'Funiture',
marketValue: 50000.00
}, {
asset: 'Cash',
marketValue: 6250.00
}, {
asset: 'Car',
marketValue: 10000.00
}, {
asset: 'Other',
marketValue: 11250.00
}];
chartAsset = AmCharts.makeChart(
'asset--chart', {
type: 'pie',
dataProvider: pieChartData,
valueField: 'marketValue',
titleField: 'asset',
startEffect: 'easeOutSine',
pulledField: 'pullOut',
//pullOutOnlyOne: true,
// pullOutEffect: 'easeInSine',
responsive: {
enabled: true
},
labelsEnabled: false,
balloon: {
fillAlpha: 0.95,
borderThickness: 1,
borderColor: '#000000',
shadowAlpha: 0,
}
}
);
chartAsset.addListener('rollOverSlice', function(e) {
chartAsset.clickSlice(e.dataItem.index);
});
chartAsset.addListener('rollOutSlice', function(e) {
chartAsset.clickSlice(e.dataItem.index);
});
var counter = 0;
setInterval(function() {
//check if the previous slice is pulled out in order
//to simulate a mouseout action to pull it back in for this chart
if (chartAsset.chartData[(counter + (chartAsset.dataProvider.length - 1)) % chartAsset.dataProvider.length].pulled) {
chartAsset.rollOutSlice((counter + (chartAsset.dataProvider.length - 1)) % chartAsset.dataProvider.length);
}
chartAsset.rollOverSlice(counter);
counter = (counter + 1) % chartAsset.dataProvider.length;
}, 5000);
body, html {
width: 100%;
height: 100%;
margin: 0;
}
#asset--chart {
width: 100%;
height: 100%;
font-size: 11px;
}
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="asset--chart"></div>

How to highlights bar when click echart bar graph?

I have created a bar graph using the echarts library. How can I highlight the bar graph when the user clicks on a bar, or else apply the bar border when a bar is clicked?
Is there a way to highlight a bar when the click event is triggered for the bar?

Yes, there is a way to highlight a bar when click.
When the click event is triggered, you can get the exactly data(single bar) be clicked from the parameter, then you only need to change color(For example, decrease alpha) of this data to achieve the 'highlight' goal.
And don't forget recovery color of other data(not clicked) at same time.
check this demo
let echartsObj = echarts.init(document.querySelector('#canvas'));
option = {
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '直接访问',
type: 'bar',
barWidth: '60%',
data: [{
value: 10,
itemStyle: {
color: 'hsl(200,60%,45%)'
}
}, {
value: 52,
itemStyle: {
color: 'hsl(200,60%,45%)'
}
}, {
value: 200,
itemStyle: {
color: 'hsl(60,60%,45%)'
}
}, {
value: 334,
itemStyle: {
color: 'hsl(150,60%,45%)'
}
}, {
value: 390,
itemStyle: {
color: 'hsl(220,60%,45%)'
}
}, {
value: 330,
itemStyle: {
color: 'hsl(200,60%,45%)'
}
}, {
value: 220,
itemStyle: {
color: 'hsl(150,60%,45%)'
}
}]
}]
};
echartsObj.setOption(option)
echartsObj.on('click', function(params) {
console.log(params)
option.series[0].data.forEach((data, index) => {
if (index === params.dataIndex) {
if (!data.isChecked) {
data.itemStyle.color = getHighLightColor(data.itemStyle.color);
data.isChecked = true;
}
} else {
if (data.isChecked) {
data.itemStyle.color = getOrigColor(data.itemStyle.color);
data.isChecked = false;
}
}
})
echartsObj.setOption(option)
});
function getHighLightColor(color) {
return color.replace(/(\d+)%\)/, (...args) => {
return 20 + Number(args[1]) + '%)'
});
}
function getOrigColor(highlightColor) {
return highlightColor.replace(/(\d+)%\)/, (...args) => {
return Number(args[1]) - 20 + '%)'
});
}
<html>
<header>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
</header>
<body>
<div id="canvas" style="width: 100%; height: 200px">
</div>
</body>
</html>

Can be highlight like this:
chart.on('click', (params) => {
chart.dispatchAction({
type: 'highlight',
seriesIndex: params.seriesIndex,
dataIndex: params.dataIndex
})
})
The highlight style can be set using emphasis.itemStyle
The document can be found here: https://echarts.apache.org/en/api.html#action.highlight

Highcharts - Change value of text box when drilling down through chart

Tricky one to explain this so please bear with me.
I have this Large Tree Map created with Highcharts:
http://jsfiddle.net/mb3hu1px/2/
var data = {
"ARS": {
"01To03Years": {
"N": {
"ARGENTINA": 951433
}
},
"Above05Years": {
"N": {
"ARGENTINA": 3719665
}
}
},
"CNY": {
"03To05Years": {
"N": {
"CHINA": 162950484
}
}
},
"COP": {
"Above05Years": {
"N": {
"COLOMBIA": 323390000
}
}
},
"EUR": {
"01To03Years": {
"Y": {
"BELGIUM": 393292575
}
}
}
},
points = [],
currencyPoints,
currencyVal,
currencyI = 0,
periodPoints,
periodI,
yesOrNoPoints,
yesOrNoI,
currency,
period,
yesOrNo,
mil,
causeMil,
causeMilI,
causeName = {
'N': 'Country Name',
'Y': 'Country Name'
};
for (currency in data) {
if (data.hasOwnProperty(currency)) {
currencyVal = 0;
currencyPoints = {
id: 'id_' + currencyI,
name: currency,
color: Highcharts.getOptions().colors[currencyI]
};
periodI = 0;
for (period in data[currency]) {
if (data[currency].hasOwnProperty(period)) {
periodPoints = {
id: currencyPoints.id + '_' + periodI,
name: period,
parent: currencyPoints.id
};
points.push(periodPoints);
yesOrNoI = 0;
for (yesOrNo in data[currency][period]) {
if (data[currency][period].hasOwnProperty(yesOrNo)) {
yesOrNoPoints = {
id: periodPoints.id + '_' + yesOrNoI,
name: yesOrNo,
parent: periodPoints.id,
};
causeMilI = 0;
for (mil in data[currency][period][yesOrNo]) {
if (data[currency][period][yesOrNo].hasOwnProperty(mil)) {
causeMil = {
id: yesOrNoPoints.id + '_' + causeMilI,
name: mil,
parent: yesOrNoPoints.id,
value: Math.round(+data[currency][period][yesOrNo][mil])
};
currencyVal += causeMil.value;
points.push(causeMil);
causeMilI = causeMilI + 1;
}
}
points.push(yesOrNoPoints);
yesOrNoI = yesOrNoI + 1;
}
}
periodI = periodI + 1;
}
}
currencyPoints.value = Math.round(currencyVal / periodI);
points.push(currencyPoints);
currencyI = currencyI + 1;
}
}
Highcharts.chart('container', {
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
animationLimit: 1000,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 3
}],
data: points
}],
title: {
text: ''
}
});
#container {
min-width: 300px;
max-width: 600px;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>
<textarea name="text" id="text" cols="30" rows="10"></textarea>
And as you can see there is also a text area underneath.
What I want is for every level that is clicked through on the chart, the text area updates with some random text.
So for example on the first drill down, the text area could literally just print out level 1, the second drill down print level 2 etc. etc.
If anyone needs anything else from my end please let me know.
Many thanks:)

You can do this several ways. Here is how to do it with plotOptions.series.point.events.click. What you need to do is capture the point click and render some text. As you do not describe what text to show this will just update the textarea with the clicked point's properties name and value.
Highcharts.chart('container', {
series: [{
point: {
events: {
click: function() {
var thePointName = this.name,
thePointValue = this.value;
$('#text').val(function(_, val) {
return 'Category: ' + thePointName + ', value: ' + thePointValue;
});
}
}
},
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
animationLimit: 1000,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 3
}],
data: points
}],
title: {
text: ''
}
});
Live example.

stop redraw chart when chart types changes in highcharts

I am using three chart types Line, OHLC, Candlestick in highcharts.
I kept those options in buttons. I'm also drawing vertical and horizontal lines on charts.
The problem is, whenever I change chart type, objects(I mean the vertical and horizontal lines) should remain there.
But it just refreshed. I didn't use chart.redraw() function. I just call the method each time chart type is selected. Is there anyway if I change charts, objects should remain there?
function chart(type,printSma,linked,line,algo)
{
$('#container').highcharts('StockChart', {
credits: {
enabled : 0
},
rangeSelector : {
buttons: [{
type: 'month',
count: 1,
text: '1M'
}, {
type: 'month',
count: 3,
text: '3M'
},{
type: 'month',
count: 6,
text: '6M'
},{
type: 'all',
text: 'All'
}],
selected:3
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
title : {
text : currecny
},
xAxis :{
ordinal: false,
minRange : 3600000,
},
yAxis : [{
offset: 0,
ordinal: false,
height:280,
labels: {
format: '{value:.5f}'
}
}],
chart: {
events: {
click: function(event) {
var ren = this.renderer;
//if(event.ctrlKey)
if(line_type=='vertical')
{
chartt ='';
axis_value='';
chartt = this.xAxis[0];
axis_value=event.xAxis[0].value;
$("#line_popup_vertical").show();
$('#save_line_vertical').click(function(event) {
var label=document.getElementById("line_label_vertical").value;
if(label!=null)
{
var id = 'vertLine' + Math.random();
chartt.addPlotLine({
value: axis_value,
color: '#'+(Math.random()*0xEEEEEE<<0).toString(16),
width: 2,
id: id,
label : {
text : label
},
events: {
click: function(e) {
//this.axis.removePlotLine(this.id);
chartt.removePlotLine(id);
}
},
});
}
line_type="";
document.getElementById("line_label_vertical").value="";
$("#horizontal").removeClass("horizontal_hover");
$("#vertical").removeClass("vertical_hover");
$("#trend").removeClass("trend_hover");
$("#fibo").removeClass("fibo_hover");
$("#pointer").addClass("pointer_hover");
$("#line_popup_vertical").fadeOut();
});
}
/*else if(event.altKey)
{*/
else if(line_type=='horizontal')
{
chartt ='';
axis_value='';
chartt = this.yAxis[0];
axis_value=event.yAxis[0].value;
$("#line_popup_horizontal").show();
$('#save_line_horizontal').click(function(event) {
var label=document.getElementById("line_label_horizontal").value;
if(label!=null)
{
var id = 'horzLine' + Math.random();
chartt.addPlotLine({
value: axis_value,
color: '#'+(Math.random()*0xEEEEEE<<0).toString(16),
width: 2,
id: id,
label : {
text : label
},
events: {
click: function(e) {
//this.axis.removePlotLine(this.id);
chartt.removePlotLine(id);
}
},
});
}
/*var label=prompt('Label for Horizontal Line');
if(label!=null)
{
//chart.yAxis[0].removePlotLine('horzLine');
var chart ='';
var id = 'horzLine' + Math.random();
chart = this.yAxis[0];
chart.addPlotLine({
value: event.yAxis[0].value,
dashStyle: 'shortdash',
color: '#'+(Math.random()*0xEEEEEE<<0).toString(16),
width: 2,
id: id,
label : {
text : label
},
events: {
click: function(e) {
//this.axis.removePlotLine(this.id);
chart.removePlotLine(id);
}
},
});
}*/
line_type="";
document.getElementById("line_label_horizontal").value="";
$("#horizontal").removeClass("horizontal_hover");
$("#vertical").removeClass("vertical_hover");
$("#trend").removeClass("trend_hover");
$("#fibo").removeClass("fibo_hover");
$("#pointer").addClass("pointer_hover");
$("#line_popup_horizontal").fadeOut();
});
}
//else if(clickDetected)
else if(line_type=='trend')
{
var x1=event.xAxis[0].value;
var x2 = this.xAxis[0].toPixels(x1);
var y1=event.yAxis[0].value;
var y2 = this.yAxis[0].toPixels(y1);
/*ren.circle(x2, y2, 5).attr({
'stroke-width': 2,
stroke: 'red',
fill: '#636363',
zIndex: 3
}).add();*/
selected_point='['+x1+','+y1+']';
all_points.push(selected_point);
all_str=all_points.toString();
if(all_points.length>1)
{
//this.series[1].remove();
this.addSeries({
type : 'line',
name : 'Trendline'+(j++),
id: 'trend',
data: JSON.parse("[" + all_str + "]"),
color:'#'+(Math.random()*0xEEEEEE<<0).toString(16),
marker:{enabled:true}
});
//$("#horizontal").removeClass("horizontal_hover");
//$("#vertical").removeClass("vertical_hover");
$("#trend").removeClass("trend_hover");
//$("#fibo").removeClass("fibo_hover");
$("#pointer").addClass("pointer_hover");
$("#pointer").click();
}
}
if(all_points.length==2)
{
all_points=[];
}
},
},
},
plotOptions: {
line: {
events: {
click: function(event) {
this.remove();
}
}
},
series: {
events: {
click: function(event) {
//For Other Lines
if(line_type=='vertical')
{
chartt ='';
axis_value='';
chartt = this.xAxis;
axis_value=chartt.toValue(event.chartX);
$("#line_popup_vertical").show();
$('#save_line_vertical').click(function(event) {
var label=document.getElementById("line_label_vertical").value;
if(label!=null)
{
var id = 'vertLine' + Math.random();
chartt.addPlotLine({
value: axis_value,
color: '#'+(Math.random()*0xEEEEEE<<0).toString(16),
width: 2,
id: id,
label : {
text : label
},
events: {
click: function(e) {
//this.axis.removePlotLine(this.id);
chartt.removePlotLine(id);
}
},
});
}
line_type="";
document.getElementById("line_label_vertical").value="";
$("#horizontal").removeClass("horizontal_hover");
$("#vertical").removeClass("vertical_hover");
$("#trend").removeClass("trend_hover");
$("#fibo").removeClass("fibo_hover");
$("#pointer").addClass("pointer_hover");
$("#line_popup_vertical").fadeOut();
});
}
else if(line_type=='horizontal')
{
chartt ='';
axis_value='';
chartt = this.yAxis;
axis_value=chartt.toValue(event.chartY);
$("#line_popup_horizontal").show();
$('#save_line_horizontal').click(function(event){
var label=document.getElementById("line_label_horizontal").value;
if(label!=null)
{
var id = 'horzLine' + Math.random();
chartt.addPlotLine({
value: axis_value,
color: '#'+(Math.random()*0xEEEEEE<<0).toString(16),
width: 2,
id: id,
label : {
text : label
},
events: {
click: function(e) {
//this.axis.removePlotLine(this.id);
chartt.removePlotLine(id);
}
},
});
}
line_type="";
document.getElementById("line_label_horizontal").value="";
$("#horizontal").removeClass("horizontal_hover");
$("#vertical").removeClass("vertical_hover");
$("#trend").removeClass("trend_hover");
$("#fibo").removeClass("fibo_hover");
$("#pointer").addClass("pointer_hover");
$("#line_popup_horizontal").fadeOut();
});
}
//else if(clickDetected)
else if(line_type=='trend')
{
var x1=chartt.toValue(event.chartX);
//var x2 = this.xAxis[0].toPixels(x1);
var y1=chartt.toValue(event.chartY);
//var y2 = this.yAxis[0].toPixels(y1);
selected_point='['+x1+','+y1+']';
all_points.push(selected_point);
all_str=all_points.toString();
if(all_points.length>1)
{
//this.series[1].remove();
this.addSeries({
type : 'line',
name : 'Trendline'+(j++),
id: 'trend',
data: JSON.parse("[" + all_str + "]"),
color:'#'+(Math.random()*0xEEEEEE<<0).toString(16),
marker:{enabled:true}
});
//$("#horizontal").removeClass("horizontal_hover");
//$("#vertical").removeClass("vertical_hover");
$("#trend").removeClass("trend_hover");
//$("#fibo").removeClass("fibo_hover");
$("#pointer").addClass("pointer_hover");
$("#pointer").click();
}
}
if(all_points.length==2)
{
all_points=[];
}
}
}
}
},
series : [
{
//allowPointSelect : true,
type : type,
name : 'Stock Price',
id: 'primary',
data : onadata,
tooltip: {
valueDecimals: 2,
crosshairs: true,
shared: true
},
dataGrouping : {
units : [
[
'hour',
[1, 2, 3, 4, 6, 8, 12]
], [
'day',
[1]
], [
'week',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
[1]
]
]
}
},
]
});
}
$('#chart').find('input[name="selection"]').each(function(index, element) {
$(this).click(function(e) {
//console.log('I was clicked');
type=$(this).val();
printSma=true;
linked='primary';
period=15;
algo='SMA';
typ='trendline';
if(type=='line')
{
$(this).addClass("active_linee");
$("#ohlcc").removeClass("active_ohlcc");
$("#candlestickk").removeClass("active_candlestickk");
//$("#indicator_list").show();
//$("#indicator_list").removeClass('indicator_list_hover');
}
else if(type=='ohlc')
{
$(this).addClass("active_ohlcc");
$("#linee").removeClass("active_linee");
$("#candlestickk").removeClass("active_candlestickk");
//$("#indicator_list").hide();
//$("#indicator_list").removeClass('indicator_list_hover');
}
else if(type=='candlestick')
{
$(this).addClass("active_candlestickk");
$("#linee").removeClass("active_linee");
$("#ohlcc").removeClass("active_ohlcc");
//$("#indicator_list").hide();
//$("#indicator_list").removeClass('indicator_list_hover');
}
chart(type,printSma,linked,line,algo,typ);
});
});
});
<div id="chart" class="chart">
<!--<p>Select Chart Type : </p>-->
<div class="chart_type">
<div class="border_chart">
<input type="button" name="selection" value="candlestick" class="candlestickk" id="candlestickk" title="Candle Stick">
<input type="button" name="selection" value="ohlc" class="ohlcc" id="ohlcc" title="OHLC">
<input type="button" name="selection" value="line" class="linee" id="linee" title="Line">
</div>
</div>