Cannot click MultiPolygon

Cannot click MultiPolygon - leaflet

I have a strange behavior with the new leaflet version 1.2.0.
With the version 0.7.7 I can click "inside" the feature below but not with 1.2.0.
I tried to subscribe to click / mouseover on each layers but the event raised only on lines not on the whole geometry.
<!DOCTYPE html>
<html>
<head>
<title>GeoJSON tutorial - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css" rel="stylesheet"/>
<script src="https://unpkg.com/leaflet#1.2.0/dist/leaflet.js"></script>
<style>
#map {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var map = L.map('map').setView([0, 0], 4);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: 'mapbox.light'
}).addTo(map);
function onEachFeature(feature, layer) {
var popupContent = "<p>I started out as a GeoJSON " +
feature.geometry.type + ", but now I'm a Leaflet vector!</p>";
if (feature.properties && feature.properties.popupContent) {
popupContent += feature.properties.popupContent;
}
layer.bindPopup(popupContent);
}
var demo = {
"type": "Feature",
"properties": {
"popupContent": "This is the Auraria West Campus",
"style": {
weight: 2,
color: "#999",
opacity: 1,
fillColor: "#B0DE5C",
fillOpacity: 0.8
}
},
"geometry": {"type":"MultiPolygon","coordinates":[[[[-0.43002011405222973,-10.2822214314305],[-0.73002011405222955,-10.2822214314305],[-0.73002011405222955,-10.427219595863601],[-3.7949483976304998,-10.427219595863601],[-3.7949483976304998,-10.697228440261199],[-3.7949483976304998,-11.797228385639098],[-6.2149487404503194,-11.797228385639098],[-6.2149487404503194,-10.632230577203998],[-6.8524471842921191,-10.632229432794826],[-7.1773201800049975,-10.618045171476471],[-7.4997206960568246,-10.575600338314761],[-7.8171950698496877,-10.505217964118952],[-8.1273271297027563,-10.40743370125471],[-8.4277565833776897,-10.282991747006193],[-8.7161969813277587,-10.132839179785332],[-8.9904531179594898,-9.9581187512932772],[-9.2484377384727328,-9.7601601894899339],[-9.4881874241300075,-9.5404700785612739],[-9.7078775350586426,-9.3007203929039761],[-9.905836096861961,-9.0427357723907136],[-10.080556525353987,-8.7684796357589647],[-10.230709092574816,-8.4800392378088816],[-10.355151046823305,-8.1796097841339339],[-10.452935309687511,-7.8694777242808556],[-10.523317683883288,-7.5520033504879862],[-10.565762517044963,-7.2296028344361538],[-10.57994677836329,-6.9047298387232701],[-10.565762195536575,-6.5798533669543531],[-10.523316435823251,-6.2574494560268477],[-10.452932544044781,-5.9399718472461558],[-10.355146195658687,-5.6298367889758829],[-10.230701619857003,-5.3294046471326233],[-10.080545935410704,-5.0409619409890034],[-9.905821942368668,-4.7667039410064369],[-9.7078594244718417,-4.5087179611413717],[-9.4881650284779653,-4.2689674727834159],[-9.2484107974229453,-4.0492771612305276],[-8.9904214450895239,-3.8513190384328695],[-8.7161604685343921,-3.6765997176981067],[-8.427715204367999,-3.5264489472073421],[-8.1272809425202723,-3.402009489610478],[-7.8171442183987061,-3.304228424725018],[-7.4996654105982934,-3.2338499415315063],[-7.1772607766081107,-3.191409674323971],[-6.8523840632366095,-3.1772306261216983],[-6.5299710033195995,-3.1772306261216983],[-6.5299710033195995,-2.8322306261216994],[-6.5299710033195995,-2.7472166084602989],[-6.49701022431766,-2.7472166084602989],[-0.22301112112909927,-2.7472166084602989],[-0.21526289249859953,-2.7472166084602989],[-0.070001521129099409,-2.7472166084602989],[0.55510678301988037,-2.7472166084602989],[0.55510678301988037,-4.5272171375912009],[0.83510707489636005,-4.5272171375912009],[0.83510707489636005,-10.427219595863601],[-0.43002011405222973,-10.427219595863601],[-0.43002011405222973,-10.2822214314305]],[[-0.43002011405231944,-6.4822017754958985],[-0.73002011405231926,-6.4822017754958985],[-0.73002011405231926,-6.7822017754958992],[-0.43002011405231944,-6.7822017754958992],[-0.43002011405231944,-6.4822017754958985]],[[-7.8278379817152297,-9.2322016520028001],[-8.0399700160711891,-9.0200696176468007],[-8.2521020504271601,-9.2322016520028001],[-8.0399700160711998,-9.4443336863587],[-7.8278379817152297,-9.2322016520028001]],[[-10.230018122698469,-6.4822017754958985],[-10.530018122698468,-6.4822017754958985],[-10.530018122698468,-6.7822017754958992],[-10.230018122698469,-6.7822017754958992],[-10.230018122698469,-6.4822017754958985]],[[-6.4300198290674695,-10.2822214314305],[-6.7300198290674693,-10.2822214314305],[-6.7300198290674693,-10.582221431430501],[-6.4300198290674695,-10.582221431430501],[-6.4300198290674695,-10.2822214314305]]],[[[-0.43002011405222973,-10.2822214314305],[-0.43002011405222973,-10.427219595863601],[-0.43002011405222973,-10.427219595863601],[-0.43002011405222973,-10.2822214314305],[-0.43002011405222973,-10.2822214314305]]],[[[-0.43002011405222973,-10.427219595863601],[0.83510707489636005,-10.427219595863601],[0.83510707489636005,-10.427219595863601],[-0.43002011405222973,-10.427219595863601],[-0.43002011405222973,-10.427219595863601]]],[[[0.83510707489636005,-10.427219595863601],[0.83510707489636005,-4.5272171375912009],[0.83510707489636005,-4.5272171375912009],[0.83510707489636005,-10.427219595863601],[0.83510707489636005,-10.427219595863601]]],[[[0.83510707489636005,-4.5272171375912009],[0.55510678301988037,-4.5272171375912009],[0.55510678301988037,-4.5272171375912009],[0.83510707489636005,-4.5272171375912009],[0.83510707489636005,-4.5272171375912009]]],[[[0.55510678301988037,-4.5272171375912009],[0.55510678301988037,-2.7472166084602989],[0.55510678301988037,-2.7472166084602989],[0.55510678301988037,-4.5272171375912009],[0.55510678301988037,-4.5272171375912009]]],[[[0.55510678301988037,-2.7472166084602989],[-0.070001521129099409,-2.7472166084602989],[-0.070001521129099409,-2.7472166084602989],[0.55510678301988037,-2.7472166084602989],[0.55510678301988037,-2.7472166084602989]]],[[[-0.070001521129099409,-2.7472166084602989],[-0.21526289249859953,-2.7472166084602989],[-0.21526289249859953,-2.7472166084602989],[-0.070001521129099409,-2.7472166084602989],[-0.070001521129099409,-2.7472166084602989]]],[[[-0.21526289249859953,-2.7472166084602989],[-0.22301112112909927,-2.7472166084602989],[-0.22301112112909927,-2.7472166084602989],[-0.21526289249859953,-2.7472166084602989],[-0.21526289249859953,-2.7472166084602989]]],[[[-0.22301112112909927,-2.7472166084602989],[-6.49701022431766,-2.7472166084602989],[-6.49701022431766,-2.7472166084602989],[-0.22301112112909927,-2.7472166084602989],[-0.22301112112909927,-2.7472166084602989]]],[[[-6.49701022431766,-2.7472166084602989],[-6.5299710033195995,-2.7472166084602989],[-6.5299710033195995,-2.7472166084602989],[-6.49701022431766,-2.7472166084602989],[-6.49701022431766,-2.7472166084602989]]],[[[-6.5299710033195995,-2.7472166084602989],[-6.5299710033195995,-2.8322306261216994],[-6.5299710033195995,-2.8322306261216994],[-6.5299710033195995,-2.7472166084602989],[-6.5299710033195995,-2.7472166084602989]]],[[[-6.5299710033195995,-2.8322306261216994],[-6.5299710033195995,-3.1772306261216983],[-6.5299710033195995,-3.1772306261216983],[-6.5299710033195995,-2.8322306261216994],[-6.5299710033195995,-2.8322306261216994]]],[[[-6.5299710033195995,-3.1772306261216983],[-6.8523840632366095,-3.1772306261216983],[-6.8523840632366095,-3.1772306261216983],[-6.5299710033195995,-3.1772306261216983],[-6.5299710033195995,-3.1772306261216983]]],[[[-6.8523840632366095,-3.1772306261216983],[-7.1772607766081107,-3.191409674323971],[-7.1772607766081107,-3.191409674323971],[-6.8523840632366095,-3.1772306261216983],[-6.8523840632366095,-3.1772306261216983]]],[[[-7.1772607766081107,-3.191409674323971],[-7.4996654105982934,-3.2338499415315063],[-7.4996654105982934,-3.2338499415315063],[-7.1772607766081107,-3.191409674323971],[-7.1772607766081107,-3.191409674323971]]],[[[-7.4996654105982934,-3.2338499415315063],[-7.8171442183987061,-3.304228424725018],[-7.8171442183987061,-3.304228424725018],[-7.4996654105982934,-3.2338499415315063],[-7.4996654105982934,-3.2338499415315063]]],[[[-7.8171442183987061,-3.304228424725018],[-8.1272809425202723,-3.402009489610478],[-8.1272809425202723,-3.402009489610478],[-7.8171442183987061,-3.304228424725018],[-7.8171442183987061,-3.304228424725018]]],[[[-8.1272809425202723,-3.402009489610478],[-8.427715204367999,-3.5264489472073421],[-8.427715204367999,-3.5264489472073421],[-8.1272809425202723,-3.402009489610478],[-8.1272809425202723,-3.402009489610478]]],[[[-8.427715204367999,-3.5264489472073421],[-8.7161604685343921,-3.6765997176981067],[-8.7161604685343921,-3.6765997176981067],[-8.427715204367999,-3.5264489472073421],[-8.427715204367999,-3.5264489472073421]]],[[[-8.7161604685343921,-3.6765997176981067],[-8.9904214450895239,-3.8513190384328695],[-8.9904214450895239,-3.8513190384328695],[-8.7161604685343921,-3.6765997176981067],[-8.7161604685343921,-3.6765997176981067]]],[[[-8.9904214450895239,-3.8513190384328695],[-9.2484107974229453,-4.0492771612305276],[-9.2484107974229453,-4.0492771612305276],[-8.9904214450895239,-3.8513190384328695],[-8.9904214450895239,-3.8513190384328695]]],[[[-9.2484107974229453,-4.0492771612305276],[-9.4881650284779653,-4.2689674727834159],[-9.4881650284779653,-4.2689674727834159],[-9.2484107974229453,-4.0492771612305276],[-9.2484107974229453,-4.0492771612305276]]],[[[-9.4881650284779653,-4.2689674727834159],[-9.7078594244718417,-4.5087179611413717],[-9.7078594244718417,-4.5087179611413717],[-9.4881650284779653,-4.2689674727834159],[-9.4881650284779653,-4.2689674727834159]]],[[[-9.7078594244718417,-4.5087179611413717],[-9.905821942368668,-4.7667039410064369],[-9.905821942368668,-4.7667039410064369],[-9.7078594244718417,-4.5087179611413717],[-9.7078594244718417,-4.5087179611413717]]],[[[-9.905821942368668,-4.7667039410064369],[-10.080545935410704,-5.0409619409890034],[-10.080545935410704,-5.0409619409890034],[-9.905821942368668,-4.7667039410064369],[-9.905821942368668,-4.7667039410064369]]],[[[-10.080545935410704,-5.0409619409890034],[-10.230701619857003,-5.3294046471326233],[-10.230701619857003,-5.3294046471326233],[-10.080545935410704,-5.0409619409890034],[-10.080545935410704,-5.0409619409890034]]],[[[-10.230701619857003,-5.3294046471326233],[-10.355146195658687,-5.6298367889758829],[-10.355146195658687,-5.6298367889758829],[-10.230701619857003,-5.3294046471326233],[-10.230701619857003,-5.3294046471326233]]],[[[-10.355146195658687,-5.6298367889758829],[-10.452932544044781,-5.9399718472461558],[-10.452932544044781,-5.9399718472461558],[-10.355146195658687,-5.6298367889758829],[-10.355146195658687,-5.6298367889758829]]],[[[-10.452932544044781,-5.9399718472461558],[-10.523316435823251,-6.2574494560268477],[-10.523316435823251,-6.2574494560268477],[-10.452932544044781,-5.9399718472461558],[-10.452932544044781,-5.9399718472461558]]],[[[-10.523316435823251,-6.2574494560268477],[-10.565762195536575,-6.5798533669543531],[-10.565762195536575,-6.5798533669543531],[-10.523316435823251,-6.2574494560268477],[-10.523316435823251,-6.2574494560268477]]],[[[-10.565762195536575,-6.5798533669543531],[-10.57994677836329,-6.9047298387232701],[-10.57994677836329,-6.9047298387232701],[-10.565762195536575,-6.5798533669543531],[-10.565762195536575,-6.5798533669543531]]],[[[-10.57994677836329,-6.9047298387232701],[-10.565762517044963,-7.2296028344361538],[-10.565762517044963,-7.2296028344361538],[-10.57994677836329,-6.9047298387232701],[-10.57994677836329,-6.9047298387232701]]],[[[-10.565762517044963,-7.2296028344361538],[-10.523317683883288,-7.5520033504879862],[-10.523317683883288,-7.5520033504879862],[-10.565762517044963,-7.2296028344361538],[-10.565762517044963,-7.2296028344361538]]],[[[-10.523317683883288,-7.5520033504879862],[-10.452935309687511,-7.8694777242808556],[-10.452935309687511,-7.8694777242808556],[-10.523317683883288,-7.5520033504879862],[-10.523317683883288,-7.5520033504879862]]],[[[-10.452935309687511,-7.8694777242808556],[-10.355151046823305,-8.1796097841339339],[-10.355151046823305,-8.1796097841339339],[-10.452935309687511,-7.8694777242808556],[-10.452935309687511,-7.8694777242808556]]],[[[-10.355151046823305,-8.1796097841339339],[-10.230709092574816,-8.4800392378088816],[-10.230709092574816,-8.4800392378088816],[-10.355151046823305,-8.1796097841339339],[-10.355151046823305,-8.1796097841339339]]],[[[-10.230709092574816,-8.4800392378088816],[-10.080556525353987,-8.7684796357589647],[-10.080556525353987,-8.7684796357589647],[-10.230709092574816,-8.4800392378088816],[-10.230709092574816,-8.4800392378088816]]],[[[-10.080556525353987,-8.7684796357589647],[-9.905836096861961,-9.0427357723907136],[-9.905836096861961,-9.0427357723907136],[-10.080556525353987,-8.7684796357589647],[-10.080556525353987,-8.7684796357589647]]],[[[-9.905836096861961,-9.0427357723907136],[-9.7078775350586426,-9.3007203929039761],[-9.7078775350586426,-9.3007203929039761],[-9.905836096861961,-9.0427357723907136],[-9.905836096861961,-9.0427357723907136]]],[[[-9.7078775350586426,-9.3007203929039761],[-9.4881874241300075,-9.5404700785612739],[-9.4881874241300075,-9.5404700785612739],[-9.7078775350586426,-9.3007203929039761],[-9.7078775350586426,-9.3007203929039761]]],[[[-9.4881874241300075,-9.5404700785612739],[-9.2484377384727328,-9.7601601894899339],[-9.2484377384727328,-9.7601601894899339],[-9.4881874241300075,-9.5404700785612739],[-9.4881874241300075,-9.5404700785612739]]],[[[-9.2484377384727328,-9.7601601894899339],[-8.9904531179594898,-9.9581187512932772],[-8.9904531179594898,-9.9581187512932772],[-9.2484377384727328,-9.7601601894899339],[-9.2484377384727328,-9.7601601894899339]]],[[[-8.9904531179594898,-9.9581187512932772],[-8.7161969813277587,-10.132839179785332],[-8.7161969813277587,-10.132839179785332],[-8.9904531179594898,-9.9581187512932772],[-8.9904531179594898,-9.9581187512932772]]],[[[-8.7161969813277587,-10.132839179785332],[-8.4277565833776897,-10.282991747006193],[-8.4277565833776897,-10.282991747006193],[-8.7161969813277587,-10.132839179785332],[-8.7161969813277587,-10.132839179785332]]],[[[-8.4277565833776897,-10.282991747006193],[-8.1273271297027563,-10.40743370125471],[-8.1273271297027563,-10.40743370125471],[-8.4277565833776897,-10.282991747006193],[-8.4277565833776897,-10.282991747006193]]],[[[-8.1273271297027563,-10.40743370125471],[-7.8171950698496877,-10.505217964118952],[-7.8171950698496877,-10.505217964118952],[-8.1273271297027563,-10.40743370125471],[-8.1273271297027563,-10.40743370125471]]],[[[-7.8171950698496877,-10.505217964118952],[-7.4997206960568246,-10.575600338314761],[-7.4997206960568246,-10.575600338314761],[-7.8171950698496877,-10.505217964118952],[-7.8171950698496877,-10.505217964118952]]],[[[-7.4997206960568246,-10.575600338314761],[-7.1773201800049975,-10.618045171476471],[-7.1773201800049975,-10.618045171476471],[-7.4997206960568246,-10.575600338314761],[-7.4997206960568246,-10.575600338314761]]],[[[-7.1773201800049975,-10.618045171476471],[-6.8524471842921191,-10.632229432794826],[-6.8524471842921191,-10.632229432794826],[-7.1773201800049975,-10.618045171476471],[-7.1773201800049975,-10.618045171476471]]],[[[-6.8524471842921191,-10.632229432794826],[-6.2149487404503194,-10.632230577203998],[-6.2149487404503194,-10.632230577203998],[-6.8524471842921191,-10.632229432794826],[-6.8524471842921191,-10.632229432794826]]],[[[-6.2149487404503194,-10.632230577203998],[-6.2149487404503194,-11.797228385639098],[-6.2149487404503194,-11.797228385639098],[-6.2149487404503194,-10.632230577203998],[-6.2149487404503194,-10.632230577203998]]],[[[-6.2149487404503194,-11.797228385639098],[-3.7949483976304998,-11.797228385639098],[-3.7949483976304998,-11.797228385639098],[-6.2149487404503194,-11.797228385639098],[-6.2149487404503194,-11.797228385639098]]],[[[-3.7949483976304998,-11.797228385639098],[-3.7949483976304998,-10.697228440261199],[-3.7949483976304998,-10.697228440261199],[-3.7949483976304998,-11.797228385639098],[-3.7949483976304998,-11.797228385639098]]],[[[-3.7949483976304998,-10.697228440261199],[-3.7949483976304998,-10.427219595863601],[-3.7949483976304998,-10.427219595863601],[-3.7949483976304998,-10.697228440261199],[-3.7949483976304998,-10.697228440261199]]],[[[-3.7949483976304998,-10.427219595863601],[-0.73002011405222955,-10.427219595863601],[-0.73002011405222955,-10.427219595863601],[-3.7949483976304998,-10.427219595863601],[-3.7949483976304998,-10.427219595863601]]],[[[-0.73002011405222955,-10.427219595863601],[-0.73002011405222955,-10.2822214314305],[-0.73002011405222955,-10.2822214314305],[-0.73002011405222955,-10.427219595863601],[-0.73002011405222955,-10.427219595863601]]],[[[-0.73002011405222955,-10.2822214314305],[-0.43002011405222973,-10.2822214314305],[-0.43002011405222973,-10.2822214314305],[-0.73002011405222955,-10.2822214314305],[-0.73002011405222955,-10.2822214314305]]],[[[-0.43002011405231944,-6.4822017754958985],[-0.43002011405231944,-6.7822017754958992],[-0.43002011405231944,-6.7822017754958992],[-0.43002011405231944,-6.4822017754958985],[-0.43002011405231944,-6.4822017754958985]]],[[[-0.43002011405231944,-6.7822017754958992],[-0.73002011405231926,-6.7822017754958992],[-0.73002011405231926,-6.7822017754958992],[-0.43002011405231944,-6.7822017754958992],[-0.43002011405231944,-6.7822017754958992]]],[[[-0.73002011405231926,-6.7822017754958992],[-0.73002011405231926,-6.4822017754958985],[-0.73002011405231926,-6.4822017754958985],[-0.73002011405231926,-6.7822017754958992],[-0.73002011405231926,-6.7822017754958992]]],[[[-0.73002011405231926,-6.4822017754958985],[-0.43002011405231944,-6.4822017754958985],[-0.43002011405231944,-6.4822017754958985],[-0.73002011405231926,-6.4822017754958985],[-0.73002011405231926,-6.4822017754958985]]],[[[-7.8278379817152297,-9.2322016520028001],[-8.0399700160711998,-9.4443336863587],[-8.0399700160711998,-9.4443336863587],[-7.8278379817152297,-9.2322016520028001],[-7.8278379817152297,-9.2322016520028001]]],[[[-8.0399700160711998,-9.4443336863587],[-8.2521020504271601,-9.2322016520028001],[-8.2521020504271601,-9.2322016520028001],[-8.0399700160711998,-9.4443336863587],[-8.0399700160711998,-9.4443336863587]]],[[[-8.2521020504271601,-9.2322016520028001],[-8.0399700160711891,-9.0200696176468007],[-8.0399700160711891,-9.0200696176468007],[-8.2521020504271601,-9.2322016520028001],[-8.2521020504271601,-9.2322016520028001]]],[[[-8.0399700160711891,-9.0200696176468007],[-7.8278379817152297,-9.2322016520028001],[-7.8278379817152297,-9.2322016520028001],[-8.0399700160711891,-9.0200696176468007],[-8.0399700160711891,-9.0200696176468007]]],[[[-10.230018122698469,-6.4822017754958985],[-10.230018122698469,-6.7822017754958992],[-10.230018122698469,-6.7822017754958992],[-10.230018122698469,-6.4822017754958985],[-10.230018122698469,-6.4822017754958985]]],[[[-10.230018122698469,-6.7822017754958992],[-10.530018122698468,-6.7822017754958992],[-10.530018122698468,-6.7822017754958992],[-10.230018122698469,-6.7822017754958992],[-10.230018122698469,-6.7822017754958992]]],[[[-10.530018122698468,-6.7822017754958992],[-10.530018122698468,-6.4822017754958985],[-10.530018122698468,-6.4822017754958985],[-10.530018122698468,-6.7822017754958992],[-10.530018122698468,-6.7822017754958992]]],[[[-10.530018122698468,-6.4822017754958985],[-10.230018122698469,-6.4822017754958985],[-10.230018122698469,-6.4822017754958985],[-10.530018122698468,-6.4822017754958985],[-10.530018122698468,-6.4822017754958985]]],[[[-6.4300198290674695,-10.2822214314305],[-6.4300198290674695,-10.582221431430501],[-6.4300198290674695,-10.582221431430501],[-6.4300198290674695,-10.2822214314305],[-6.4300198290674695,-10.2822214314305]]],[[[-6.4300198290674695,-10.582221431430501],[-6.7300198290674693,-10.582221431430501],[-6.7300198290674693,-10.582221431430501],[-6.4300198290674695,-10.582221431430501],[-6.4300198290674695,-10.582221431430501]]],[[[-6.7300198290674693,-10.582221431430501],[-6.7300198290674693,-10.2822214314305],[-6.7300198290674693,-10.2822214314305],[-6.7300198290674693,-10.582221431430501],[-6.7300198290674693,-10.582221431430501]]],[[[-6.7300198290674693,-10.2822214314305],[-6.4300198290674695,-10.2822214314305],[-6.4300198290674695,-10.2822214314305],[-6.7300198290674693,-10.2822214314305],[-6.7300198290674693,-10.2822214314305]]],[[[-0.43002011405222973,-10.2822214314305],[-0.43002011405222973,-10.427219595863601],[0.83510707489636005,-10.427219595863601],[0.83510707489636005,-4.5272171375912009],[0.55510678301988037,-4.5272171375912009],[0.55510678301988037,-2.7472166084602989],[-0.070001521129099409,-2.7472166084602989],[-0.21526289249859953,-2.7472166084602989],[-0.22301112112909927,-2.7472166084602989],[-6.49701022431766,-2.7472166084602989],[-6.5299710033195995,-2.7472166084602989],[-6.5299710033195995,-2.8322306261216994],[-6.5299710033195995,-3.1772306261216983],[-6.8523840632366095,-3.1772306261216983],[-7.1772607766081107,-3.191409674323971],[-7.4996654105982934,-3.2338499415315063],[-7.8171442183987061,-3.304228424725018],[-8.1272809425202723,-3.402009489610478],[-8.427715204367999,-3.5264489472073421],[-8.7161604685343921,-3.6765997176981067],[-8.9904214450895239,-3.8513190384328695],[-9.2484107974229453,-4.0492771612305276],[-9.4881650284779653,-4.2689674727834159],[-9.7078594244718417,-4.5087179611413717],[-9.905821942368668,-4.7667039410064369],[-10.080545935410704,-5.0409619409890034],[-10.230701619857003,-5.3294046471326233],[-10.355146195658687,-5.6298367889758829],[-10.452932544044781,-5.9399718472461558],[-10.523316435823251,-6.2574494560268477],[-10.565762195536575,-6.5798533669543531],[-10.57994677836329,-6.9047298387232701],[-10.565762517044963,-7.2296028344361538],[-10.523317683883288,-7.5520033504879862],[-10.452935309687511,-7.8694777242808556],[-10.355151046823305,-8.1796097841339339],[-10.230709092574816,-8.4800392378088816],[-10.080556525353987,-8.7684796357589647],[-9.905836096861961,-9.0427357723907136],[-9.7078775350586426,-9.3007203929039761],[-9.4881874241300075,-9.5404700785612739],[-9.2484377384727328,-9.7601601894899339],[-8.9904531179594898,-9.9581187512932772],[-8.7161969813277587,-10.132839179785332],[-8.4277565833776897,-10.282991747006193],[-8.1273271297027563,-10.40743370125471],[-7.8171950698496877,-10.505217964118952],[-7.4997206960568246,-10.575600338314761],[-7.1773201800049975,-10.618045171476471],[-6.8524471842921191,-10.632229432794826],[-6.2149487404503194,-10.632230577203998],[-6.2149487404503194,-11.797228385639098],[-3.7949483976304998,-11.797228385639098],[-3.7949483976304998,-10.697228440261199],[-3.7949483976304998,-10.427219595863601],[-0.73002011405222955,-10.427219595863601],[-0.73002011405222955,-10.2822214314305],[-0.43002011405222973,-10.2822214314305]],[[-0.43002011405231944,-6.4822017754958985],[-0.43002011405231944,-6.7822017754958992],[-0.73002011405231926,-6.7822017754958992],[-0.73002011405231926,-6.4822017754958985],[-0.43002011405231944,-6.4822017754958985]],[[-7.8278379817152297,-9.2322016520028001],[-8.0399700160711998,-9.4443336863587],[-8.2521020504271601,-9.2322016520028001],[-8.0399700160711891,-9.0200696176468007],[-7.8278379817152297,-9.2322016520028001]],[[-10.230018122698469,-6.4822017754958985],[-10.230018122698469,-6.7822017754958992],[-10.530018122698468,-6.7822017754958992],[-10.530018122698468,-6.4822017754958985],[-10.230018122698469,-6.4822017754958985]],[[-6.4300198290674695,-10.2822214314305],[-6.4300198290674695,-10.582221431430501],[-6.7300198290674693,-10.582221431430501],[-6.7300198290674693,-10.2822214314305],[-6.4300198290674695,-10.2822214314305]]]]}};
L.geoJson(demo, {
style: function (feature) {
return feature.properties && feature.properties.style;
},
onEachFeature: onEachFeature,
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
});
}
}).addTo(map);
</script>
</body>
</html>
Can you help me ?
I dont know what to add to this post to allow stackoverflow to publish this post lol

