So I have this issue where i pass in categories with html, but if I send in
foo
the only thing that comes out is
<a>foo</a>
Does anyone know why this happens? Here is the code for the highchart. This has worked before and I haven't changed anything that I can remember. These are all the details I have to post. How many more details do you need?
var test1 = Highcharts.chart('zoneChart', {
chart: {
type: 'bar',
height: 600
},
title: {
text: ''
},
xAxis: {
categories: categories,
labels: {
useHTML: true,
}
},
yAxis: {
min: 0,
max: 100,
title: {
text: null
}
},
tooltip: {
valueSuffix: '%',
formatter:function(){
var deviation = this.point.series.options.avvik;
var app = this.x;
var name = this.point.series.name;
var value = this.point.y
var html = this.point.series.name + ': <b>' + Highcharts.numberFormat(this.point.y,0,',','.') + '%</b><br/>';
$.each(deviation, function(i, item) {
/*<![CDATA[*/
if(item.key == app && item.avvik > 0) {
/*]]>*/
html = name + ': <b>' + Highcharts.numberFormat(value,0,',','.') + '%</b><br/><br />Har '+item.avvik+' avvik!';
}
})
return html;
}
},
credits: {
enabled: true,
},
legend: {
enabled: false,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
overflow: 'none',
crop: false,
useHtml: true
}
},
series: {
stacking: 'normal',
dataLabels: {
useHTML:true,
enabled: true,
color: '#FFFFFF',
align: 'right',
enabled: true,
overflow: 'none',
crop: false,
y: -10,
formatter: function(){
var app = this.x;
var html = '';
$.each(this.series.options.avvik, function(i, item) {
/*<![CDATA[*/
if(item.key == app && item.avvik > 0) {
/*]]>*/
html = '<img style="padding: 5px;" src="/css/icons/32/error.png" />';
}
})
return html;
}
}
}
},
credits: {
enabled: false
},
series: [seriesObject]
});
That behaviour was introduced in Highcharts 9 and it is intended. You can separate the click handlers from the config.
Highcharts.addEvent(Highcharts.Chart, 'load', e => {
[...e.target.renderTo.querySelectorAll('a.alerter')].forEach(
a => a.onclick = function () { alert(a.innerHTML); }
);
});
Live demo: https://codepen.io/TorsteinHonsi/pen/RwoWPqd
Please check this github issue: https://github.com/highcharts/highcharts/issues/15031 for more information.
Related
gridLineDashStyle of Highchart missing grid line at bottom when only one item as bellow demo.
https://jsfiddle.net/nra6d3fj/1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.1.4/highcharts.js"></script>
</head>
<body>
<div id="container2" style="min-width: 310px; max-width: 800px; height: auto; margin: 0 auto;"></div>
<script>
var categories = ['title 1'];
var maxYAxis = 2;
var heighLabelYAxis = 50;
Highcharts.chart('container2', {
colors: ['#37c3e1', '#e13767'],
chart: {
type: 'bar',
backgroundColor: null,
height: 76
},
navigation: {
buttonOptions: {
enabled: false
}
},
credits: {
enabled: false
},
title: {
text: false
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1,
formatter: function() {
var name = this.value.length > 10 ? this.value.substring(0, 10) + "..." : this.value;
return '<span title="'+this.value+'">' + name + '</span>';
},
useHTML: true,
},
gridLineDashStyle: 'dotted',
}, { // mirror axis on right side
gridLineDashStyle: 'dot',
gridLineWidth: 1,
gridLineColor: "#000000",
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: {
step: 1,
formatter: function() {
var name = this.value.length > 10 ? this.value.substring(0, 10) + "..." : this.value;
return '<span title="'+this.value+'">' + name + '</span>';
},
useHTML: true,
}
}],
yAxis: {
title: {
text: null
},
gridLineDashStyle: 'dot',
gridLineWidth: 1,
gridLineColor: "#000000",
tickInterval: 20,
min:-maxYAxis,
max: maxYAxis,
labels: {
formatter: function () {
return Math.abs(this.value) + '名';
},
},
},
legend: {
enabled: false,
},
plotOptions: {
series: {
stacking: 'normal',
pointWidth: categories.length < 13 ? 25 : (400 - heighLabelYAxis)/categories.length,
},
},
tooltip: {
//这里是浮动框
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + this.point.category +
': ' + Math.abs(this.point.y);
}
},
series: [{
name: '男性',
data: [-5],
}, {
name: '女性',
data: [2],
},]
});
</script>
</body>
</html>
I got error is gridLineDashStyle of Highchart missing grid line at bottom when only one item.
My expectation look like:
Anyone help me ?
Thank you!
You have to set gridLineWidth in the first xAxis also. Check the demo posted below.
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1,
formatter: function() {
var name = this.value.length > 10 ? this.value.substring(0, 10) + "..." : this.value;
return '<span title="' + this.value + '">' + name + '</span>';
},
useHTML: true,
},
gridLineDashStyle: 'dash',
gridLineWidth: 1
}, { // mirror axis on right side
gridLineDashStyle: 'dot',
gridLineWidth: 1,
gridLineColor: "#000000",
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: {
step: 1,
formatter: function() {
var name = this.value.length > 10 ? this.value.substring(0, 10) + "..." : this.value;
return '<span title="' + this.value + '">' + name + '</span>';
},
useHTML: true,
}
}]
Demo:
https://jsfiddle.net/BlackLabel/th0ymn69/
am trying to export highchart to image, my high chart contains arabic labels (captions) after export arabic text shows as question marks, i tried to add (useHTML) and changed the script encoding to (utf8) and it still showing as question marks.
var options = {
chart: {
style: {
fontFamily: 'arial'
},
height: 300,
events: {
drilldown: function (e) {
generateDrillDownJSON(e, false);
},
drillup: function (e) {
generateDrillDownJSON(e, true);
}
}
},
title: {
text: Var_ChartTitleText,
},
subtitle: {
text: Var_ChartSubtitleText,
},
tooltip: {
formatter: function () {
return this.point.name + ' : ' + this.y + ' %';
}
},
xAxis: {
categories: true
},
drilldown: Var_drilldown,
legend: {
enabled: true
},
plotOptions: {
allowhtml: true,
series: {
dataLabels: {
enabled: true,
formatter: function () {
return this.point.name + ' : ' + this.y + ' %';
}
},
useHTML: true,
shadow: true
},
pie: {
size: '100%',
showInLegend: true
}
},
series: Var_Series
};
when exporting it shows as below
I am using highcharts and facing the issue.
In my data I have different ratings for different quarters and I am trying
to show all "ratings" on xaxis for all "quarters".
enter code here
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
var response = {
"KBByRating":[
{
"FiscalQtr":"FY2018 Q4",
"FiscalQtrData":[
{
"Rating":"2.5",
"Count":1
},
{
"Rating":"4.0",
"Count":1
},
{
"Rating":"5.0",
"Count":1
}
]
},
{
"FiscalQtr":"FY2018 Q3",
"FiscalQtrData":[
{
"Rating":"2.33",
"Count":1
},
{
"Rating":"1.0",
"Count":3
},
{
"Rating":"5.0",
"Count":17
}
]
},
{
"FiscalQtr":"FY2018 Q2",
"FiscalQtrData":[
{
"Rating":"3.67",
"Count":1
},
{
"Rating":"5.0",
"Count":8
}
]
}
]
};
var ratings=[],ratingsCount=[],periodRatingData=[];
_.each(response.KBByRating, function(val){
ratings=[];
ratingsCount=[];
_.each(val.FiscalQtrData, function(main){
ratings.push(main.Rating),
ratingsCount.push(main.Count);
});
periodRatingData.push({
name: val.FiscalQtr,
data:ratingsCount
});
});
Highcharts.chart('container',
{
chart:{
type: 'column'
},
title: {
text: 'Knowledge Articles Published By Rating'
},
subtitle: {
text: ''
},
colors: ['#005073','#64e572','#24cbe5'],
xAxis: {
categories:ratings,
labels: {
formatter: function(){
var str = this.value;
if(str < 0){
str = '';
}
return str;
}
}
},
yAxis: {
min: 0,
title: {
text: 'Count',
align: 'middle'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return '' +'Count'+ ': ' + this.y;
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true
}
},
series: {
pointWidth: 40,
groupPadding: '.05',
shadow: false
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
floating: false,
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:12px">' + this.name + '</span>';
}
},
credits: {
enabled: true
},
exporting: {
enabled: true
},
series: periodRatingData
});
but I am getting only few ratings which is not correct. Could you please
help out to fix this.
Here I have created live example on jsfiddle:
https://jsfiddle.net/ugyef9ju/
I am using High chart to show charts in my website. for example:
$(document).ready(function(){
//Gender
var Result=[{"Name":"خانم","Value":59,"Percent":3,"Total":0,"Hours":null},{"Name":"آقای","Value":1708,"Percent":97,"Total":0,"Hours":null}];
var data =[] ;
for (var i in Result) {
var serie = new Array(Result[i].Name, Result[i].Value);
var data22 = [];
data22.push(Result[i].Value);
var obj = {
name: Result[i].Name,
y: Result[i].Value
}
data.push(obj);
}
FixedPieChart(data, "Gender", "بازدید کنندگان به تفکیک جنسیت", '1767', 50);
});
function FixedPieChart(series, elementId, title, total, marginBottom) {
var chart = Highcharts.chart(elementId,
{
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
style: {
fontFamily: 'B yekan',
fontSize: '14px',
color: 'black'
}
},
title: {
text: ""
},
tooltip: {
//pointFormat: '<span style="color:black;background-color:white"><span style="direction:rtl"><b>{point.percentage:.1f}%</b><br/>{series.name}</span></span>',
//useHTML: true,
//backgroundColor: '#ffffff',
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
allowOverlap: true,
format: '<span style="dirsction:rtl"><b>{point.name}</b>:{point.percentage:.1f}</span>',
style: {
color: 'black'
},
useHTML: true
},
showInLegend: true,
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
width: 200,
verticalAlign: 'middle',
useHTML: true,
labelFormatter: function () {
return '<div style="text-align: right; direction:rtl">' + this.name + ' ' + this.percentage.toFixed(1) + '%</div>';
},
// labelFormatter: function() {
// return '<div style="text-align: left; width:130px;float:left;">' + this.name + '</div><div style="width:40px; float:left;text-align:right;">' + this.percentage.toFixed(1)+ '%</div>';
//}
},
series: [{
name: ' از ' + total + ' نفر',
colorByPoint: true,
data: series
}],
credits: {
enabled: false
},
});
}
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body bg-light dark" id="Gender" style="direction: ltr !important;margin: 0 auto"></div>
in this example I rendered a pie chart. every thing is fine in rendering chart on the page. but after exporting labels are messed up. and labels are not showing correctly.
internationalization in highcharts. See demo at last.
There is use of useHTML: Highcharts.hasBidiBug, for RTL language.
I have disabled dataLables (tried but not working with useHTML: Highcharts.hasBidiBug,).
Hope this helps
$(document).ready(function() {
//Gender
var Result = [{
"Name": "خانم",
"Value": 59,
"Percent": 3,
"Total": 0,
"Hours": null
}, {
"Name": "آقای",
"Value": 1708,
"Percent": 97,
"Total": 0,
"Hours": null
}];
var data = [];
for (var i in Result) {
var serie = new Array(Result[i].Name, Result[i].Value);
var data22 = [];
data22.push(Result[i].Value);
var obj = {
name: Result[i].Name,
y: Result[i].Value
}
data.push(obj);
}
FixedPieChart(data, "Gender", "بازدید کنندگان به تفکیک جنسیت", '1767', 50);
});
function FixedPieChart(series, elementId, title, total, marginBottom) {
var chart = Highcharts.chart(elementId, {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
style: {
fontFamily: 'B yekan',
fontSize: '14px',
color: 'black'
}
},
title: {
text: ""
},
tooltip: {
//pointFormat: '<span style="color:black;background-color:white"><span style="direction:rtl"><b>{point.percentage:.1f}%</b><br/>{series.name}</span></span>',
//useHTML: true,
//backgroundColor: '#ffffff',
},
exporting: {
allowHTML: true
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
allowOverlap: true,
format: '<span style="dirsction:rtl"><b>{point.name}</b>:{point.percentage:.1f}</span>',
style: {
color: 'black'
},
useHTML: true
},
showInLegend: true,
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
width: 200,
verticalAlign: 'middle',
useHTML: true,
labelFormatter: function() {
return '<div style="text-align: right; direction:rtl">' + this.name + ' ' + this.percentage.toFixed(1) + '%</div>';
},
// labelFormatter: function() {
// return '<div style="text-align: left; width:130px;float:left;">' + this.name + '</div><div style="width:40px; float:left;text-align:right;">' + this.percentage.toFixed(1)+ '%</div>';
//}
},
series: [{
name: ' از ' + total + ' نفر',
colorByPoint: true,
data: series
}],
credits: {
enabled: false
},
});
}
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body bg-light dark" id="Gender" style="direction: ltr !important;margin: 0 auto"></div>
Update
Just add exporting.allowHTML in option in chart
exporting: {
allowHTML: true
},
Here is my HighCharts chart code:
chart = new Highcharts.Chart({
chart: {
type: 'bubble',
renderTo: 'graph',
backgroundColor: 'transparent',
events: {
load: function() {
this.renderer.image(backgroundImageURL, 230, 55, 720, 720).add(); // add image(url, x, y, w, h)
}
},
height: 788
},
plotOptions: {
bubble: {
color: 'white',
marker: {
fillColor: 'transparent'
},
// minSize: 100,
// maxSize: 700,
// zMin: 0,
// zMax: 100
},
series: {
cursor: 'pointer',
point: {
events: {
mouseOver: function(event) {
$('.rankings-column').find('span').removeClass('selected');
if (!this.selected) {
$('span#' + this.id).addClass('selected');
}
var donorrank = $('span#' + this.id).attr('id');
$report.html(donorrank + '. ' + this.name + ' <span>' + this.score + '%</span>');
$report.addClass('active');
},
mouseOut: function(event) {
$('.rankings-column span').each(function() {
$(this).removeClass('selected');
});
$report.removeClass('active');
$report.html('Donor Scoring');
},
click: function(event) {
if (!this.selected) {
window.open(this.url, '_self');
}
},
}
}
}
},
title: {
text: ''
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
yAxis: {
gridLineColor: 'transparent',
lineColor: 'transparent',
labels: {
enabled: false
},
title: {
text: ''
},
min: 0
,max: 100
},
xAxis: {
gridLineColor: 'transparent',
lineColor: 'transparent',
labels: {
enabled: false
},
offset: 0,
margin: 0
},
legend: {
enabled: false
},
series: [{
data: dataForChart
}]
});
backgroundImageURL is a JS var being passed through from the PHP page on which the chart displays.
This is in Worpress. Here is the PHP for that:
$styleSheetURI = get_stylesheet_directory_uri();
$backgroundImageURL = $styleSheetURI.'/img/ATI-graphs-main.png';
Here is how I turn it into a JS var:
<script type="text/javascript">
jQuery(document).ready(function($){
backgroundImageURL = <?php print(json_encode($backgroundImageURL)); ?>;
});
</script>
Here is the php echo:
http://www.thewebsite.org/wp-content/themes/ati/img/ATI-graphs-main.png
It alerts exactly the same from JS
The export works, but the image is not included.
Any ideas?
Thanks
Jacques