I am trying to create a dashboard page where if a user clicks on a point in a graph then all graphs with that unique identifier in a point should enable the tooltip to show. This works for all charts except for sparklines. The live demo below shows the default highcharts sparkline demo but mine just has one point (a bar graph with one point). The error is still the same:
Uncaught TypeError: Cannot read property 'tooltipOptions' of undefined
at a.Tooltip.refresh (highcharts.src.js:22676)
The code I am using to show/hide tooltips is:
function chartPointClick(pointidx) {
var chartArray = Highcharts.charts;
for (var i = 0; i < chartArray.length; i++) {
var thechart = Highcharts.charts[i];
var theData = thechart.series[0].data;
if (thechart.renderTo.tagName == 'TD') {
var theSeries = thechart.series[0]
console.log(theSeries);
thechart.tooltip.refresh(theSeries.options.data[0]);
}
thechart.redraw();
}
}
This is called via the plotOptions.series.events method:
events: {
click: function (event) {
chartPointClick(event.point.idx);
}
}
How can I activate the sparkline tooltips?
Live demo.
EDIT -
Live demo using single bar chart which is not functioning.
The tooltip refresh method accepts the first argument only as an array of points:
if (thechart.renderTo.tagName == 'TD') {
var theSeries = thechart.series[0]
thechart.tooltip.refresh([theSeries.points[0]]);
}
Next problem here is outside option for the tooltip, which causes another error. I recommend you to use:
td,
th {
...
overflow: visible !important;
}
Live demo: https://jsfiddle.net/BlackLabel/qx31oa7m/
API: https://api.highcharts.com/highcharts/tooltip.outside
Related
I am working on something similar to the this.
This visualization shows all items in the legend at the time of loading. What I am trying to do is that when the visualization loads there are only few items checked in the legend and also visible on the chart for example: Tyrell Corp, Stark Ind and Rekall. For rest of them, I should have the option to turn on/make visible.
This is only required at the time of loading. After that I want the legend to behave normally as is does in this example.
I think something needs to change in this part of the code:
// Get a unique list of Owner values to use when filtering
var filterValues = dimple.getUniqueValues(data, "Owner");
// Get all the rectangles from our now orphaned legend
myLegend.shapes.selectAll("rect")
// Add a click event to each rectangle
.on("click", function (e) {
// This indicates whether the item is already visible or not
var hide = false;
var newFilters = [];
// If the filters contain the clicked shape hide it
filterValues.forEach(function (f) {
if (f === e.aggField.slice(-1)[0]) {
hide = true;
} else {
newFilters.push(f);
}
});
// Hide the shape or show it
if (hide) {
d3.select(this).style("opacity", 0.2);
} else {
newFilters.push(e.aggField.slice(-1)[0]);
d3.select(this).style("opacity", 0.8);
}
// Update the filters
filterValues = newFilters;
// Filter the data
myChart.data = dimple.filterData(data, "Owner", filterValues);
// Passing a duration parameter makes the chart animate. Without
// it there is no transition
myChart.draw(800);
});
Replace this:
// Get a unique list of Owner values to use when filtering
var filterValues = dimple.getUniqueValues(data, "Owner");
with this:
var filterValues = [];
var shapes = myLegend.shapes[0];
//By default, have only three owners showing up and the rest faded.
for (var i=0; i < shapes.length; i++)
{
if (i < 3)
{
var filterValue = $("text", shapes[i]).text();
filterValues.push(filterValue);
}
else
{
var rect = $("rect", shapes[i]);
rect.css("opacity", 0.2);
}
}
// Filter the data and redraw the chart to show only for three owners.
myChart.data = dimple.filterData(data, "Owner", filterValues);
myChart.draw();
I have a float graph as shown in the figure. I need to highlight a label when a corresponding plot is clicked.
/*The below is my function where my HTML is defined in JavaScript*/
function insertlabel()
{
placeholder.find("ticklabels").remove();
var html=['<div class="ticklabels" style="font-size:smaller; color:'+options.grid.color+'">'];
function addlabels(axis,labelgenerate){
for(var i=0;i<axis.ticks.length;++i){
var tick=axis.ticks[i];
if(!tick.label||tick.v<axis.min||tick,v>axis.max)
continue;
html.push(labelgenerate(tick,axis));
}
}
}
//This is the addlabel function
addlabels(axes.yaxis,function(tick,axis){
return '<div id="text" style=position: absolute ; some calculation +ticklabel /div>'
}
/*The jquery code is as follows.*/
$(this).click(function() {
$('#text').each(function() {
$(this).css('color','#C4BD97')
});
});
This is the jquery code i tried but its highlighting only the last label whichever plot is clicked. I want to highlight only the corresponding label when its series plot is clicked.
Here's an example that'll highlight the y axis label of the y value of the point clicked. I didn't bother replacing flot's axis labels with custom labels, as you seem to be doing (I'm not sure where you are going with all that).
$("#placeholder").bind("plotclick", function (event, pos, item) {
if (item){
var yVal = item.datapoint[1];
var yAxis = plot.getAxes().yaxis;
for (var i = 0; i < yAxis.ticks.length; i++){
if (yAxis.ticks[i].v == yVal){
yCor = yAxis.p2c(yVal);
$('#arrow').css({'display':'block','top':yCor});
}
}
}else{
$('#arrow').css({'display':'none','top':yCor});
}
});
Fiddle here.
I need to set the plotOptions -> events -> legendItemClick but manually on button click.
I though it would be something like chart.plotOptions.events.legendItemClick = function() {...}; but that obviously wasn't the solution.
I am not even sure if this is possible and I have to implement it on chart creation ONLY.
Any guidance on this is much appreciated. Thanks.
Setting in highcharts via creation:
plotOptions: {
series: {
events: {
legendItemClick: function() {
// Do something
}
}
}
}
What I want to do... (Post creation)
var chart = $('#container').highcharts(); // Get the highcharts
// This doesn't work
chart.plotOptions.series.legendItemClick = function() { // Set the legendItemClick
// Do something
}
We do it but within the legendItemClick itself. This work for us as we only have 2 states. The first is the initial load where we let the chart built with default legend click actions (all series are visible, clicking on a series in the legend hides that series, clicking on that series again shows it). The other state is when a user has selected a display option in a ddl that removes all but one series as being visible and then the user can click on a legend item and only show that item. We do it like:
function(event) {
var e = document.getElementById('" & gModeElementId & "');
var strGraphMode = e.options[e.selectedIndex].value;
if (strGraphMode == 'single') {
var seriesIndex = this.index;
var serie = this.chart.series;
for (i = 0; i < serie.length; i++) {
if (serie[i].index == seriesIndex) {
serie[i].show();
var ctitle = this.chart.yAxis[0].axisTitle;
ctitle.attr({text: serie[i].name});
} else {
serie[i].hide();
}
}
return false;
}
}
We also have not found a way to actually modify an existing legendItemClick function.
I have the below code:
onRegionClick: function (event, code) {
// search for the state based on the code of the region clicked.
for (var r = 0; r < mapData.stateList.length; r++) {
if (mapData.stateList[r].state == code) {
if (mapData.stateList[r].markets.length == 1) {
// state only has one region - navigate to it.
window.location = mapData.stateList[r].markets[0].url;
break;
} else {
// state has multiple regions - zoom into it on the map and show the markets.
$("#map-reset").show();
$('.map-label').text('Click a city below to view communities in that area.');
$('body').addClass('map-zoomed');
showState(code);
break;
}
}
}
}
How would I add a class to the selected region? I have tried several routes based on similar questions found through Google and Stack Overflow to no avail. Any help is greatly appreciated.
Check my way to fix it:
http://pastebin.com/s5GwcEMy
i add this method "setSelectedRegionStyle"
You need get reference to the map:
map = $("#world-map-gdp").vectorMap('get', 'mapObject');
After you can set your custom color:
map.setSelectedRegionStyle('IT', '#b2c9cb');
In my case only need change the color, but you can use the firebug to check the another options.
This is the added method (Check in the pastbin)
setSelectedRegionStyle : function (r,c) {
return this.regions[r].element.style.selected.fill = c;
},
Is it possible to get the color of of the segment clicked on the treemap.
On clicking a select event is fired which just gives us which row has been clicked.
Here is an example
I have not found any way of doing this with the Google API, but by adding a click event listener to the document and matching it up with the select event, you can retrieve the actual SVGRectElement value:
var currElement;
document.addEventListener('click', function (k) {
currElement = k.target;
});
google.visualization.events.addListener(treemap, 'select', function () {
var sel = treemap.getSelection(),
color;
if (currElement) {
color = currElement.attributes.getNamedItem('fill');
}
console.log('selected element color: ' + color.value);
});
This is by no means a complete solution, but it should point you to an answer