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.
Related
I am trying to use "solidgauge" chart from highcharts in backboneJS. Previously I had used a VU meter and it was working correctly. When I used solid gauge I am getting highcharts#17 error. As per this error either I am giving series.type or chart.type wrong else I don't have the necessary extension files. I have loaded the "highcharts.js", "highcharts-more.js", "highcharts-3d.js" and "exporting.js" files and the sibling VU meter worked.So i think there is something wrong with my chart options but can't seem to figure out what that is.Here is my chart configuration and I am giving the data for the series dynamically.I am using coffeescript.
scoreCard :
chart:
type: 'solidgauge'
title: null
pane:
center: ['50%', '85%']
size: '140%'
startAngle: -90
endAngle: 90
background:
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE'
innerRadius: '60%'
outerRadius: '100%'
shape: 'arc'
tooltip:
enabled: false
yAxis:
min: 0
max: 100
stops: [
[10, '#55BF3B']
[60, '#DDDF0D']
[90, '#DF5353']
]
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title:
y: -70
labels:
y: 16
plotOptions:
solidgauge:
dataLabels:
y: 5
borderWidth: 0
useHTML: true
credits:
enabled: false
series: [
{
name: "Pulse value"
}
]
I cant seem to figure out whether the fault is because of the chart configuration or any missing header file. Can anyone please help?
The solidgauge type has its own module that needs to be included, it's not part of the highcharts-more.js file.
As seen in the demo for the solidgauge chart:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/gauge-solid/
Files and reference:
https://code.highcharts.com/modules/solid-gauge.js
https://code.highcharts.com/
I got the same problem.
I fixed adding the following statements
import * as ChartModuleMore from 'highcharts/highcharts-more.js';
import HCSoldGauge from 'highcharts/modules/solid-gauge';
import Highcharts from 'highcharts'
ChartModuleMore(Highcharts);
HCSoldGauge(Highcharts);
Don't forget to add the files references:
<script src="../node_modules/highcharts/highcharts.js"></script>
<script src="../node_modules/highcharts/highcharts-more.js"></script>
<script src="../node_modules/highcharts/modules/solid-gauge.js"></script>
I want to add different opacity to each slice in a pie chart. It has to work in IE8. The most examples I find is using rgba, but since that does not work in IE8, the only way I can think of doing this is adding a css class to each slice. Is there any other way to do this, and if not, how can I add a css class to each slice?
The example seems to working fine.
IE8 8.0.6001.18702
data: [{
name: 'Firefox',
y: 45.0,
color: 'rgba(200,122,200,1)'
}, {
name: 'IE',
y: 26.8,
color: 'rgba(200,122,200,0.7)'
}, {
name: 'Chrome',
y: 12.8,
color: 'rgba(200,122,200,0.4)'
}]
Can someone please suggest if there is anyway we can rename the items in the export menu in highcharts. Currently it has entries like:
Download PNG image
Download JPEG image
...
I want to remove word "image". Moreover want to control the complete styling.
There are lots of options for this. Some can be done in Javascript, and I'm sure more can be done in CSS. Here is a JSFiddle example showing the desired text changes and some style changes.
You can read the details on this in the API under lang and navigation.
The text is changed with:
lang: {
printChart: 'Print chart',
downloadPNG: 'Download PNG',
downloadJPEG: 'Download JPEG',
downloadPDF: 'Download PDF',
downloadSVG: 'Download SVG',
contextButtonTitle: 'Context menu'
}
And the style of the button and menu with:
navigation: {
menuStyle: {
border: '1px solid #A0A0A0',
background: '#FFFFFF',
padding: '5px 0'
},
menuItemStyle: {
padding: '0 10px',
background: null,
color: '#303030',
fontSize: '11px'
},
menuItemHoverStyle: {
background: '#4572A5',
color: '#FFFFFF'
},
buttonOptions: {
symbolFill: '#E0E0E0',
symbolSize: 14,
symbolStroke: '#666',
symbolStrokeWidth: 3,
symbolX: 12.5,
symbolY: 10.5,
align: 'right',
buttonSpacing: 3,
height: 22,
// text: null,
theme: {
fill: 'white', // capture hover
stroke: 'none'
},
verticalAlign: 'top',
width: 24
}
}
You can get the default values from the source code, almost at the very top. Some of the defaults use variables that you won't have though, so you may need to change them. And as mentioned, CSS may get you the extra distance.
I have got problem. Around my 3D Pie Highchart, there is white space, but i have got Background, set by HTML, and i want to see it. So please how do I remove it?
Add backgroundColor: 'transparent',
$('#container').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
},
backgroundColor: 'transparent',
},
...
DEMO
set margin to 0
margin: [0,0,0,0]
here is a jsfiddle link for that
I hope this is the space you are looking to remove.
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.