I have a polar chart and I want to use little icon on label. The icon to use depend on data.
So I add an url with the icon in the data of the series but I cannot take it in the xAxis.
xAxis: {
labels: {
formatter: function() {
return '<image src='+this.point.icon+'/>';
},
useHTML: true
}
},
yAxis: {
max: 7,
tickInterval : 1
},
plotOptions: {
column: {
pointPadding: 0,
groupPadding: 0
},
series: {
stacking : "normal"
}
},
series: [{
name : 'Serie A',
color : "#76DFE4",
data : [
{name : "Data 1", y : 3, icon : "https://via.placeholder.com/15" },
{name : "Data 2", y : 3, icon : "https://via.placeholder.com/15" },
{name : "Data 3", y : 2, icon : "https://via.placeholder.com/15" }
],
},{
name: 'Serie B',
color : "#37C0F7",
data: [
{name : "Data 1", y : 1, icon : "https://via.placeholder.com/15" },
{name : "Data 2", y : 2, icon : "https://via.placeholder.com/15" },
{name : "Data 3", y : 3, icon : "https://via.placeholder.com/15" }
]
Please see the JSFiddle here : https://jsfiddle.net/gpn6mLah/9/
Thank you
You can refer to the icon property in this way:
xAxis: {
labels: {
formatter: function() {
var point = this.chart.series[0].userOptions.data[this.pos];
if (point) {
return '<image src=' + point.icon + '/>';
}
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/vdqk45no/
Related
How can i use Highstock rangeSelector get the yAxis Max_value and Min_Value ??
http://jsfiddle.net/r2wm5dyj/
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=new-intraday.json&callback=?', function (data) {
// create the chart
$('#container').highcharts('StockChart', {
title: {
text: 'AAPL stock price by minute'
},
subtitle: {
text: 'Using ordinal X axis'
},
xAxis: {
events: {
setExtremes: function(e) {
$('#Sdate').html( Highcharts.dateFormat(null, e.min));
$('#Edate').html( Highcharts.dateFormat(null, e.max));
}
}
},
rangeSelector : {
buttons : [{
type : 'hour',
count : 1,
text : '1h'
}, {
type : 'day',
count : 1,
text : '1D'
}, {
type : 'all',
count : 1,
text : 'All'
}],
selected : 1,
inputEnabled :false
},
series : [{
name : 'AAPL',
type: 'area',
data : data,
gapSize: 8,
tooltip: {
valueDecimals: 1
},
fillColor : {
linearGradient : {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops : [
[0, Highcharts.getOptions().colors[5]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
threshold: null[enter link description here][1]
}]
});
});
});
i find a solution in myself
xAxis: {
events: {
setExtremes: function(e) {
$('#Sdate').html( Highcharts.dateFormat(null, e.min));
$('#Edate').html( Highcharts.dateFormat(null, e.max));
},
afterSetExtremes:function(e)
{
var chart = $('#container').highcharts(),
extremes = chart.yAxis[0].getExtremes();
$('#HiestTemp').html(extremes.dataMax);
$('#LowestTime').html(extremes.dataMin);
}
}
},
I have two panes (yAxis:0 and yAxis:1) for two different sets of data series. When I use plotOptions Compare set to Percent, the second pane (yAxis:1) becomes blank (or actually I think the curve is pushed to the very top, but still not visible). If I remove the plotOptions section, then the second pane comes out just like I want it. But then I don't get the first pane the way I want it (normalized so I can see the percentage difference rather than absolute value).
Is there a way to apply the plotOptions only to the first pane / yAxis:0?
window.chart = new Highcharts.StockChart({
chart: {
renderTo : 'container'
},
title: {
text : 'Relative rates for <?=$stock1?>, <?=$stock2?>, and OMX30, and positions taken'
},
rangeSelector: {
buttons: [{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'year',
count: 4,
text: '4y'
}, {
type: 'all',
text: 'All'
}],
selected: 5
},
yAxis: [{
title: {
text: 'Normalized rates'
},
height: 250,
labels: {
formatter: function() {
return (this.value > 0 ? '+' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
}, {
title: {
text: 'Positions taken'
},
top: 300,
height: 100,
offset: 0,
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
}],
xAxis: {
type: 'datetime',
minRange: 1728000000 //Minimibredden på grafen i ms
},
plotOptions: {
series: {
compare: 'percent'
}
},
series: [{
name : '<?=$stock1?>',
data : json_data,
yAxis : 0,
tooltip: {
yDecimals: 2
}
},{
name : '<?=$stock2?>',
data : json_data2,
yAxis : 0,
tooltip: {
yDecimals: 2
}
},{
name : 'OMX30',
data : json_data3,
yAxis : 0,
tooltip: {
yDecimals: 2
}
},{
name : '<?=$stock1?>',
data : json_data4,
yAxis : 1,
tooltip: {
yDecimals: 1
}
},{
name : '<?=$stock2?>',
data : json_data5,
yAxis : 1,
tooltip: {
yDecimals: 1
}
}]
});
});
I am having a strange response when I show/hide series clicking in the legend. When I hide a serie the other is incorrectly drawn.
Here is my fiddle:
http://jsfiddle.net/JorgeDuenasLerin/kkE8h/36/
This is the code of the initialization
$('#container').highcharts('StockChart', {
yAxis : [{
height : 180,
lineWidth : 2
}, {
top : 220,
height : 180,
lineWidth : 2
}],
rangeSelector : {
selected : 5
},
tooltip: {
shared: true
},
legend : {
enabled : true
},
title : {
text : 'AAPL Stock Price'
},
series : [
{
name : 'Click on Me!',
data : data,
yAxis: 0,
tooltip: {
valueDecimals: 2
}
},
{
name : 'Click on Me!',
data : data2,
yAxis: 1,
tooltip: {
valueDecimals: 2
}
}
]
});
Someone knows something about it?
Indeed it looks like a known bug reported here: https://github.com/highslide-software/highcharts.com/issues/2348
I'm using highcharts in GXT application.
There are 2 charts in GXT collapsible panel,
one is column chart, the other one is pie chart
And there always pop up an exception showing
(TypeError): c is undefined
fileName: http://127.0.0.1:8888/js/highcharts.js
lineNumber: 118
columnNumber: 0
when injecting the json data for pie chart(column chart works normally).
Does any one can help me to check this?
Here is the JSON data for pie chart
{
"title" : {
"text" : "pie chart"
},
"chart" : {
"type" : "pie",
"renderTo" : "container",
"events" : {
"load" : function(event) { this.id = 'chart320002'; $wnd.registerChart(this, true);}
}
},
"series" : [ {
"name" : "COUNT",
"data" : [ [ "A", 37 ], [ "B", 23 ], [ "C", 21 ], [ "D", 21 ], [ "E", 23 ], [ "F", 19 ], [ "G", 20 ] ]
} ],
"exporting" : {
"buttons" : {"printButton":{"enabled":false}},
"type" : "img/png",
"url" : "http://127.0.0.1:8888/export/hiChart"
},
"credits" : {
"enabled" : false
},
"plotOptions" : {
"pie" : {"dataLabels":{"formatter":function(){return this.point.name+': '+$wnd.Highcharts.numberFormat(this.percentage,2)+'%';}}}
},
"xAxis" : {
"title" : {
"text" : "Compliant"
}
},
"yAxis" : {
"title" : { }
}
}
UPDATE: Include the code from the Highcharts web site, i.e. http://code.highcharts.com/highcharts.js. When I do this, I get pie charts!! Woot!
I have the same issue using different data. All of the line based charts plot correctly.
I copied your JSON to jsfiddle and it runs. Then I pasted your JSON into my project, same error, "c is undefined".
The only difference I can see is that when I do this:
$('#chart').highcharts({...});
I get $(...).highcharts is not a function, so I am using:
var chart = Highcharts.Chart({...});
Code for my pie chart that generates the same error.
var piechart = new Highcharts.Chart({
chart: {
borderColor: '#000000',
borderWidth: 2,
margin: 32,
renderTo: 'piechart',
type: chartType
},
series: [{
name: 'Channel',
data: [{
name: 'Web',
y: 75.6
},{
name: 'Mail',
y: 24.4
}]
}],
title: {
text: 'Revenue'
},
});
Which also runs in jsfiddler as $('#piechart').highcharts ..., but not my web page.
Simply put Highstocks seems to be rounding all of the data that I put into it, I need up to two decimal places shown which I have set up in the tooltip however at the moment all I am receiving for the two places are 0's. So instead of 1.5 its 1.
$.getJSON('mkjson.php?device=<?echo $device_name;?>&sensor=<?echo $sensor_name;?>&pin=<?echo $pin;?>&user=<?echo $_SESSION['user'];?>', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container',
zoomType: 'x'
},
rangeSelector : {
selected : 1
},
title : {
text : 'Device:<?echo $device_name;?>'
},
subtitle : {
text : 'Sensor:<?echo $sensor_name;?>'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
second: '%Y-%m-%d<br/>%H:%M:%S',
minute: '%Y-%m-%d<br/>%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%Y<br/>%m-%d',
week: '%Y<br/>%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
yAxis : {
title : {
text : '<?echo $unit;?>'
}
},
rangeSelector : {
buttons : [{
type : 'minute',
count : 10,
text : '10m'
}, {
type : 'hour',
count : 1,
text : '1H'
}, {
type : 'day',
count : 1,
text : '1D'
},
{
type : 'day',
count : 3,
text : '3D'
}],
selected : 3,
inputEnabled : false
},
series : [{
name : 'Voltage',
data : data,
tooltip: {
valueDecimals: 2
},
dataGrouping: {
enabled: false
}
}]
});
});
You can format numbers using Highcharts.numberFormat().
tooltip: {
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}
}
Demo: http://jsfiddle.net/em7h6/
Btw according to this sample: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/tooltip/valuedecimals/
using valueDecimals should also work, don't know whats missing in your case.
It should works http://jsfiddle.net/rbr23/ without using numberFormat();
chart: {
renderTo: 'container'
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
series: [{
data: [29.92, 71.51, 106.433, 129.12, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.61, 54.43]
}]