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.
Related
I have a horizontal bar chart with negative and positive values,
I noticed that gridlines have a slight offset to the left (maybe they get rounded?). Here is an image that illustrates my problem:
I tried to reproduce it in fiddle, but got slightly different result (please export png to see the image). It's hard to notice but negative bars don't start from zero.
So I am curios to know what is the root cause of the problem and potential fix you may suggest.
Thanks in advance!
Highcharts.chart('container', {
chart: {
type: 'bar',
styledMode: true,
events: {
load: function(){
const chart = this;
const gridLines = chart.yAxis[0].gridGroup.element.querySelectorAll('path');
console.log(gridLines);
const yTicks = chart.yAxis[0].ticks;
for(let tick of Object.keys(yTicks)){
if(yTicks[tick].pos === 0) {
const zeroGridLine = yTicks[tick].gridLine.element;
zeroGridLine.classList.replace('highcharts-grid-line','zero-line');
if(chart.seriesGroup) chart.seriesGroup.element.appendChild(zeroGridLine)
break;
}
}
}
}
},
title: {
text: 'title'
},
xAxis: {
categories: ['Medical care',
'Shelter',
'Personal services',
'Education',
'Furnishings',
'Communication',
'Recreation',
'Fuels and utilities',
'Apparel',
'Transportation',],
lineWidth: 1,
labels: {
align: 'left',
reserveSpace: true,
step: 1,
x:-5,
/* max: 9.5,
min: -0.5, */
style: {
whiteSpace: 'wrap',
textOverflow: 'visible'
}
}
},
yAxis: {
tickWidth: 1
},
series: [{
name: 'April 2020',
data: [
4.81, 2.62, 2.53, 2.15, 1.31, 1.12, 0.94, -0.35, -3, -8]
}, {
name: 'Jan 2020',
data: [4.48, 3.32, 2.11, 2.17, 0.66, 0.93, 1.41, 0.57, -1.26, 2.87]
}]
})
#import 'https://code.highcharts.com/css/highcharts.css';
#container {
min-width: 300px;
max-width: 300px;
height: 300px;
margin: 1em auto;
}
.highcharts-xaxis-labels {
font-size: 15px;
}
.zero-line {
stroke: black;
stroke-width: 1;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
I think that it is a bug. I reported it on the Highcharts Github issue channel where you can follow this thread or add your own opinion about this behaviour. The core developers will respond you.
https://github.com/highcharts/highcharts/issues/14302
I want to remove this triangle from panel, it comes while showing tooltip using extjs3.
CODE SNIPPET
var tooltipHide = new Ext.ToolTip({
anchor: 'bottom',
target: 'summaryButton',
anchorOffset: 0, // center the anchor on the tooltip
width: 300,
mouseOffset: [0, 25],
autoHide: false,
closable: false,
autoScroll: true,
html: '<div style="overflow:hidden;height:480px;width:300px;">' +
mycaseSummaryData + '</div>',
});
I am calling tooltip on mouseover event using tooltipHide.show().
You can do using css, In css you just need to set background-size: 0px;.
like below example:
<style>
.x-custom-tooltip .x-tip-anchor{
background-size: 0px;
}
</style>
In this FIDDLE, I have created a demo using your code and put some modification. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.onReady(function () {
new Ext.Panel({
title: 'Example of tooltip in ExtJS 3.4',
renderTo: Ext.getBody(),
padding: 10,
items: [{
xtype: 'button',
text: 'Summary Button',
listeners: {
afterrender: function (btn) {
btn.tooltipHide = new Ext.ToolTip({
anchor: 'bottom',
cls: 'x-custom-tooltip',
target: btn.getEl(),
anchorOffset: 0, // center the anchor on the tooltip
width: 300,
autoHide: false,
autoScroll: true,
html: '<span style="color: green;">This tooltip using showBy method and css....<span>',
});
btn.el.on('mouseover', function (e) {
this.tooltipHide.showBy(this.getEl(), 'tl-tr');
}, btn);
btn.el.on('mouseout', function (e) {
this.tooltipHide.hide();
}, btn);
}
}
}, {
xtype: 'tbspacer',
height: 20
}, {
xtype: 'button',
text: 'Summary Button 2',
listeners: {
afterrender: function (btn) {
btn.tooltipHide = new Ext.ToolTip({
target: btn.getEl(),
anchorOffset: 0, // center the anchor on the tooltip
width: 300,
mouseOffset: [0, 25],
autoHide: false,
closable: false,
autoScroll: true,
html: '<span style="color: red;">This tooltip show by without css and removed anchor.<span>',
});
btn.el.on('mouseover', function (e) {
this.tooltipHide.show();
}, btn);
btn.el.on('mouseout', function (e) {
this.tooltipHide.hide();
}, btn);
}
}
}]
});
});
var s1 = "{ name : \'Space1\', data :[5, 3, 4, 7] },";
var s2 = "{ name :\'Space2\', data:[5, 4, 7] },";
var s3 = "{ name : \'Space3\', data:[5, 3, 7] }";
var series = s1+s2+s3;
var chartdata = {
chart: {
type: 'column'
},
title: {
text: 'Cost/Env'
},
xAxis: {
categories: ['Prod', 'Test', 'Dev', 'Sandbox']
},
yAxis: {
min: 0,
title: {
text: 'Cost of apps'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: [{}]
};
chartdata.series.data = series;
$('#stackedBar1').highcharts(chartdata);
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="stackedBar1" style="display: inline; float: left; height: 300px; margin: 0px;"></div>
I have created a dashboard using Ko, highcharts and the data using JSON. I have to create a stacked bar chat, in which the series data is changing dynamically for each category. Example cat1 may have 3 series objects, and cat2 may have 0, cat3 may have 10 etc....I have two questions,
1. how to include this dynamic JSON objects into the series object. (I referred links, i got the solution, i have to try them)
2. Once i click on a bar-chat at a specific position(color), i have to show detailed information, (i already designed and currently showing in my dashboard, i need to switch to that part). Is their any information available to handle such situation.
thanks in advance,
shankar
1) You can use a ajax to load json (for example $.getJSON) and load data. Please not that data needs to be in correct format.
Further information about working with data you can find here
2) You can use tooltip formatter to customise content and print that on hover.
Referring to click event, you can add this action by point.events.click and then show your custom popup / div etc.
I have got a heat map with this colours:
colorAxis: {
min: 0,
max: 1,
minColor: '#a50022',
maxColor: '#007340',
gridLineColor: '#000000',
stops: [
[0, '#a50022'],
[0.5, '#fffbbc'],
[1, '#007340']
],
},
It works good, but now, I would like to define a color for some cases when I dont receive a value (between 0 and 1) but a string, so I can receive a "WARNING" and I would like to give it the colour red. For that I have tried to do this:
dataClasses: [{
name: "WARNING",
color: '#a50022',
},
],
And when I create the series:
myData.push([column, row , "WARNING"]);
This doesnt work, it is shown in black. I have also tried:
myData.push({y:[column, row ,"WARNING"],name:"WARNING"});
And everything crashes with this, no data shown.
In this case, I will only receive strings, no values, so I could delete the stops, min, max and that stuff. So I would just need a "heat map" where I could define the colours for each string value.
I believe this is now a setting you can specify in API http://api.highcharts.com/highmaps/plotOptions.heatmap.nullColor
nullColor: Color
The color to apply to null points.
Change:
myData.push({y:[column, row ,"WARNING"],name:"WARNING"});
To:
myData.push({x: column, y:row, name:"WARNING", color: 'red'});
Even you can set the color of a point in heatmap explicitly after generating it.
you can check out the below link.
Demo, Explicit select and color change HeatMap
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<title>Highcharts Demo</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
<button id="getselectedpoints"> Select Point</button>
<button id="changeColor"> Change color</button>
<script type='text/javascript'>//<![CDATA[
var heatMapData=[];
heatMapData.push({x: 1, y:1, name:"well_data1", color: 'red'});
heatMapData.push({x: 4, y:5, name:"well_data2", color: 'green'});
heatMapData.push({x: 6, y:10, name:"well_data3", color: 'blue'});
heatMapData.push({x: 9, y:5, name:"well_data4", color: 'yellow'});
var selfSelectedInHeatMap=false;
var heatMapChart = Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'HEAT MAP'
},
xAxis: {
min:1,
categories: [0,1,2,3,4,5,6,7,8,9,10,11],
gridLineWidth:1
},
yAxis: {
min:1,
categories: ['','a','b','c','d','e','f','g','h','i','j','m','n','o'],
gridLineWidth:1
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
enabled:false
},
plotOptions: {
series: {
point: {
events: {
select: function () {
selfSelectedInHeatMap = true;
alert("selected "+this.name + ' (' + this.series.yAxis.categories[this.y] +', ' +this.series.xAxis.categories[this.x] +')')
doHeatMapSelectionWork(this.name);
}
}
}
}
},
tooltip: {
formatter: function () {
return '<b>' + this.point.name + '</b> (' + this.series.yAxis.categories[this.point.y] +', ' +this.series.xAxis.categories[this.point.x] +')';
}
},
series: [{
name: 'Wells Data',
allowPointSelect: true,
cursor: 'pointer',
states: {
hover: {
color: '#a4edba'
},
select: {
borderColor: 'black',
borderWidth:5
}
},
borderWidth: 1,
data: heatMapData,
dataLabels: {
enabled: false
}
}]
});
function doHeatMapSelectionWork(name)
{
if(!selfSelectedInHeatMap)
{
var dataPoints = heatMapChart.series[0].data;
for(var i=0;i<dataPoints.length;i++)
{
if(dataPoints[i].name == name)
{
dataPoints[i].select();
break;
}
}
}
selfSelectedInHeatMap=false;
}
function changeColorForHeatMap(name)
{
var dataPoints = heatMapChart.series[0].data;
for(var i=0;i<dataPoints.length;i++)
{
if(dataPoints[i].name == name)
{
dataPoints[i].update({
color: 'pink'
});
break;
}
}
}
$('#getselectedpoints').click(function () {
doHeatMapSelectionWork('well_data1');
});
$('#changeColor').click(function () {
changeColorForHeatMap('well_data2');
});
//]]>
</script>
</body>
</html>
I am using qtip plug in to show balloon conversation on my page. i can load the balloon, but i am not seeing any option to close it automatically after some seconds.
This is how i am using qtip -
$('#ShowBalloon')
.click(function()
{
if($("#content a").data("qtip")) $("#content a").qtip("destroy");
$("#content a").html("") // Set the links HTML to the current opposite corner
.qtip({
content: { text: 'You have 1 new message.' },
position: {
corner: {
tooltip: 'bottomRight',
target: 'topRight'
}
},
show: {
when: false,
ready: true,
effect: { type: 'fade' },
length: 2000
},
hide: { when: 'inactive', delay: 1000 },
style: {
border: {
width: 1,
radius: 7,
color : "#00AFF0"
},
title: { 'color': 'red', 'overflow': 'hidden' },
width: 300,
color:'White',
background: '#00AFF0',
padding: 10,
textAlign: 'center',
tip: true,
}
});
});