Highcharts: Graph not visible on ipad - ipad

The following chart displays fine in Safari and Chrome on the desktop; however, it will not show in either browser on the iPad (iOS 9, iPad Air 2). Only the background shows. Is there a setting for allowing the chart to show on mobile devices?
http://jsfiddle.net/quint/d7gr6r1g/6/
//-------------------------------------------------------
Highcharts.Renderer.prototype.symbols.line = function(x, y, width, height) {
return ['M',x ,y + width / 2,'L',x+height,y + width / 2];
};
//-------------------------------------------------------
Highcharts.setOptions({
chart:{
type:'bar',
margin:[5,15,10,100],
backgroundColor: '#383838',
},
credits:{enabled:false},
exporting:{enabled:false},
legend:{enabled:false},
title:{text:''},
xAxis:{
tickLength:0,
lineColor:'#ffffff',
lineWidth:1,
labels:{style:{fontWeight:'bold', color: '#ffffff'}},
},
yAxis:{
min:0,
minPadding:0,
maxPadding:0,
tickColor:'#ffffff',
tickWidth:1,
tickLength:3,
gridLineWidth:0,
endOnTick:true,
title:{text: ''},
labels:{
y:10,
style:{
color: '#ffffff',
fontSize:'8px'
},
formatter:function(){
if (this.isLast){
return this.value + ' %';
}
else{
return this.value;
}
}
}
},
tooltip:{
enabled:true,
backgroundColor:'rgba(255, 255, 255, .85)',
borderWidth:0,
shadow:true,
style:{fontSize:'10px',padding:2},
formatter:function() {
return this.series.name + ": <strong>" + Highcharts.numberFormat(this.y,2) + "</strong>";
}
},
plotOptions:{
bar:{
color:'rgba(102,112,86,1)',
shadow:false,
borderWidth:0,
},
scatter:{
marker:{
symbol:'line',
lineWidth:3,
radius:8,
lineColor:'rgba(195, 84, 19, 1)'
}
}
}
});
//-------------------------------------------------------
var chart1 = new Highcharts.Chart({
chart:{renderTo:'container1'},
xAxis:{
categories:['ROUND 1'], },
yAxis:{
max:100,
labels:{y:10,style:{fontSize:'8px', color: '#ffffff'}},
plotBands:[{from:0,to:100,color: 'rgba(209,219,183,1)'}]
},
series:[{name:'Measure',pointWidth:10,data:[80]},
{name:'Target',type: 'scatter',data:[90]},
{name:'Performance', type:'scatter',
dataLabels: {
style:{
color: '#ffffff',
fontSize:'10px',
},
enabled: true,
useHTML: true,
formatter: function() {
return '<div><img style="float: left; padding-right: 5px; min-width: 24px; max-width: 24px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA0My44IDI2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0My44IDI2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRkZGRkZGO30NCgkuc3Qxe2ZpbGw6I0ZEREI5NTt9DQo8L3N0eWxlPg0KPGc+DQoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTQzLjMsMy4zbC0xOS45LDIyYy0wLjgsMC45LTIuMiwwLjktMywwTDAuNSwzLjNDLTAuNiwyLjEsMC4zLDAsMiwwbDM5LjgsMEM0My41LDAsNDQuNCwyLjEsNDMuMywzLjN6Ii8+DQoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTQxLjIsMy4zTDIyLjYsMjMuOWMtMC40LDAuNC0xLjEsMC40LTEuNSwwTDIuNiwzLjNDMiwyLjcsMi41LDEuNywzLjQsMS43aDM3LjFDNDEuMywxLjcsNDEuOCwyLjcsNDEuMiwzLjN6Ig0KCQkvPg0KPC9nPg0KPC9zdmc+DQo="></div></div><div class="performance"style="text-align:center; font-size: 12px;"><div>' + this.point.value + '</div>';
}
},
data:[{x:0, value: '10%'}]
}]
});
//-------------------------------------------------------
var chart2 = new Highcharts.Chart({
chart:{renderTo:'container2'},
xAxis:{categories:['ROUND 2']},
yAxis:{
max:100,
labels:{y:10,style:{fontSize:'8px', color: '#ffffff'}},
plotBands:[{from:0,to:100,color: 'rgba(209,219,183,1)'}]
},
series:[{name:'Measure',pointWidth:10,data:[92]},
{name:'Target',type: 'scatter',data:[95]},
{name:'Performance', type:'scatter',
dataLabels: {
style:{
color: '#ffffff',
fontSize:'10px',
},
enabled: true,
useHTML: true,
formatter: function() {
return '<div><img style="float: left; padding-right: 5px; min-width: 24px; max-width: 24px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA0My44IDI2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0My44IDI2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRkZGRkZGO30NCgkuc3Qxe2ZpbGw6I0ZEREI5NTt9DQo8L3N0eWxlPg0KPGc+DQoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTQzLjMsMy4zbC0xOS45LDIyYy0wLjgsMC45LTIuMiwwLjktMywwTDAuNSwzLjNDLTAuNiwyLjEsMC4zLDAsMiwwbDM5LjgsMEM0My41LDAsNDQuNCwyLjEsNDMuMywzLjN6Ii8+DQoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTQxLjIsMy4zTDIyLjYsMjMuOWMtMC40LDAuNC0xLjEsMC40LTEuNSwwTDIuNiwzLjNDMiwyLjcsMi41LDEuNywzLjQsMS43aDM3LjFDNDEuMywxLjcsNDEuOCwyLjcsNDEuMiwzLjN6Ig0KCQkvPg0KPC9nPg0KPC9zdmc+DQo="></div></div><div class="performance"style="text-align:center; font-size: 12px;"><div>' + this.point.value + '</div>';
}
},
data:[{x:0, value: '5%'}]
}]
});
//-------------------------------------------------------
var chart3 = new Highcharts.Chart({
chart:{renderTo:'container3'},
xAxis:{categories:['ROUND 3']},
yAxis:{
max:100,
labels:{y:10,style:{fontSize:'8px', color: '#ffffff'}},
plotBands:[{from:0,to:100,color: 'rgba(209,219,183,1)'}]
},
series:[{name:'Measure',pointWidth:10,data:[75]},
{name:'Target',type: 'scatter',data:[75]},
{name:'Performance', type:'scatter',
dataLabels: {
style:{
color: '#ffffff',
fontSize:'10px',
},
enabled: true,
useHTML: true,
formatter: function() {
return '<div><img style="float: left; padding-right: 5px; min-width: 24px; max-width: 24px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNi41IDI2LjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI2LjUgMjYuNTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2Rpc3BsYXk6bm9uZTt9DQoJLnN0MXtkaXNwbGF5OmlubGluZTtmaWxsOiNGRkZGRkY7fQ0KCS5zdDJ7ZGlzcGxheTppbmxpbmU7ZmlsbDojRkREQjk1O30NCgkuc3Qze2ZpbGw6IzQwNEQyMjtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6MS41O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8ZyBjbGFzcz0ic3QwIj4NCgk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMzUuNiw3TDE1LjcsMjljLTAuOCwwLjktMi4yLDAuOS0zLDBMLTcuMSw3Yy0xLjItMS4zLTAuMi0zLjMsMS41LTMuM2gzOS44QzM1LjksMy42LDM2LjgsNS43LDM1LjYsN3oiLz4NCgk8cGF0aCBjbGFzcz0ic3QyIiBkPSJNMzMuNSw3TDE1LDI3LjVjLTAuNCwwLjQtMS4xLDAuNC0xLjUsMEwtNSw3Yy0wLjYtMC42LTAuMS0xLjcsMC43LTEuN2gzNy4xQzMzLjYsNS4zLDM0LjEsNi40LDMzLjUsN3oiLz4NCjwvZz4NCjxjaXJjbGUgY2xhc3M9InN0MyIgY3g9IjEzLjIiIGN5PSIxMy4yIiByPSIxMi41Ii8+DQo8L3N2Zz4NCg=="></div></div><div class="performance"style="text-align:center; font-size: 12px;"><div>' + this.point.value + '</div>';
}
},
data:[{x:0, value: ''}]
}]
});
//-------------------------------------------------------
var chart4 = new Highcharts.Chart({
chart:{renderTo:'container4'},
xAxis:{categories:['ROUND 4']},
yAxis:{
max:1000,
labels:{y:10,style:{fontSize:'8px', color: '#ffffff'}},
plotBands:[{from:0,to:1000,color: 'rgba(209,219,183,1)'}]
},
series:[{name:'Measure',pointWidth:10,data:[970]},
{name:'Target',type: 'scatter',data:[850]},
{name:'Performance', type:'scatter',
dataLabels: {
style:{
color: '#ffffff',
fontSize:'10px',
},
enabled: true,
useHTML: true,
formatter: function() {
return '<div><img style="float: left; padding-right: 5px; min-width: 24px; max-width: 24px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA0My44IDI2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0My44IDI2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRkZGRkZGO30NCgkuc3Qxe2ZpbGw6IzdCNjUzODt9DQo8L3N0eWxlPg0KPHBhdGggY2xhc3M9InN0MCIgZD0iTTAuNSwyMi43bDE5LjktMjJjMC44LTAuOSwyLjItMC45LDMsMGwxOS45LDIyYzEuMiwxLjMsMC4yLDMuMy0xLjUsMy4zSDJDMC4zLDI2LTAuNiwyNCwwLjUsMjIuN3oiLz4NCjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0yLjYsMjIuN0wyMS4yLDIuMmMwLjQtMC40LDEuMS0wLjQsMS41LDBsMTguNSwyMC41YzAuNiwwLjYsMC4xLDEuNy0wLjcsMS43SDMuNEMyLjUsMjQuMywyLDIzLjMsMi42LDIyLjd6Ii8+DQo8L3N2Zz4NCg=="></div></div><div class="performance"style="text-align:center; font-size: 12px;"><div>' + this.point.value + '</div>';
}
},
data:[{x:0, value: '10%'}]
}]
});
//-------------------------------------------------------
var chart5 = new Highcharts.Chart({
chart:{renderTo:'container5'},
xAxis:{categories:['ROUND 5']},
yAxis:{
max:500,tickInterval:100,
labels:{y:10,style:{fontSize:'8px', color: '#ffffff'}},
plotBands:[{from:0,to:500,color: 'rgba(209,219,183,1)'}]
},
series:[{name:'Measure',pointWidth:10,data:[475]},
{name:'Target',type: 'scatter',data:[450]},
{name:'Performance', type:'scatter',
dataLabels: {
style:{
color: '#ffffff',
fontSize:'10px',
},
enabled: true,
useHTML: true,
formatter: function() {
return '<div><img style="float: left; padding-right: 5px; min-width: 24px; max-width: 24px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA0My44IDI2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0My44IDI2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRkZGRkZGO30NCgkuc3Qxe2ZpbGw6IzdCNjUzODt9DQo8L3N0eWxlPg0KPHBhdGggY2xhc3M9InN0MCIgZD0iTTAuNSwyMi43bDE5LjktMjJjMC44LTAuOSwyLjItMC45LDMsMGwxOS45LDIyYzEuMiwxLjMsMC4yLDMuMy0xLjUsMy4zSDJDMC4zLDI2LTAuNiwyNCwwLjUsMjIuN3oiLz4NCjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0yLjYsMjIuN0wyMS4yLDIuMmMwLjQtMC40LDEuMS0wLjQsMS41LDBsMTguNSwyMC41YzAuNiwwLjYsMC4xLDEuNy0wLjcsMS43SDMuNEMyLjUsMjQuMywyLDIzLjMsMi42LDIyLjd6Ii8+DQo8L3N2Zz4NCg=="></div></div><div class="performance"style="text-align:center; font-size: 12px;"><div>' + this.point.value + '</div>';
}
},
data:[{x:0, value: '5%'}]
}]
});
//-------------------------------------------------------
$('.performance').parent().parent().css({'top': 0, 'margin-left': 245, 'margin-top': 0});