Related

Google Chart - How to change color of one column only in ComboChart?

I'm not sure how to change color of specific column (named 'Different color here' in example bellow) when using ComboChart? Playing with { role: 'style' } didn't gave me desired result.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {
packages: ['corechart']
});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Month', 'Test', 'Avg.'],
['1', 165, 145],
['2', 135, 145],
['Different color here', 157, 145],
['4', 139, 145],
['5', 136, 145]
]);
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title: 'TITLE',
width: 600,
height: 400,
vAxis: {
title: "AAA"
},
hAxis: {
title: "BBB"
},
seriesType: "bars",
series: {
0: {
color: "yellow"
},
1: {
type: "line",
color: "green"
},
},
});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
JSFIDDLE:
http://jsfiddle.net/2emzos38/1/

the style role should follow the series for which the style should be applied.
var data = google.visualization.arrayToDataTable([
['Month', 'Test', {role: 'style', type: 'string'}, 'Avg.'],
['1', 165, null, 145],
['2', 135, null, 145],
['Different color here', 157, 'magenta', 145],
['4', 139, null, 145],
['5', 136, null, 145]
]);
see following working snippet...
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>
Google Visualization API Sample
</title>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
packages: ['corechart']
});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Month', 'Test', {role: 'style', type: 'string'}, 'Avg.'],
['1', 165, null, 145],
['2', 135, null, 145],
['Different color here', 157, 'magenta', 145],
['4', 139, null, 145],
['5', 136, null, 145]
]);
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title: 'TITLE',
width: 600,
height: 400,
vAxis: {
title: "AAA"
},
hAxis: {
title: "BBB"
},
seriesType: "bars",
series: {
0: {
color: "yellow"
},
1: {
type: "line",
color: "green"
},
},
});
}
google.charts.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
NOTE:
the jsapi loader is out of date and should no longer be used.
instead, use loader.js,
this will only change the load and setOnLoadCallback statements.
see above snippet.

