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

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);
}

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/

Is it possible to make custom shaped label w/o use of html in highcharts?

I have animated moving label
plotbandLabel.animate({
y : yAxis.toPixels(y) - labelOffset
}, {
duration : 500,
step : function () {
this.attr({
text : yAxis.toValue(this.y + labelOffset).toFixed(2),
zIndex : 999999999
})
},
complete : function () {
this.attr({
text : y.toFixed(2),
zIndex : 999999999
})
}
});
Here is the full example: http://jsfiddle.net/7yo3nht4/
And I need this label to be shaped like an arrow:
If you omit fill property in renderer.label the label's box won't be created:
plotbandLabel = this.renderer.label(
(...)
)
.css({
(...)
}).attr({
(...)
//fill: 'red' // no fill
})
.add();
Then you can create a custom path and append it to the plotbandLabel SVG group:
this.renderer.path(['m', -10, 15, 'l', 15, -15, 'l', 50, 0, 'l', 0, 30, 'l', -50, 0, 'l', -15, -15, 'z']).attr({
fill: 'rgba(0, 0, 0, 0.75)'
}).add(plotbandLabel);
Live demo: http://jsfiddle.net/kkulig/hqyfpsw4/
API reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path
The label renderer has this form:
label: function (str, x, y, shape, anchorX, anchorY, useHTML, baseline, className)
So if useHTML=true the string could be an HTML string like this:
var txt = '<div class="arrow_box">'+(66).toFixed(2)+'</div>';
and applying a proper CSS:
.arrow_box {
color: #FFFFFF;
position: relative;
background: rgba(0, 0, 0, 0.75);
border: 0px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
width: 50px;
}
.arrow_box:after, .arrow_box:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 0, 0, 0)
border-right-color: rgba(0, 0, 0, 0.75);
border-width: 20px;
margin-top: -20px;
}
.arrow_box:before {
border-color: rgba(0, 255, 0, 0);
border-right-color: rgba(0, 0, 0, 0.75);
border-width: 20px;
margin-top: -20px;
}
You can obtain an arrow box as a label.
Check the fiddle updated: http://jsfiddle.net/beaver71/eenjkv5c/

Highcharts: Graph not visible on 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});

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