jvectormap merge two maps - javascript

I'm trying to merge two jvectormaps: italy-regions and italy-provinces, i
would like to achieve something similar to the drill-down example or even just have the map diveded both in regions and provinces.
I think i cannot use multimap like in the demo because italy-provinces map is just one script with all the provinces inside, so the main function for retrieve the map of each region is useless:
mapUrlByCode: function(code, multiMap){
return '/js/us-counties/jquery-jvectormap-data-'+
code.toLowerCase()+'-'+
multiMap.defaultProjection+'-en.js';
}
In this pen i've reproduced something similar to what i'm trying to achieve.
Obviously this solution is really bad, because i'm using two maps and once i click in a random region of the first map the second map will not zoom, so the two maps looks not synchronized.
Someone know or can suggest a way to achieve what i need?

Luckily, the great jVectorMap also supports focus on more than one region, so what you need is just to create the association among regions and provinces and invoke that functions twice.
I revorked a bit your code to be in some way more "explicit" about Provinces and Regions:
HTML:
<div id="map-provinces"></div>
<div id="map-regions"></div>
CSS:
#map-provinces{
height:500px;
width: 500px;
left:-500px;
opacity:0.5;
}
#map-regions{
top: 8px; /* Body margin wasn't set correctly in the CodePen */
position : absolute;
height:500px;
width: 500px;
opacity:0.5;
}
Here is how i do it with the Region of Sicily, up to you to complete this example with the whole list of Province codes:
var provinces ={"IT-82": ["TP","PA","AG","CL","EN","ME","CT","RG","SR"]};
$('#map-provinces').vectorMap({
map: 'it_mill'
});
$('#map-regions').vectorMap({
map: 'it_regions_mill',
backgroundColor : 'white',
zoomOnScroll : false,
zoomMin : 0,
zoomMax :220,
regionStyle :{
initial: {
fill: 'blue',
"fill-opacity": 1,
stroke: 'none',
"stroke-width": 0,
"stroke-opacity": 1
},
hover: {
"fill-opacity": 1,
cursor: 'pointer'
},
selected: {
fill: 'blue',
"fill-opacity": 1,
},
selectedHover: {
"fill-opacity": 1,
cursor: 'pointer'
}
},
onRegionClick: function(e, code, isSelected, selectedRegions){
var codes = [];
provinces[code].forEach(function(province) {
codes.push("IT-"+province);
});
$('#map-regions').vectorMap('get','mapObject').setFocus({region: code});
$('#map-provinces').vectorMap('get', 'mapObject').setFocus({regions: codes});
}
});
Whit that in mind, you can easily implement the drill-down sample provided on the jVectorMap website, and have both maps correctly aligned after the zoom on region click, like in this picture below, where both overlapped maps are displayed, like you did it in your CodePen:

Related

Change border/background in Google Charts AnnotationChart?

