We Keep Coding

How to set the enable property to a highcharts line in page load

If you want to understand my requirement , first you have to see this demo highcharts demo
. Now click on Tokyo from that demo chart, that tokyo line will be dissappear. Now I want to able to set that property in page load, I mean whenever the page is loaded, the tokyo link should be clicked and only one line should display, when I click on Tokyo then the tokyo line should display. You can find the source code from that demo itself Thank you in advance.

I think what you are after is a way to make only the clicked legend series show. If that is the case you can do it with the plotOptions.series.events.legendItemClick. To have only one series show up initially on the chart (but still show in the legend) you need to set that series' visible property to true and the others to false. If you want to have all series show on initial load that step can be ignored.
To get the toggle working you need to get the index of the legend item you clicked. You then loop through all the series in your chart to find the one that matches that clicked index. When it matches you set series\[i\].show() for the ones that don't you set series.hide().
Here is the basic toggling code:
series: {
events: {
legendItemClick: function (event) {
var seriesIndex = this.index;
var serie = this.chart.series;
console.log(seriesIndex);
for (i = 0; i < serie.length; i++) {
if (serie[i].index == seriesIndex) {
serie[i].show();
console.log(serie[i].index);
} else {
serie[i].hide();
}
}
return false;
}
}
}
And here is a live fiddle.

When creating chart, just set series.visible = false for series which should be hidden by default.
See docs.

amCharts pie chart how to customize the balloon text

I am using amCharts pie chart (v3) and I want to customize the pop up balloon that comes on mouseover on a slice: in addition to routine text like [[value]] [[percent]],
(a) a text that depends on the data item, and
(b) provide different click options to the user depending on data item. Every data row might not have these possibilities in which case the options should not appear.
For example, the pie chart might show wine consumption by country. On hover, I want to provide the user two different click options - one to see consumption by season if available, plus another to see consumption by age group if available.
Is it possible to do so in amCharts? I saw an exit for event clickSlice() here http://docs.amcharts.com/3/javascriptcharts/AmPieChart but nothing on how to modify the balloon text on the fly and add behavior to the balloon that comes on hover.
Will greatly appreciate your help.

For writing dynamic text in the balloon you can also do the folowing:
"graphs": [{
"balloonFunction": function(graphDataItem, graph) {
var value = graphDataItem.values.value;
if (value < 500) {
return value + "<br>(Little)";
} else {
return value + "<br>(A Lot)";
}
}
}],

You can use the following tags: [[title]], [[description]], [[value]] and [[percent]]. says the documentation.
I have used description for a custom field, it works fine.

You can add any custom field to your data provider and then display it in your balloon in the same way as value:
{value:15, title:"slice title", someCustomField:"some custom data"}
and then:
chart.balloonText = "[[someCustomField]]";

Persisting flot legend label checkbox on un-check

I have a scenario where I want to toggle series based on checkbox selection. I have added the checkbox to the legend using labelFormatting in legend option like:
var otherOptions = {
legend: {
container: legend,
labelFormatter: function (label, series) {
var cb = '<input type="checkbox" name="' + label + '" checked="checked" id="id' + label + '"> ' + label;
return cb;
}
},
};
And I have added the click event for the legend so that I can manipulate the series based on checked items. It all works fine except when I uncheck a label in legend, on re-draw it removes that series line from the legend as well. So for ex., below is the before and after image:
Before
After
Notice that in after image "USA" checkbox is missing.
Is there any way I can still show the unchecked "USA" checkbox in legend?
I looked at the suggestion here: flot graph, use legend to turn on/off series
But the only problem is that I don't want to have legend AND checkbox legend separate. The question on the given link was answered 1+ year ago so I thought I am gonna take a chance and ask the question again in case someone knows a way to do this.
Please let me know.
Thanks!

Instead of removing the series all together if the checkbox is unchecked, add it with empty data.
Something like this:
function plotByChoice(doAll)
{
$('#legend .legendCB').each(
function(){
if (this.checked)
{
data.push(datasets[someLabel]);
}
else
{
data.push({label: someLabel, data: []})
}
}
);
// plot call etc...
}
Working fiddle is here.