How do I format vAxis to percent in Google Charts API?

Does anyone know how to format the vAxis to percent? I've tried so many things, to no avail. Code is below. I've tried NumberFormatter vAxis options...
Thanks!
Chelsea
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart', 'bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1mMYa6kqWIasGhdDG3i7YS5bzK_mtXT0_m0oqcYB-Loo/edit#gid=0?range=A1:C5");
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
var chart = new google.visualization.ColumnChart(document.getElementById('student_chart'));
var options = {
isStacked: 'false',
title: 'TPRI Averages 2015-16 (Students Performing on Grade Level)',
curveType: 'function',
legend: { gridlines: 'bottom' },
colors: ['red', 'purple'],
pointSize: 20,
series: {
vAxis: {format: "###'%'"},
}
};
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="student_chart" style="width: 900px; height: 500px"></div>
</body>
</html>

vAxis should not be defined within series
it should at the first level within options
var options = {
vAxis: {format: "#,##0%"}
...
as for the format string,
adding % to the end, will convert the number to a percentage
see following working snippet...
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart', 'bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1mMYa6kqWIasGhdDG3i7YS5bzK_mtXT0_m0oqcYB-Loo/edit#gid=0?range=A1:C5");
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
var chart = new google.visualization.ColumnChart(document.getElementById('student_chart'));
var options = {
isStacked: 'false',
title: 'TPRI Averages 2015-16 (Students Performing on Grade Level)',
curveType: 'function',
legend: { gridlines: 'bottom' },
colors: ['red', 'purple'],
pointSize: 20,
vAxis: {format: "#,##0%"}
};
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="student_chart" style="width: 900px; height: 500px"></div>
</body>
</html>

Leaflet v1.03: Make CircleMarker draggable?

does some Leaflet guru has an idea, what's the easiest way to make a CircleMarker draggable in Leaflet v1.0.3?
It's easy to do it for "standard" markers by using the "draggable"-option. But such an option doesn't exist for CircleMarker. I tried it by using several Events, but the problem is, that not the marker is being moved but the underlying map.
Another possibility could be the use of "stopPropagation"-Function (but just for DOMEvents). Or the use of "removeEventParent"... if the "parent" of the CircleMarker is the map and its events?
Regarding to the Documentation there also DOMUtility/Draggable-class. Is this what I need?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable Markers</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet.js"></script>
<style>
body {padding: 0; margin: 0;}
html, body, #map {height: 100%;}
</style>
</head>
<body>
<div id="map"></div>
<script>
var layerOsm = new L.TileLayer('https://{s}.api.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoicHBldGUiLCJhIjoiY2lsdmE2ZmQ2MDA4OHZxbTZpcmx1emtqbSJ9.Two7SPSaIZysqgOTrrLkRg', {
subdomains: 'ab', maxZoom: 20, noWrap:true, attribution:'Mapbox | OpenStreetMap' });
var map = new L.Map('map').addLayer(layerOsm).setView(new L.LatLng(47.8, 13.0), 14);
L.marker([47.8, 13.0], {draggable:true}).addTo(map);
var circle = L.circleMarker([47.81, 13.01], {radius:30}).addTo(map);
circle.on('mousedown', function () {
map.on('mousemove', function (e) {
circle.setLatLng(e.latlng);
});
});
map.on('mouseup', function(){
map.removeEventListener('mousemove');
})
</script>
</body>
</html>

Leaflet v1.0+ solution:
var marker = L.circleMarker([41.91847, -74.62634]).addTo(map)
// extract trackCursor as a function so this specific
// "mousemove" listener can be removed on "mouseup" versus
// all listeners if we were to use map.off("mousemove")
function trackCursor(evt) {
marker.setLatLng(evt.latlng)
}
marker.on("mousedown", function() {
map.dragging.disable()
map.on("mousemove", trackCursor)
})
map.on("mouseup", function() {
map.dragging.enable()
map.off("mousemove", trackCursor)
})
To make this behaviour more re-useable we could encapsulate it in a function (JS ES6 syntax):
function moveableMarker(map, marker) {
function trackCursor(evt) {
marker.setLatLng(evt.latlng)
}
marker.on("mousedown", () => {
map.dragging.disable()
map.on("mousemove", trackCursor)
})
marker.on("mouseup", () => {
map.dragging.enable()
map.off("mousemove", trackCursor)
})
return marker
}
You can then make a marker draggable / moveable like so:
const moveable = moveableMarker(map, marker)
These examples helped construct the above solution:
Akshay Agrawal's JS Fiddle example
Jedidiah Hurt's Leaflet 1.0 draggable circle

Found another answer at https://github.com/w8r/Leaflet.Path.Drag/
I just added the Leaflet.Path.Drag.js. Now I can read in from my REST service all my sites and move them.
var data = {
"type": "FeatureCollection",
"features": [
{
"geometry": {
"type": "Point",
"coordinates": [
-73.7979125, 42.704642
]
},
"type": "Feature",
"properties": {
"popupContent": "This is Point 1. "
},
"id": 51
},
{
"geometry": {
"type": "Point",
"coordinates": [
-73.630371,42.698585
]
},
"type": "Feature",
"properties": {
"popupContent": "This is Point 2. "
},
"id": 52
}
]
};
var map = L.map('map', {editable: true}).setView([43, -74], 8);
var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{
attribution: '© OpenStreetMap //contributors'}).addTo(map);
function onEachFeature(feature, layer) {
var popupContent = feature.properties.popupContent
layer.bindPopup(popupContent);
layer.on('dragend', function(e){
console.log(layer.getLatLng().lat);
console.log(layer.getLatLng().lng);
});
}
var mymarker =L.geoJSON(data, {
style: function (feature) {
return feature.properties && feature.properties.style;
},
onEachFeature: onEachFeature,
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng,{ draggable: true }, {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
});
}
}).addTo(map);

