How to implement $(this).stop(); in jqueryUI
graph.hover(function() {
wrap
$(this).stop();
.animate( { height: "hide" }, 2000, name )
},
function() {
wrap
$(this).stop();
.animate( { height: "show" }, 2000, name );
});
Like this :
graph.hover(function() {
$(this).stop().animate( { height: "hide" }, 2000, function(){//Callback})
},
function() {
$(this).stop().animate( { height: "show" }, 2000, function(){//Callback});
});
Related
I'm using highchart map, that displays the USA state and its counties, but I want to show all cities of the selected state and when someone clicks on the city map it will display pop up model
I want to display all cities of the selected state and when someone clicks on the city map it will display a pop-up model.
The code I'm using right now
<div id="container"></div>
<script>
const drilldown = async function (e) {
// console.log('hover key', e.point.drilldown)
if (!e.seriesOptions) {
const chart = this,
mapKey = `countries/us/${e.point.drilldown}-all`;
// Handle error, the timeout is cleared on success
let fail = setTimeout(() => {
if (!Highcharts.maps[mapKey]) {
chart.showLoading(`<i class="icon-frown"></i> Failed loading ${e.point.name}`);
fail = setTimeout(() => {
chart.hideLoading();
}, 1000);
}
}, 3000);
// Show the Font Awesome spinner
chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>');
var topology = await
fetch(https://code.highcharts.com/mapdata/${mapKey}.topo.json)
.then(response => response.json());
// Load the drilldown map
// const topology = await fetch(`https://code.highcharts.com/mapdata/${mapKey}.topo.json`)
// .then(response => response.json());
const data = Highcharts.geojson(topology);
// Set a non-random bogus value
data.forEach((d, i) => {
d.value = i;
console.log('data',d)
});
// Apply the recommended map view if any
chart.mapView.update(
Highcharts.merge(
{ insets: undefined },
topology.objects.default['hc-recommended-mapview']
),
false
);
// Hide loading and add series
chart.hideLoading();
clearTimeout(fail);
chart.addSeriesAsDrilldown(e.point, {
name: e.point.name,
data,
dataLabels: {
enabled: true,
format: '{point.name}'
}
});
}
};
// On drill up, reset to the top-level map view
const drillup = function (e) {
if (e.seriesOptions.custom && e.seriesOptions.custom.mapView) {
e.target.mapView.update(
Highcharts.merge(
{ insets: undefined },
e.seriesOptions.custom.mapView
),
false
);
}
};
(async () => {
const topology = await fetch(
'https://code.highcharts.com/mapdata/countries/us/us-all.topo.json'
).then(response => response.json());
const data = Highcharts.geojson(topology);
const mapView = topology.objects.default['hc-recommended-mapview'];
// Set drilldown pointers
data.forEach((d, i) => {
d.drilldown = d.properties['hc-key'];
d.value = i; // Non-random bogus data
});
// Instantiate the map
Highcharts.mapChart('container', {
chart: {
events: {
drilldown,
drillup,
thrilup
}
},
title: {
text: 'Highcharts Map Drilldown'
},
colorAxis: {
min: 0,
minColor: '#E6E7E8',
maxColor: '#005645'
},
mapView,
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
plotOptions: {
map: {
states: {
hover: {
color: '#EEDD66'
}
}
}
},
series: [{
data,
name: 'USA',
dataLabels: {
enabled: true,
format: '{point.properties.postal-code}'
},
custom: {
mapView
}
}],
drilldown: {
activeDataLabelStyle: {
color: '#FFFFFF',
textDecoration: 'none',
textOutline: '1px #000000'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
x: 0,
y: 60
}
}
},
thrilup: {
activeDataLabelStyle: {
color: '#FFFFFF',
textDecoration: 'none',
textOutline: '1px #000000'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
x: 0,
y: 60
}
}
}
});
})();
I know how to hide a whole series,but I have no idea about how to hide a specific data in a series. here is part of my option:
series: [
{
data: [
{ x: 35, y: 35, z: 50.8, name: "A" ,visible:false},
{ x: 25, y: 75, z: 50.8, name: "B" },
{ x: 45, y: 55, z: 50.8, name: "C", color: "red" }
]
}
mydemo
visible:false is half works , the background is disappeared but the datalabel is still there , I want hide it , and no user interaction.
and I want tigger hide/show on a bubble click like this:
const onClickBubble = event => {
let currentPointName = event.point.name;
console.log(chartRef.current.chart.series[0].options.data);
option.series[0].data.forEach(element => {
if (currentPointName === element.name) {
element.color = "green";
} else {
//hide other bubble here
element.visible = false;
}
});
let NewOptoin = Object.assign({}, option);
setOption(NewOptoin);
};
so this :
events: {
load: function(){
var point = this.series[0].points[0];
['graphic', 'dataLabel'].forEach(function (key) {
if (point[key]) {
point[key].hide();
}
});
}
}
there is no series[x].points in chart option. so this way may not work for me.
You can hide a point in the load event:
chart: {
events: {
load: function(){
var point = this.series[0].points[0];
['graphic', 'dataLabel'].forEach(function (key) {
if (point[key]) {
point[key].hide();
}
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4805/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#hide
https://api.highcharts.com/highcharts/chart.events.load
I would like to know the ASP.net wrapper implementation of this JavaScript code
responsive: {
rules
rules: [{
condition: {
maxWidth: 370
},
chartOptions: {
chart: {
width: 250,
height: 400,
marginLeft: 40,
marginTop:-120
},
legend: {
x: -20,
y: 260,
floating: true,
align: 'left',
verticalAlign: 'top',
layout: 'horizontal',
width: 300
}
}
}]
}
I tried it this way , but not getting proper namespaces for Condition and ChartOptions
Responsive = new Responsive()
{
Rules= new List<ResponsiveRules>{
Condition = new ResponsiveRulesCondition()
{
MaxWidth = 375
},
ChartOptions
{
}
}
chartOptions is of object type
Responsive responsive = new Responsive()
{
Rules = new List<Highsoft.Web.Mvc.Charts.ResponsiveRules>()
{
new Highsoft.Web.Mvc.Charts.ResponsiveRules
{
ChartOptions = new { chart = new { className = "small-chart" } },
Condition = new ResponsiveRulesCondition() { MaxWidth = 500 }
}
}
};
This is in connection with my previous post (Add design to plotLabel Highcharts), Is there a way to make renderer.label responsive? see my screenshot below for further details. Here is the jsfiddle http://jsfiddle.net/x8vhp0gr/
plotlabel = yAxis.plotLinesAndBands[0].label;
plotbandLabel.animate({
y: yAxis.toPixels(y) - labelOffset
}, {
duration: 400,
step: function() {
this.attr({
text: yAxis.toValue(this.y + labelOffset).toFixed(2)
})
},
complete: function() {
this.attr({
text: y.toFixed(2)
})
}
}),
plotLine.animate({
translateY: newY
}, 400);
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,
}
});
});