Has anyone ever tried to insert another chart with completely different data to the tooltip which is popping up when hovering over data points?
I have checked the possibilty to pass html to the formatter, but not sure how dynamically this is working.
I have a bubble chart and it would be perfect to add small line charts to the tooltips of the bubbles.
Yes, it is possible.
If you set tooltip's useHTML to true and create a chart in it, then you will get a chart in a tooltip.
Example: http://jsfiddle.net/n9z7r5uj/
$(function() {
$('#container').highcharts({
series: [{
type: 'bubble',
data: [[1,2,3],[4,1,6],[2,3,9]]
}],
tooltip: {
useHTML: true,
pointFormatter: function() {
var data = [this.x, this.y, this.z];
setTimeout(function() {
$('#chart').highcharts({
title: {
text: ''
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
animation: false,
data: data
}],
yAxis: {
title: ''
},
xAxis: {
categories: ['x','y','z']
}
});
}, 0);
return '<div id="chart" style="width: 100px; height: 150px;"></div>';
}
}
});
});
Related
I use a DrawChart method and try to set the logarithmic option to the yaxis to true without success:
The datas (for the series) contains :
"[{type:"bar",data:[1.19576304413727E-08,1.30322021618667E-07]}]"
I try to place the logarithmic : true option in several place without succes. For me it must be placed into the yaxis part.
Thank you in advance
chart.updateOptions({
series: datas,
chart: {
toolbar: {
show: showToolbar
},
animations: {
enabled: false
},
type: 'bar'
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '50%',
endingShape: 'rounded'
}
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
title: {
text: 'Masse'
},
categories: categories//,
//tickAmount: 10
},
yaxis: {
labels: {
formatter: function (value) {
//var ex;
return value.toExponential();
//return value;
}
},
title: {
text: unit
},
tickAmount: 10
//min: min,
//max: max,
//decimalsInFloat: 3
},
grid: {
padding: {
left: 50,
right: 50
}
},
legend: {
show: true,
position: 'bottom',
horizontalAlign: 'left',
showForSingleSeries: true,
showForNullSeries: true,
showForZeroSeries: true
},
})
I found the problem !
When you have log values really small (like 5.32E-9), the logarithm option doesnt work if you try to display the legend thrue a JS function.
So multiply by 1E10 the divide into the JS function (where you display the legend) by 1E10.
this is showing data json type from query database but can't show chart on page. what the problem?
The first image shows the results of a database query that I've already done1
whereas the second graphic image display json, but do not appear in my web page]2
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'pendapatan',
type: 'line'
},
title: {
text: 'PENDAPATAN DAN PENGELUARAN'
},
subtitle: {
text: 'Source: Data pendapatan dan pengeluaran harian'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Rupiah'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: []
}
$.getJSON("home/dashboard/show_pendapatan_pengeluaran", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
</script>
The tooltip in my Highchart is behaving strangely. It is living its own life. It doesn't show the tooltip of the point on which I hover, but shows the tooltip of any point randomly.
Here is a JSFiddle example: http://jsfiddle.net/AeV7h/9/
$(function () {
var data=[[28,0],[24,3],[16,10]];
var param= { WodTag: "cur_spd", Name: "Current speed", Color: "#C6C6C6", LineStyle: "Solid", SeriesType: "line", LineWidth: 2, TickInterval: null, MinValue: null, MaxValue: null, Decimals: 2 };
$('#container').highcharts({
chart: {
height: 700,
width: 400,
plotBorderWidth: 1,
plotBorderColor: '#E4E4E4',
},
xAxis: {
title: {
useHTML: true,
text: param.Name + "( m/s )",
},
gridLineWidth: 1,
min: param.MinValue,
max: param.MaxValue,
gridLineDashStyle: 'Dot',
tickInterval: param.TickInterval
},
yAxis: {
title: {
text: 'Depth(m)',
},
reversed: true,
tickLength: 50,
gridLineDashStyle: 'Dot'
},
title: {
text: null,
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
useHTML: true,
formatter: function () {
return this.y;
}
},
series: [{
name: param.Name,
data: data,
color: param.Color,
dashStyle: param.LineStyle,
lineWidth: param.LineWidth,
type: "line"
}]
});
});
Can anyone help and tell me why it is behaving like this, and how I can fix it?
Your problem is that your data is not sorted by increasing X value. If you read the Series.data documentation it says that (API):
Note data must be sorted by X in order for the tooltip positioning and data grouping to work.
You should always sort your data like this before handing it over to Highcharts. Highcharts doesn't sort any data. Doing it by hand for your example your data should look like this:
var data=[[16,10],[24,3],[28,0]];
As in this JSFiddle demonstration, and everything works as intended.
I've overridden the color of a bar in a bar chart by acting directly on the graphic. It works on initial load, but if I hover over the bar to display the tooltip, when I mouseout, it reverts to the default color, not my custom choice.
How would I edit the settings for that event on just the one bar.
See:
http://jsfiddle.net/WQkeQ/4/
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
max:4000,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
if(this.y > (this.series.chart.yAxis[0].max))
return this.series.name +': '+ this.y + ' max is smaller: '+this.series.chart.yAxis[0].max ;
else
return this.series.name +': '+ this.y;
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
credits: {
enabled: false
},
series: [{
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
},function(chart){
var max = chart.yAxis[0].max,
content = '<h2>Points</h2><br/>';
$.each(chart.series,function(i,serie){
$.each(serie.data,function(j,data){
if(data.y > max){
content += 'Point: '+data.y+' is bigger than max: '+max;
data.graphic.attr({fill:'silver'});}
});
});
$('#report').html(content);
});
});
});
Hover over silver bar.
Thanks,
Manisha
Manisha, You can use CSS property for elements to set the color for the single bar in the series.
use
data.graphic.css({color: 'silver' });
instead of
data.graphic.attr({fill:'silver'});
Fiddled Version.
Hope this helps.
I wrote following code:
$(function instituciju_sprendimu_priemimo_palyginimas() {
var chart;
$(document).ready(function () {
// Build the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container6',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Institucijų sprendimų priemimo statistika'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: ' ',
data: []
}]
});
chart.series[0].addPoint(['test1',100]);
chart.series[0].addPoint(['test2',200]);
});
});
I got the following error:
addPoint: Unable to get value of the property 'addPoint': object is
null or undefined.
I know, my question may be stupid, but I am just a newbie.
Take look at example: http://jsfiddle.net/WyDH8/ which works well. Also I suggest to place addPoint function to callback Highcharts, then you will avoid null object.
http://jsfiddle.net/WyDH8/1/
chart = new Highcharts.Chart({
//parameter...
},function(chart){
chart.series[0].addPoint(['test1', 100]);
chart.series[0].addPoint(['test2', 200]);
});