Related

How to aligned symbol in highcharts js?

Now it looks like this:
should be:
legend: {
floating: true,
align: 'left',
verticalAlign: 'top',
y: 0,
x: -20,
width: 150,
itemMarginTop: 12,
itemMarginBottom: 12,
alignItem: 'center',
textAlign: '40px',
itemStyle: {
fontFamily: 'Inter',
display: 'inline-block',
verticalAlign: 'middle'
},
labelFormatter() {
return `<span style="font-size: 14px;color: #595959;font-weight: 400;">${this.name}</span><br><span style="font-size: 18px;color: #1C1C1E;font-weight: 600;">${this.y}</span>`
} }
In style options for legend .highcharts-legend-item you can change position of item, there is no directly options in Highcharts for adjust symbol position related to label. In this solution, you need to use legend.useHTML to render legend items.
.highcharts-legend-item {
top: -10px !important;
}
Demo: https://jsfiddle.net/BlackLabel/6479m1y0/

Use Material UI theme attributes for styling highcharts - React

I have been using Material ui themes for styled components in React. Now, We have a requirement in our application to use highcharts. But I still wanted to retain the same themeing for highcharts as well. Is there a way we could integrate Material UI theme to style highcharts chart? I did google this a lot before finally deciding to raise the question here. I know that highcharts provide their own theme. But I do not want to make the code messier with multiple themes. Is there a way to achieve this in a cleaner way? Any help would be much appreciated. Thanks in advance!
Highcharts have a possibility to set themes by Highcharts.setOptions to create schemate fit to you. That you can see there are specific sets for charts elements for that material UI it's not changing charts looks.
https://www.highcharts.com/docs/chart-design-and-style/themes#creating-your-own-theme
// set the theme
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
chart: {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
borderWidth: 2,
plotBackgroundColor: 'rgba(255, 255, 255, .9)',
plotShadow: true,
plotBorderWidth: 1
},
title: {
style: {
color: '#000',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
subtitle: {
style: {
color: '#666666',
font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
}
},
xAxis: {
gridLineWidth: 1,
lineColor: '#000',
tickColor: '#000',
labels: {
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
yAxis: {
alternateGridColor: null,
minorTickInterval: 'auto',
lineColor: '#000',
lineWidth: 1,
tickWidth: 1,
tickColor: '#000',
labels: {
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: 'black'
},
itemHoverStyle: {
color: '#039'
},
itemHiddenStyle: {
color: 'gray'
}
},
credits: {
style: {
right: '10px'
}
},
labels: {
style: {
color: '#99b'
}
}
});

Highcharts: stacked bar charts tooltip enable shared and keep display arrow

When I enable tooltip.shared = true, The arrow will disappear like screen shot.
tooltip: {
shared: true
},
I want to keep arrow just like tooltip.shared = false
tooltip: {
shared: false
},
DEMO in here http://jsfiddle.net/puff0211/5sbfztur/
Does anyone know to accomplish this?
Thank you!
You can prevent from skipping the tooltip anchor in case tooltip is shared by wrapping move function. More about wrapping can be here: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts. Take a look at the example below.
DOCS Reference:
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
Example:
http://jsfiddle.net/u6d2bode/
You can use tooltip.formatter with some css to achieve nearly required behavior but not exactly same when shared: false .
$(document).ready(function() {
$('#container').highcharts({
chart: {
//type: 'column'
type: 'bar'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
shared: true,
useHTML: true,
backgroundColor: null,
borderWidth: 0,
formatter: function() {
//console.log(this.points)
var points = this.points;
var pointsLength = points.length;
var tooltipMarkup = pointsLength ? '<div class="callout right" >' + points[0].key + '<br/>' : '';
var index;
var y_value;
for (index = 0; index < pointsLength; index += 1) {
y_value = (points[index].y);
tooltipMarkup += '<span style="color:' + points[index].series.color + '">\u25CF</span> ' + points[index].series.name + ': <b>' + y_value + ' </b><br/>';
}
return tooltipMarkup + '</div>';
},
/*//you can use bellow code to adjust position
positioner: function(boxWidth, boxHeight, point) {
return {x:point.plotX,y:point.plotY};
}*/
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
div.callout {
background-color: rgba(247, 247, 247, 0.85);
background-image: -moz-linear-gradient(top, rgba(247, 247, 247, 0.85), rgba(247, 247, 247, 0.85));
position: relative;
color: #000;
padding: 5px;
border-radius: 3px;
box-shadow: 0px 0px 20px #444;
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
left: -20px;
top: 35%;
border-right: 10px solid rgba(247, 247, 247, 0.85);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
Fiddle demo
tooltip formatter
tooltip: {
shared: true,
useHTML: true,
backgroundColor: null,
borderWidth: 0,
formatter: function() {
var points = this.points;
var pointsLength = points.length;
var tooltipMarkup = pointsLength ? '<div class="callout right" >' + points[0].key + '<br/>' : '';
var index;
var y_value;
for (index = 0; index < pointsLength; index += 1) {
y_value = (points[index].y);
tooltipMarkup += '<span style="color:' + points[index].series.color + '">\u25CF</span> ' + points[index].series.name + ': <b>' + y_value + ' </b><br/>';
}
return tooltipMarkup + '</div>';
},
css
div.callout {
background-color: rgba(247, 247, 247, 0.85);
background-image: -moz-linear-gradient(top, rgba(247, 247, 247, 0.85), rgba(247, 247, 247, 0.85));
position: relative;
color: #000;
padding: 5px;
border-radius: 3px;
box-shadow: 0px 0px 20px #444;
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
left: -20px;
top: 35%;
border-right: 10px solid rgba(247, 247, 247, 0.85);
}

Highchart not displaying

I am creating a simple chart using highcharts. The chart seems not displaying.
Stuck at it for few hours and I could not figure out what is wrong. Is there anything I have missed out? Need some help here.
xhtml
<script type="text/javascript">
function renderChart(divId, chartType, chartTitle, chartData, categories){
var options = createOption(divId, chartType, chartTitle, categories);
options.series = $.parseJSON(chartData);
var chart = new Highcharts.Chart(options);
}
function createOption(divId, chartType, chartTitle, categories){
var options = {
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
chart: {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
borderWidth: 2,
plotBackgroundColor: 'rgba(255, 255, 255, .9)',
plotShadow: true,
plotBorderWidth: 1,
renderTo: divId,
type: chartType
},
title: {
text: 'JVM Heap Memory Usage Chart',
style: {
color: '#000',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
subtitle: {
text: 'Source: http://java-bytes.blogspot.com',
style: {
color: '#666666',
font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
}
},
xAxis: {
ridLineWidth: 1,
lineColor: '#000',
tickColor: '#000',
categories: $.parseJSON(categories),
labels: {
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
},
formatter: function() {
return this.value;
}
},
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
yAxis: {
minorTickInterval: 'auto',
lineColor: '#000',
lineWidth: 1,
tickWidth: 1,
tickColor: '#000',
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
},
text: 'Heap Memory Usage'
},
labels: {
formatter: function() {
return this.value +'MB';
},
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
}
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
tooltip: {
formatter: function() {
return ''+ this.x +': '+ Highcharts.numberFormat(this.y, 0, ',') +' MB';
}
},
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: 'black'
},
itemHoverStyle: {
color: '#039'
},
itemHiddenStyle: {
color: 'gray'
}
},
labels: {
style: {
color: '#99b'
}
},
series: []
};
return options;
};
</script>
<h1>Highcharts</h1>
<p:commandButton oncomplete="renderChart('container','area','Sample Chart','${pc_Test.chartData}', '${pc_Test.categories}');" action="#{pc_Test.loadChartData}" id="chartvalue_btn">
<div id="container" style="width: 100%; height: 500px"></div>
</p:commandButton>
java
/**
* Load Chart Data
*/
public void loadChartData() {
String _LOC = "[************loadChartData************]";
System.out.println(_LOC + "1.0");
W_test _w = getW_test();
setChartData("[{name:'Heap Size',data:[1024]},{name:'Used Heap',data:[942]}]");
setCategories("['14:31:12']");
}

SIFR: How much is too much?

First time poster here, using the "sifr3-r436" build.
I am doing work on my company's website and decided it was time for us to start employing some SIFR technology. So far, I have been able to figure it out quite easily, with the exception of a question or two. Basically, I have two burning questions that I would like answered.
1) How much SIFR is considered "ok"? Although I am only using SIFR for headlines, per the recommendations in the FAQ/Walk-through, I still have a substantial amount of text that I would like to convert to SIFR. Please view the website to get an idea of how much SIFR I'm using (Rockwell font headlines and subheads). Is this too much?
2) How do I control font color with SIFR? Obviously I know you can set it inside the 'sifr-config.js' file. However, I have many different colored headlines that I would like to use.. I'm currently doing it this way:
sIFR.replace(rockwell, {
selector: '.h3_sifr', css: '.sIFR-root { font-size: 18px; background-color: #a63f03; color: #bf7e04;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_green', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #597704;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_maroon', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #330000;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_blue', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #005995;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_cruise', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #016EA1;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_australia', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #277c5d;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_intl', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #1b2f15;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_us', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #32588b;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_hawaii', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #4a1e52;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_rail', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #304c2a;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_canada', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #0a2754;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_alaska', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #083c4b;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_sadc', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #630002;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_easternus', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #8b3100;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_lightgray', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #999999;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_medgray', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #666666;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_darkgray', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #333333;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_extended', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #175700;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_orange', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #a63f03;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
Now, as you can see, the only way I have been able to do the different colors is through a separate replace statement for each and every color. I tried changing the color 'inline' (i.e., <span class="h3_sifr" style="color:#123456></span>), but this does not work. Any tips?
I think you're using a bit too much sIFR. Try limiting it to just the main headers, and don't replace the links.
The CSS issue is a bit of a pickle, no easy answer there. You can copy the other shared properties to the rockwell object though, so you don't have to repeat those.
Also try to refrain from using transparency, and you shouldn't need to use forceSingleLine I think.

Resources