How to draw different colors polylines using yours direction service in openalyers3

I am drawing the polylines on the using yours direction service as shown in the sample below
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- <link rel="stylesheet" href="http://openlayers.org/en/v3.2.1/css/ol.css" type="text/css">-->
</head>
<body>
<div id="map" class="map"></div>
<link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script>
<script>
var image = new ol.style.Circle({
radius: 5,
fill: null,
stroke: new ol.style.Stroke({color: 'red', width: 1})
});
var styles = {
'Point': new ol.style.Style({
image: image
}),
'LineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 3
})
}),
'MultiLineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rose',
width: 1
})
}),
'MultiPoint': new ol.style.Style({
image: image
}),
'MultiPolygon': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'yellow',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(255, 255, 0, 0.1)'
})
}),
'Polygon': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
lineDash: [4],
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
}),
'GeometryCollection': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'magenta',
width: 2
}),
fill: new ol.style.Fill({
color: 'magenta'
}),
image: new ol.style.Circle({
radius: 10,
fill: null,
stroke: new ol.style.Stroke({
color: 'magenta'
})
})
}),
'Circle': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 2
}),
fill: new ol.style.Fill({
color: 'rgba(255,0,0,0.2)'
})
})
};
var styleFunction = function(feature, resolution) {
return styles[feature.getGeometry().getType()];
};
var geojsonObject = {
"type": "LineString",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"coordinates":
[
[103.984865, 1.350197]
,[103.985188, 1.350903]
,[103.985376, 1.351149]
,[103.985477, 1.351341]
,[103.986155, 1.352857]
,[103.986195, 1.352982]
,[103.986248, 1.353248]
,[103.986393, 1.353593]
,[103.986564, 1.353550]
,[103.985175, 1.350160]
,[103.985138, 1.350069]
], "properties": {
"distance": "21.452372",
"description": "To enable simple instructions add: 'instructions=1' as parameter to the URL",
"traveltime": "1228"
}
};
//console.log(geojsonObject.coordinates);
var routeGeom = new ol.geom.LineString(geojsonObject.coordinates).transform('EPSG:4326','EPSG:3857');
var routeFeature = new ol.Feature({
geometry:routeGeom
})
var extentToZoom = routeGeom.getExtent();
console.log(extentToZoom);
console.log(routeFeature);
var vectorSource = new ol.source.Vector({
features: [routeFeature]
});
//vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6)));
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleFunction
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
urls : ["http://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png","http://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png","http://b.basemaps.cartocdn.com/light_all//{z}/{x}/{y}.png"]
})
}),
vectorLayer
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** #type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: ol.proj.fromLonLat([103.986908, 1.353199]),
rotation: 68*Math.PI/180,
zoom: 18
})
});
map.getView().fit(extentToZoom,map.getSize())
</script>
</body>
</html>
But know i want to draw different color line ie,for example in the sample i want the first line in green and the next line in blue(know it is in green itself) likewise there are too many plots i want to plot it in different colors
Using multiString i am able to do it but for the sample above i dont know how to start with please point me to a sample or guide me how to do