I am trying to change the border/background of an AnnotationChart from Google's Chart library. If I use the standard backgroundColor options, the chart fails to render. Per this discussion, it seems that the backgroundColor options available on other chart types aren't directly accessible on the AnnotationChart, but are available through undocumented options. When I try this, though, the chart is unchanged. Below is the code and resulting chart; any ideas?
Without chart option
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
var options = {
thickness: 1.5,
displayAnnotations: true,
colors: dataColors,
displayZoomButtons: false,
displayExactValues: false,
displayDateBarSeparator: true,
};
chart.draw(data, options);
With:
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
var options = {
thickness: 1.5,
displayAnnotations: true,
colors: dataColors,
displayZoomButtons: false,
displayExactValues: false,
displayDateBarSeparator: true,
chart: {
backgroundColor: {
fill:'black',
stroke: 'white',
strokeSize: 1
},
chartArea: {
backgroundColor: {
fill: 'blue',
stroke: 'red',
strokeSize: 1
}
}
}
};
chart.draw(data, options);
Either way, graph looks like this:
The background color can be set using it like this. Read the documentation here
Edit your code like this
var options = {
displayAnnotations: true,
displayZoomButtons: false,
displayExactValues: false,
displayDateBarSeparator: true,
chart: {
backgroundColor: 'blue',
chartArea: {
backgroundColor: '#FFF000',
},
},
fill: 50,
};
I tried using strokeWidth and stroke but I think it is not being supported yet or I am using it incorrectly.
Working JSFIDDLE
I've had my own issues with the lack of customization options for Google Charts and one workaround is to use Javascript to modify the SVG after it is generated in order to produce the look you want.
I've put together a quick fiddle based on the template Annotation Chart in the Google Charts Reference, but the applicable lines of code are below. It's not pretty (especially if you're using interactive charts, because this requires a MutationObserver to monitor the SVG for changes) but it works and you might be able to clean it up a lot more.
Note: I've noticed interactions with Google Charts (e.g. zooming and panning) tend to bog down a lot in JSFiddle and Codepen etc for some reason, but they're much smoother when used in the wild!
Annotation Chart Fiddle
My Related SO Question
/* One time recoloring of background after SVG creation - for static charts */
var rects = container.getElementsByTagName("rect")
for(var i=0; i<rects.length; ++i) {
if (rects[i].getAttribute('fill') === '#ffffff') {
rects[i].setAttribute('fill', '#99f');
}
}
/* MutationObserver to monitor any changes to SVG and recolor background - for interactive charts */
var observer = new MutationObserver(function(mutations) {
var rects = container.getElementsByTagName("rect")
for(var i=0; i<rects.length; ++i) {
if (rects[i].getAttribute('fill') === '#ffffff') {
rects[i].setAttribute('fill', '#99f');
}
}
});

How to add tooltip background in google chart

To apply the tool-tip background in Google chart,I tried the following CSS code
path
{
fill: #000;
}
But this affected the whole google graph..
How to solve this without using html?
Have you tried to apply for the div.google-visualization-tooltip class ?
And I think you have to also enable the isHtml option on the tooltip
var chart_options = {
title: 'London Olympics Medals',
colors: ['#FFD700', '#C0C0C0', '#8C7853'],
tooltip: { isHtml: true }
};
https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#customizing-html-content

Add one centered label to a donut chartist-js

Since I could not find and answer for this question, I hope it's not a duplicate. I'm using chartist.js, and I make a simple donut, that's pretty easy and straight forward, but now I'd like to disable the labels, which works fine and add a single lable inside of the donut (Thhis is the problem). It's not needed, that the label gets greated, by the chart itself, it would be sufficient if it's just a new div or something else.
My Code so far:
<div class="ct-chart1 ct-chart ct-perfect-fourth"></div>
and
new Chartist.Pie('.ct-chart1', {
labels: [],
series: [75, 25]
}, {
donut: true,
width: '300px',
height: '200px',
donutWidth: 30,
startAngle: 0,
total: 100
});
I already tried to make the chart itself a flexbox and add the label as child and center it that way, but that did not work and I tried to surround the chart with a new div, but that let's the chart disappear.
<div>
<div class="ct-chart1 ct-chart ct-perfect-fourth"></div>
</div>
I'd use the draw event to center labels to the middle of the chart. Check this bin http://jsbin.com/hipafu/edit?html,css,js,output
Also watch out for the styles:
.ct-label {
dominant-baseline: central;
text-anchor: middle;
}

How to change background colors, marker CSS, and add hover text on marker?

I am trying to create a timeline view using visjs of a upgrade scenario (Pre Upgrade, Pre Release &Post Upgrade) something similar to the image below. Need some pointers to create different region colors as depicted in the image, CSS to change the main marker to an image source and also on hover of the slider (region or markers) it should show some description.
CSS
.vis-item.vis-background.preupgrade {
background-color: rgba(0, 153, 255, 0.2);
}
.vis-item.vis-background.prerelease {
background-color: rgba(102, 204, 255, 0.2);
}
.vis-item.vis-background.postupgrade {
background-color: rgba(204, 204, 255, 0.2);
}
Controller
$scope.visData = new vis.DataSet([
{start: '2015-07-26', end: '2015-08-25', type: 'background', title: 'Pre Upgrade', className: 'preupgrade'},
{start: '2015-08-26', end: '2015-09-30', type: 'background', title: 'Pre Release', className: 'prerelease'},
{start: '2015-10-01', end: '2015-10-31', type: 'background', title: 'Post Upgrade', className: 'postupgrade'}
]);
$scope.visOption = {
editable: false,
autoResize: true,
moveable: true,
margin: {
item: 10,
axis: 20
}
};
Visjs timeline HTML
<vis-timeline data="visData" options="visOption" events="visEvent"></vis-timeline>
I am also providing a plunker link for this problem.
Update Also why my plunker does not show region color changes?
Updated plunker link with some CSS changes, but how to add tooltip on top of background areas and how to add custom markers as shown in image with tooltips?
Update
Now I have achieved most of the things by using both AngularJS and jQuery simultaneously, but need help to convert everything to AngularJS. Still adding a custom time is pending and click event.
Updated Plunker link
Looking at the documentation you can see docs for where they spell out the classes to what you need to update for styling.
http://visjs.org/docs/timeline/#Editing_Items
Also they have events for onmoving and such so you should be able to drag and animate built in but I couldn't find a clear example of it in their docs.

Chartist.js make fill area expand all the way to the right

I'm using showArea: true but can't find the appropriate setting to make that fill all the way. Example:
I assume this is because I don't have any data points after where it ends, but I don't want the green line to extend all the way across the top. Is there another way to accomplish this?
You're using showArea:true to render the area. But as you've noted, showArea fills the area associated only with the drawn line.
What you're looking for is an additional area without a line.
In order to achieve this effect, you'll need to create two different lines: The first line will have showArea: false and extend to W3 as shown in your example. This will render the light green line as you have already.
The second line will be invisible have showLine: false and showArea: true and extend all the way across the top to W8.
In other words, you're actually looking to render two different things. One is a line, and one is a fill area.
I guess that the key solution to your problem is to use display:inline-block;
for example:
div.page {
color: white;
background: black;
margin: auto;
padding: 1em;
display:inline-block;
}
In order for the area to highlight you need to insert appropriate data. The showArea property extend as much as the data it has. Here is a proof of concept:
/* Add a basic data series with six labels and values */
var data = {
labels: [1, 2, 3, 4, 5],
series: [
[1, 5, 10, 15, 20],
[1, 20]
]
};
/* Set some base options (settings will override the default settings in Chartist.js *see default settings*). We are adding a basic label interpolation function for the xAxis labels. */
var options = {
showArea: true,
axisX: {
labelInterpolationFnc: function (value) {
return 'Week ' + value;
}
}
};
/* Initialize the chart with the above settings */
new Chartist.Line('.ct-chart', data, options);
.ct-chart {
width: 450px;
height: 250px;
}
<link href="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.css" rel="stylesheet"/>
<script src="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.js"></script>
<div class="ct-chart ct-square"></div>
The two areas are highlighted within the data they represent.
Hope this helps.

Categories