Raphael/Mapael - plots and areas controlled by a single legend - javascript

I've been working on few custom SVG maps based on Raphael.js but Mapael is the library that I'm working with. I have setup a jsfiddle of the example to be better explain my.
http://jsfiddle.net/arnabsaha/3jNE9/
As you can see, I have mapped the different paths to show tooltips of different descriptions. Alongwith plots for things like stairs/escalators (in a mall environment) with it's legend. And another legend for the different sections/paths of the map.
Now what I need to do is find a way where for eg. click on the legend item to hide/show a path/area of the map (which is achieved) along with the tooltip description that is shown when hovered on that particular path/area.
Now, after trying few unsuccessful things, I was thinking of a workaround where clicking on the legend item for the path/area to also hide/show a plot with a text description attribute. For eg. In the fsfiddle example, click on 'Azul by moussy', (first item in the areas legend) the area is highlighted, along with this, if I could also hide/show a plot (with text attribute) which is the description for that particular path/area?
I hope I was able to explain my situation clearly.
Any ideas/help will be much appreciated!
Thanks,
Arnab
code snippet:
$(function(){
$(".maparea6").mapael({
map : {
name : "world_countries",
zoom: {
enabled: true,
maxLevel : 10
},
defaultPlot: {
size: 10
},
defaultArea: {
attrs : {
stroke : "#000",
"stroke-width" : 0.5
}
}
},
legend : {
area : {
display : true,
title :"",
slices : [
{
max :63,
min :61,
attrs : {
fill : "#f0eeb5"
},
label :"AZUL by moussy"
}
,
{
max :11,
min :9,
attrs : {
fill : "#f0eeb5"

If anyone is interested, $(".areaLegend svg text:eq(X)"); allows you to add events on the legend items but this solution isn't very handy to use ...
And, the paths and plots already have this feature, they can be easily selected ie : $("[data-id='path_ad']"); in order to add some events or anything on them.
And the developer's github: https://github.com/neveldo/jQuery-Mapael

Thanks for reporting this issue about the elements in the legend. It has been solved by the version 1.0.0 of jQuery Mapael : https://github.com/neveldo/jQuery-Mapael/commit/50baf1600d393a736a434c4ee400081da69ede9b

Related

Amcharts Pie chart - Truncate long labels with small percentages but show them properly in tooltip

I am working with amcharts 4 pie charts. I want to truncate labels which are long and share small percentage so they don't go outside pie chart boundaries as shown in attached image https://ibb.co/0mJnrgy
As per the amcharts documentation (https://www.amcharts.com/docs/v4/tutorials/dealing-with-piechart-labels-that-dont-fit/) I tried truncate=false but unfortunately that didn't work, Not sure why.
So I tried to achieve it using adapters. Below is what I tried so far.
This is working but label as well as tooltip both getting truncated. I have gone through lot of documentation but haven't found any proper solution.
Any clue or help is very appreciated.
Demo & progress : https://codepen.io/amitpatil/pen/bGYEdXK?editors=0110
Nevermind, Managed to find the solution after wasting so many hours.
series.slices.template.adapter.add('tooltipText', (tooltipText, target) => {
const {
dataItem: {
values: {value : {percent}},
component: { dataFields : {category} }
}
} = target;
return `${target.dataItem._dataContext[category]} : ${percent}%`;
});
Here is the complete demo https://codepen.io/amitpatil/pen/jOaqJOz?editors=0010

Highcharts Sunburst custom legend and click functionality

Sunburst custom legend and click functionality
I have a big set of data on sunburst and I want to show level 2 as legend on the right. Since I know the values, I made a custom legend with all level 2 data made it as links. But I'm not getting the color codes for all levels.
I used var colors = Highcharts.getOptions().colors;
But I'm getting only a few color codes.
How to get full color codes used in the graph as it is ?
And when I click on that legend, I want to show only that level and its sub levels in the graph. (the same default functionality that is available in the graph). How can I do this ?
Please help
I added a color variable into your code:
const color = i >= colors.length ? colors[i - colors.length] : colors[i];
Demo: http://jsfiddle.net/BlackLabel/qb7ckxwn/
Here is an approach how to trigger the drill down in the sunburst on the outstanding element:
document.getElementById('btn').addEventListener('click', function(){
chart.series[0].points.forEach(d => {
if (d.name === 'Asia') {
chart.series[0].setRootNode(d.id, true, { trigger: 'click' })
}
})
})
Demo: https://jsfiddle.net/BlackLabel/t7pghmxd/

How to highlight cells and yaxis ticks on highcharts heatmap hover

I have a large heatmap, and because it's so large, I'm trying to highlight the cell when someone mouses over it, and I'd also like to highlight the y-axis tick as a time reference because of the large width of the chart. I've seen some examples of this, but my heatmap is not responding with hover effects.
I've used this example to highlight the cells red, but it's not working. http://jsfiddle.net/937twae7/ I've also researched this method for highlighting tick values, but it's probably not working for similar reasons. https://jsfiddle.net/sjapdya6/1/
In the "series" section of code, I've done this:
...
states: {
hover: {
color: 'red'
}
}
...
Here's my chart: https://jsfiddle.net/civilsurfer/Lhysx2vg/1/
Nothing happens as I hover on the cells.
Thanks for any assistance.
You used the boost module which increases performance, but causes some limitations - for example, the inability to change color in states.
To highlight an axis label you need to adjust the findTick function:
function findTick(point, ticks) {
for (var tickValue in ticks) {
if (tickValue == point.y) {
return ticks[tickValue]
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/agcper18/
Docs: https://www.highcharts.com/docs/advanced-chart-features/boost-module

Chart.js, adding footer to chart

Using Chart.js 2.0. I'm looking for a way to add a footer (line of text) at the bottom of the chart in order to display sources of data.
I tried to solve it via the option object, the same way as title and legend are included and modified. Like this:
`options: { ...
footer: {
display: true,
text: 'data from xy'
}
}`
I saw 'footer' several times mentioned in the documentation and ways to style it or use it in the context of 'tooltips', but haven't seen anything how to add it concretely.
EDIT/UPDATE:
I've found two workarounds (but no perfect solution) to add a footer to the chart while trying to solve this. In case someone is running into same problem like I did, here some suggestions how to solve this.
Nr. 1: adding a HTML element. This workaround has the disadvantage that the added HTML element is not shown if a user downloads the chart as a .png. Maybe this is the best solution, if the element doesn't have to be visible if a user downloads the chart as a .png.
`var myChart = new Chart(ctx, {
type: 'line',
data: { ... },
options: {
legend: { ... },
...
legendCallback: function(){
return '<p>bla bla</p>';
},
...
},
});
document.getElementById('legendID').innerHTML =
myChart.generateLegend();`
adding AFTER the canvas a div to append the new HTML element
<div id=legendID></div>
Nr. 2: adding another dataset which is empty but a label which contains the information that is supposed to be displayed. borderColor and backgroundColor set to transparent. Adding some empty labels (" ") gives some distance between labels and the footer which is added. The disadvantage of this workaround are the limited possibilities for styling.
Nr. 3: the solution of ana liza. This finally works best for my case since the added info is visible on the .png.
From the official docs:
Labeling Axes
When creating a chart, you want to tell the viewer what data they are viewing. To do this, you need to label the axis.
The scale label configuration is nested under the scale configuration in the scaleLabel key. It defines options for the scale title. Note that this only applies to cartesian axes.
You can add labels for both axes but in your case, since you only need it on the x-axis, your chart options should look similar to this.
var options = {
scales: {
xAxes: [
{
scaleLabel: {
display: true,
labelString: 'Party size',
fontColor: '#C7C7CC',
fontSize: 11
}
}
]
}
};

Adjust the saturation of a sunburst level - Highcharts

I created a sunburst chart with Highcharts. I would like a way to highlight a level, ideally by adjusting the color saturation, without affecting the color of proceeding levels.
What I've tried so far:
colorVariation(API docs)
my code example
Initially, this looked like what I needed, it adjusts the color brightness of a given level, either darkening or lightening it. Unfortunately, it only takes a to parameter, and no equivalent from, the purpose of colorVariation seems only to graduate the color from the parent color to the given brightness modifier value.
color(API docs)
my code example
color can be used to change the color of a given level, this doesn't quite meet the criteria of what I wanted as it changes each section on a level to the same color. It also causes the child levels to inherit the new color, as seen in the example. Setting colorByPoint doesn't fix this issue either as the child level will cycle through all colors rather than matching the colors set in the level 1 parent.
What I'm trying to achieve:
You can use internal Highcharts brighten method for brightening colors. Below, you can find an example of how to achieve the wanted result in your case:
chart: {
height: "600px",
events: {
load: function() {
Highcharts.each(this.series[0].points, function(p) {
if (p.id[0] === '1' || p.id[0] === '3') {
p.graphic.attr({
fill: Highcharts.color(p.color).brighten(0.3).get()
});
}
})
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/de3mp4tq/

Categories