Add an attribute to each LineString feature you are adding, and in your styles array, add a style with the color you want, and in style function, use the attribute to select the relevant style from that array. Here I edited your code,
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- <link rel="stylesheet" href="http://openlayers.org/en/v3.2.1/css/ol.css" type="text/css">-->
</head>
<body>
<div id="map" class="map"></div>
<link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script>
<script>
var styles = {
'greenRoute': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 3
})
}),
'redRoute': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 3
})
})
};
var styleFunction = function(feature, resolution) {
return styles[feature.get("fName")];
};
var geojsonObject = {
"type": "LineString",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"coordinates":
[
[103.984865, 1.350197]
,[103.985188, 1.350903]
,[103.985376, 1.351149]
,[103.985477, 1.351341]
,[103.986155, 1.352857]
,[103.986195, 1.352982]
,[103.986248, 1.353248]
,[103.986393, 1.353593]
,[103.986564, 1.353550]
,[103.985175, 1.350160]
,[103.985138, 1.350069]
], "properties": {
"distance": "21.452372",
"description": "To enable simple instructions add: 'instructions=1' as parameter to the URL",
"traveltime": "1228"
}
};
//console.log(geojsonObject.coordinates);
var routeGeom = new ol.geom.LineString(geojsonObject.coordinates).transform('EPSG:4326','EPSG:3857');
var redRouteGeom = new ol.geom.LineString([
[103.984865, 1.350197]
,[103.985188, 1.350903]
,[103.985138, 1.350069]
]).transform('EPSG:4326','EPSG:3857');
var routeFeature = new ol.Feature({
geometry:routeGeom,
fName: "greenRoute"
})
var redRoute = new ol.Feature({
geometry:redRouteGeom,
fName: "redRoute"
})
var extentToZoom = routeGeom.getExtent();
console.log(extentToZoom);
console.log(routeFeature);
var vectorSource = new ol.source.Vector({
features: [routeFeature,redRoute]
});
//vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6)));
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style : styleFunction
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
urls : ["http://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png","http://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png","http://b.basemaps.cartocdn.com/light_all//{z}/{x}/{y}.png"]
})
}),
vectorLayer
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** #type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: ol.proj.fromLonLat([103.986908, 1.353199]),
rotation: 68*Math.PI/180,
zoom: 18
})
});
map.getView().fit(extentToZoom,map.getSize());
var select_interaction = new ol.interaction.Select();
select_interaction.on("select", function (e) {
// do something. e.element is the feature which was added
var evt= e.selected;
});
map.addInteraction(select_interaction);
</script>
</body>
</html>

