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,
}
});
});
Related
I have a chart where basically I want to set the alignment of the first/last labels on the x-axis to be left/right and any labels in between would be the default center. From what I can tell there is only a way to set the Labels.alignment property to apply to all labels and no clear way to individually align them
here is a before and after pic of what I am trying to achieve:
xAxis: {
title: {
enabled: false,
text: ''
},
crosshair: {
width: 2,
color: '#C4C4C4',
dashStyle: 'shortdot'
},
lineColor: 'transparent',
tickLength: 1,
labels: {
//overflow: 'justify',
step: 1,
formatter: function() {
console.log(this.value)
//if(this.value == 0 || this.value == 9)
return Highcharts.dateFormat("%b<br/>%Y", new Date(chartData.Dates[this.value]));
},
//align: 'center',
style: {
fontSize: '14px'
}
},
//tickPositions: [0,3,5,7,9]
},
any help would be appreciated, here is my working fiddle:
fiddle
You can use the render callback to find those labels and use the translate feature to move them.
chart: {
height: 300,
events: {
render() {
const xAxis = this.xAxis[0];
const ticksPositions = xAxis.tickPositions;
const ticks = xAxis.ticks;
const firstTickLabel = ticks[0].label;
const lastTickLabel = ticks[ticksPositions.length - 1].label;
firstTickLabel.translate(firstTickLabel.getBBox().width / 2, 0)
lastTickLabel.translate(-lastTickLabel.getBBox().width / 2, 0)
}
}
},
Demo: https://jsfiddle.net/BlackLabel/krL5ey1o/
API: https://api.highcharts.com/highcharts/chart.events.render
API: https://api.highcharts.com/class-reference/Highcharts.SVGElement#translate
I'm generating Charjs graphs in rails with wicked_pdf and wkhtmltopdf (ver 0.12.4). i've updated wkhtmltopdf gem from ver 0.12.3.1 to ver 0.12.4 because it uses a lot of RAM memory and takes too much time when generate long PDFs, but charjs graphs worked. Now, with the new version, occurs an error when responsive chart option is set to false:
When set it to true, there is no errors but it does not work, even if the parent block has width and height setting.
i don't know how to solve this with the newest version of wkhtmltopdf and gem downgrade isn't an option.
pls help.
i've tried by setting width and height to the parent container and chartjs canvas, more javascript_delay in wkhtmltpdf, no animations in charjs, onbeforeprint callback with recomended function by charjs doc
html
<div class="canvas-holder" style="width: 800px; height: 1200px;">
<canvas id="real-costs-bar-chart-1" width="800" height="1200" style="width: 800px; height: 1200px;"></canvas>
</div>
charjs code
var ctx = document.getElementById(canvas_id).getContext('2d');
new Chart(ctx, {
type: 'horizontalBar',
data: {
datasets: [{
label: 'Real',
data: data1,
backgroundColor: backgroundColor1,
borderColor: borderColor1,
borderWidth: 1
},
{
label: 'Proyectado',
data: data2,
backgroundColor: backgroundColor2,
borderColor: borderColor2,
borderWidth: 1
}
],
// These labels appear in the legend and in the tooltips when hovering different arcs
labels: labels
},
options:{
title: {
display: true,
text: title,
fontSize: 10,
fontColor: '#00397B',
lineHeight: 3
},
responsive: false,
legend:{
position: 'bottom',
fontSize: 10
},
scales: {
xAxes: [{
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
return 'USD ' + number_to_cl(value);
}
}
}]
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label =
data.datasets[tooltipItem.datasetIndex].label || '',
value =
data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
if (label) {
label += ': ';
}
label += 'USD ' + number_to_cl(value);
return label;
}
}
}
}
})
wicked_pdf config
pdf = WickedPdf.new.pdf_from_string(
template,
pdf: "Report_#{cost_report_type}", javascript_delay: 2000,
header: { content: header, spacing: 10 },
footer: { center: 'Pagina [page] de [topage]', spacing: 5 },
margin: {
top: 35,
bottom: 15
},
encoding: 'UTF-8',
zoom: 0.8,
orientation: 'Portrait'
)
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);
}
}
}]
});
});
Code is as below
chart: {
type: "funnel",
marginBottom: 25,
backgroundColor: "transparent",
events: {
load: function() {
var chart = this;
Highcharts.each(chart.series[0].data, function(p, i) {
chart.options.labels.items.push({
html: "less confident" + i,
style: { left: 550, top: 50 }
});
p.dataLabel.attr({
x: (chart.plotWidth - chart.plotLeft) / 2,
"text-anchor": "middle"
});
});
}
}
},
I see that you're trying to add a label for every point. Highcharts has build in functionality for this called data labels: https://api.highcharts.com/highcharts/series.line.dataLabels
Another approach is to use SVGRenderer.label: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label
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.