Hi I started getting the warning in Title. It used to work but now it does not work anymore :(
Any tips would be greatly appreciated!
Here is a jsfiddle. When hovering mouse over one of the two dots, the error is triggered from line 204 in the JS. It should display an image: https://jsfiddle.net/yngtp9xv/
tooltip: {
useHTML: true,
borderWidth: 0,
shadow: false,
formatter: function() {
return '<img src="./Earthmap.jpg" width="180" height="90" />'
},
According to the comments - it seems that there was something wrong with the image path. Changing it fixed the issue.
tooltip: {
useHTML: true,
borderWidth: 0,
shadow: false,
formatter: function() {
return '<img src="https://www.highcharts.com/samples/graphics/sun.png" width="180" height="90" />'
},
Demo: https://jsfiddle.net/BlackLabel/pv2hcxmk/
Related
I have a pretty busy chart that I need to clean up the overlapping datalabels on. I have tried all of the Highcharts options and previous forum answers I can find without much success. Here is my code on JSfiddle:
http://jsfiddle.net/cs4djfut/4/
plotOptions: {
column: { dataLabels: { allowOverlap: true, crop: false, overflow: 'none', enabled: true, formatter: function () { return this.series.name; } }, } },
Tried a function to change the datalabel position but it only worked on the fist datalabel.
Found a couple of posts that came close to solving this. I'm loading a chart into a widget and it's not filling it, instead it's centered and extended past the widget - about only 1/3 of the pie chart shows for example.
I found the resize options for gridster and it gets me almost there... the same problem exists when I load the page, but when I resize the widget the chart fills it in perfectly.
I've tried aligning the chart, removing width and height settings, addeing resize and stop elements to gridsters..
var gridster = null;
$(document).ready(function () {
gridster = $(".gridster ul").gridster({
widget_base_dimensions: ['auto', 140],
autogenerate_stylesheet: true,
min_cols: 1,
max_cols: 6,
widget_margins: [5, 5],
resize: {
enabled: true,
resize: function (e, ui, $widget) {
Highcharts.charts[0].reflow(); // reflow the first chart...
},
stop: function(e, ui, $widget) {
Highcharts.charts[0].reflow(); // reflow the first chart...
}
}
}).data('gridster');
$('.gridster ul').css({'padding': '0'});
});
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'User data',
style: {"fontSize": "15px" , "color":"red"},
},
subtitle: {
text: 'Source: Click the slices to view categories.'
},
plotOptions: {
pie: {
showInLegend: false,
dataLabels: {
formatter: function(){
console.log(this);
if (this.percentage > 5)
return this.key + ': ' + this.y;
else
this.point.visible = false;
return '';
}
}
},
series: {
dataLabels: {
enabled: true,
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
when page loads the pie chart is sized to fit into the gridster widget.
Add one div wrapper around widget and add class which having height and width of that widget. It will render your highchart graph in that wrapper only.
<div class="size-1x1">
Render your graph code here
</div>
CSS:
.size-1x1 {
height:100px;
width: 120px;
}
I have used pie chart in Highcharts and I have a strange issue with chrome browser. I am using it with rails and when the load the link for the first time everything looks fine.(find the image below)
When I navigate other menu and come back to Dashboard, the chart exceed the actual container which is in bootstrap column
<div class="row">
<div class="col-lg-6">
...
</div>
<div class="col-lg-6" id="chart_issues_count">
</div>
</div>
Highcharts code
$('#chart_issues_count').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Issues',
align: 'center',
verticalAlign: 'middle',
y: 5
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
display:'none',
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
size: 300,
startAngle: 0,
endAngle: 360,
center: ['50%', '50%']
}
},
series: [{
type: 'pie',
name: 'Issues',
innerSize: '70%',
data: [
['Open', open],
['In - Process', process],
['Solved', solved],
['Closed', closed],
['Re - Open', reopen]
]
}]
});
This happens only with chrome.I have tested with firefox, IE, Safari and in all the three browsers it works fine.
Is there any workaround for chrome?
Also I have tried with reflow as below and its not working
$(window).load(function(){
$('#chart_issues_count').highcharts().reflow();
});
edit
Chrome Version 51.0.2704.106 m
update
I noticed that styles are being applied only after the page loads. As a result it flashes content without styles for a moment and then the styles are applied. Is it a behaviour of rails?( I am pretty new to Ruby on Rails) It never happened with PHP which I am familiar with.
Finally I found the solution. I was using bootstrap CDN link and rails seems to load the CDN Link after $(document).ready(); ( I am not sure of it). I load the highchart in ready method where it takes 100% width of the column where the chart is being loaded(before bootstrap applies).
I installed the bootstrap gem and now everything working fine as expected.
https://github.com/twbs/bootstrap-sass
I should have better learning in rails structure and its working.
Steps to reproduce.
We have a chart that display 4 series of data, and we have the corresponding legends with each series.
THe initial chart is loaded with 1 years worth of data.
We then remove all data-series from the chart by clicking on the 4 legends
We then change the Zoom level of the chart - e.g. going from a 6 month zoom, to a 3 month zoom. (NOTE: We change Zoom with no data-series being displayed).
We then re-enable the data-series by clicking on the legends.
The chart does not redraw correctly. To get the chart to redraw we have to reload the entire page.
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 600px"> </div>
$(function() {
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
names = ['MSFT', 'AAPL', 'GOOG'],
colors = Highcharts.getOptions().colors;
$.each(names, function(i, name) {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?', function(data) {
seriesOptions[i] = {
name: name,
data: data
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter++;
if (seriesCounter == names.length) {
createChart();
}
});
});
// create the chart when all data is loaded
function createChart() {
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
navigator: {
enabled: false
},
legend: {
enabled: true
},
rangeSelector: {
selected: 4
},
scrollbar: {
enabled: false
},
yAxis: {
labels: {
formatter: function() {
return (this.value > 0 ? '+' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: seriesOptions
});
}
});
JsFiddle Example
It looks like a bug, so I've reported it to our devs here: https://github.com/highslide-software/highcharts.com/issues/1568
A simple workaround :
After some trial and error, I found out that if you do not disable the navigator, the above bug is not exhibited. (Navigator is enabled by default.)
Comment the line as shown below:
navigator: {
//enabled: false
}
Js Fiddle : http://jsfiddle.net/msjaiswal/FDXBu/1/
Certainly this is a bug in Highcharts but we can live with this above simple workaround.
This issue has been resolved in version 1.3.2 of HighStock.
Hi i've been playing around with sifr3 and seems to do an ok job lil bit slow to load but acceptable :).
However my problem stands with roll overs/hovers.
I'd like to be able to put an active state for the current page.
This i can do by just putting a style to the child for some reason ;) it turns to the default "a" color. But when i hover over the other links i'd like it to turn to the default color of a:link.
I've tried using javascript to change the css in the dom with according sifr3 selectors. But it seems that i would have to issue reload everytime. So i'm sort of stuck.
Here's my current code
sIFR.replace(myriad, {
wmode: 'transparent',
selector: ' .myriad2',
css: {
'.sIFR-root': { 'color': '#ffffff', 'background': 'transparent', 'letter-spacing': '0', 'leading': '-10', 'font-size' : '18' },
'a': { 'text-decoration': 'none', 'color': '#5DB9FA' },
'a:link': { 'color': '#ffffff' },
'a:hover': { 'color': '#5DB9FA' }
},
forceSingleLine: true,
filters: {
DropShadow: {
knockout: false,
distance: 2,
color: '#000000',
alpha: .75,
angle: 120
},
BevelFilter: {
distance: 8,
angle: 90,
highlightColor: 0x000000,
highlightAlpha: 1,
blurX: 5,
blurY: 5,
strength: 1,
quality: 3,
type: 'inner',
knockout: false
}
}
});
<!--nav-->
<ul >
<li class="myriad2"><a class="current" href="#"><span >Home</span></a></li>
<li class="myriad2"><span>What we do</span></li>
<li class="myriad2"><span >Who we are</span></li>
<li class="myriad2"><span>Contact Us</span></li>
</ul>
<!--end nav-->
I know not optimal and plan to move the css selector to #someId li
but i'm still playing around.
what would be ideal would be to add in the css
css: {
'.sIFR-root': { 'color': '#ffffff', 'background': 'transparent', 'letter-spacing': '0', 'leading': '-10', 'font-size' : '18' },
'.sIFR-root:hover a.active { 'color' : '#ffffff' },
'a': { 'text-decoration': 'none', 'color': '#5DB9FA' },
'.sIFR-root:hover a.active:hover { 'color' : '#5DB9FA' },
'a.active { 'color' : '#5DB9FA' },
'a:link': { 'color': '#ffffff' },
'a:hover': { 'color': '#5DB9FA' }
but that doesnt seem to work too good :/,
i'd love to see an example or some hints on how anyone has achieved it.