Google Visualization API -- Putting Y Axis on Right Side?

Using: http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html#Loading
There isn't any options to put the y axis on the right side of the chart? For reals?! :P
Anyone know how to do such a 'radical' thing? The charting API lets you do this, but not the visualization?
Thanks SO.

You can get around this via the series option, and specifying a dummy data series for series[0]. Like so:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'xAxis');
data.addColumn('number', 'dummySeries');
data.addColumn('number', 'realSeries');
data.addRow(['x label', null, 2]); // dummy series value needs to be null, otherwise if interactivity is on, the user can discover the dummy values even if the line is hidden per below
data.addRow(...iterate & add the rest of your data);
new google.visualization.LineChart(document.getElementById('graphdiv')).
draw(data, {curveType: 'function',
series:[{lineWidth:0},{targetAxisIndex:1}]} // specify right y-axis for 2nd series, and 'hide' the line for the 1st series as a precaution with lineWidth
);
}
google.setOnLoadCallback(drawVisualization);
</script>

function singleUserChart() {
google.charts.load('current', { packages: ['corechart', 'bar'] });
google.charts.setOnLoadCallback(drawAnnotations);
function drawAnnotations() {
var dataPercentage = new google.visualization.DataTable();
dataPercentage.addColumn('string', 'Productivity');
dataPercentage.addColumn('number', 'Ravi');
dataPercentage.addColumn({ type: 'string', role: 'annotation' });
dataPercentage.addColumn('number', 'Avg Data');
dataPercentage.addColumn({ type: 'string', role: 'annotation' });
dataPercentage.addRows([
['%Score1', 12, '12%', 15, '15%'],
['%Score2', 25, '25%', 21, '21%']
]);
singleUserChartOptions(dataPercentage, 'individualUserPercentageChart', true, 450);
}
}
function singleUserChartOptions(chartData, chartDivId, isShowPercent, chartWidth) {
var options = {
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 15,
color: '#000',
auraColor: 'none'
}
},
vAxis: { format: (isShowPercent == true) ? '#\'%\'' : '', ticks :[0,10,20,30,40,50]},
hAxis: {
slantedText: true,
slantedTextAngle: -45,
textStyle: { fontSize: 11 }
},
series: {
0: { targetAxisIndex: 0, },
1: { targetAxisIndex: 1, }
},
vAxes: {
0: { textPosition: 'none' },
1: {}
},
legend: { position: 'top' },
width: chartWidth,
height: 400
};
var chart = new google.visualization.ColumnChart(document.getElementById(chartDivId));
chart.draw(chartData, options);
}
singleUserChart();
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="individualUserPercentageChart" style="height: 500px; width: 100%"></div>
</body>
</html>

We Keep Coding

iphone swift flutter scala powershell matlab mongodb postgresql perl eclipse

Cannot click MultiPolygon - leaflet

Related

Google Chart - How to change color of one column only in ComboChart?

How do I format vAxis to percent in Google Charts API?

Leaflet v1.03: Make CircleMarker draggable?

How to draw different colors polylines using yours direction service in openalyers3

Google Visualization API -- Putting Y Axis on Right Side?

Categories

Resources