For anyone looking for a clean solution AND for Chart.js v3 :
This is unfortunately not possible for Chart.js v3 as legends are generated with text (no HTML can be appended to the legend itself, unfortunately).
We have to use generateLabels function to render the legend labels.
I suggest using the pointStyle option to render an image (checkbox, actually), instead of a rectangle by default, so we can rerender automatically everytime the user checks or not the legend (it's dynamic, ofc, and we don't have to do something complicated programmatically).
So, first, generate the 2 images, corresponding to the checkboxes (I'm using FontAwesome icons that I've generated in PNG from SVG files) :
let checkboxYes = new Image(14, 14);
checkboxYes.src = '/static/img/check_yes.png';
let checkboxNo = new Image(14, 14);
checkboxNo.src = '/static/img/check_no.png';
Then, we can use it in the Chart.js options:
legend: {
labels: {
usePointStyle: true,
generateLabels: function(chart) {
labels = Chart.defaults.plugins.legend.labels.generateLabels(chart);
for (var key in labels) {
labels[key].pointStyle = labels[key].hidden ? checkboxNo : checkboxYes
}
return labels;
}
}
},
Explanations
I'm setting usePointStyle to true so that I can customize the point style
later
Chart.defaults.plugins.legend.labels.generateLabels(chart) kind of pre generate the labels for me (and store it into labels), so it's like a function override!
Then for each label, I'm changing its pointStyle to the checkbox image depending on the hidden parameter (if the user checked the box)
Finally, return the labels
It's perhaps not the best solution, but works amazingly well for me:
Click here to see the animated result in GIF :)

"Always on " jquery command

recently i'm working on a project to make an interactive directory map for a mall without using flash, because they need to access from mobile devices.
but i have issue with jquery , i'm using custom java commands with jquery map highlight. which i use to target my mapcoords.
Method is invoked when someone clicks either on the map or the list below, it'll highlight the map and it'll show the information on right side.
My problem is when somebody clickd another shop from the list or from the map it won't clear the previous highlighted block and the previous one keeps highlighting, it doesn't matter how many time you click.
what i need is to refine my code such that when somebody clicks the 2nd link it will automatically clear the previous one.
anybody can see my demo file under below link
http://www.pad10.com/testsities/directorymap/
i'll appreciate if somebody help me with this

The problem is you don't turn off the highlight for currently selected area when clicking on another.
Place this:
$('.selected').data('maphilight', {alwaysOn: false}).trigger('alwaysOn.maphilight');
in your salhia.js, in the .mapclick click handler:
$('.mapclick').click(function(){
$('.selected').data('maphilight', {alwaysOn: false}).trigger('alwaysOn.maphilight');
$('.mapclick').removeClass('selected');
$(this).addClass('selected');
var shop = '.shopdetails#' + $(this).attr('shop');
var htmlCode = $(shop).html();
$('.shopinfo').fadeOut(500, function(){
$('.shopinfo .shopdetails').html(htmlCode);
$('.shopinfo').fadeIn(500);
});
});

Changed a bit the code shown on previous answer so it is more generic:
// Init
$('.map').maphilight({
stroke: false,
});
// Reset all map
$('.selected').data('maphilight', {alwaysOn:false}).trigger('alwaysOn.maphilight');
$('area').click(function(){
// Reset all areas with class 'selected'
$('.selected').data('maphilight', {alwaysOn: false}).trigger('alwaysOn.maphilight');
// Remove class selected
$('area').removeClass('selected');
// select and highlight this area
$(this).addClass('selected');
$(this).data('maphilight', {alwaysOn: true}).trigger('alwaysOn.maphilight');
});

Show Tipsy tooltip without hover?

all. I made one form for registration, but I want to show the messages for errors in my tooltip Tipsy. For this I must made some function to show the tooltip without hover on the ID object. I try to add new parameter in the default options like this:
$.fn.tipsy.defaults = {
delayIn: 0,
without_hover: true... }
And second in this function $.fn.tipsy = function(options)....
I add one check if the without_hover is true to show the tipsy like this:
if(options.without_hover == true) tipsy.show();
but it doesn't work. I will be happy on any solution.
Thank you.

If you are using the tipsy plugin, the syntax for manually showing a tooltip is:
$(selector).tipsy("show");