We Keep Coding

Javascript Google Chart: how to set background stroke color and size?

I try to add background color size and color, but it doesn't work for me. Could you help?
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Level', 'Total time in sec'],
['Level One', totalTime ]
]);
var options = {
title: 'Statistics',
backgroundColor: 'red'
backgroundColor: {
stroke: 'green',
strokeWidth: 5
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
This code:
backgroundColor: {
stroke: 'green',
strokeWidth: 5
},
doesn't work

Why do you define the backgroundColor property twice ?
Anyway, you miss a comma after "red" :
var options = {
title: 'Statistics',
backgroundColor: 'red',
backgroundColor: {
stroke: 'green',
strokeWidth: 5
},
};

Raphael: onclick delay on Mobile

I'm using Raphael to create an interactive pie chart. Onclick on mobile seem to be laggy. What would be the appropriate way to change the below to a "touch" based solution that isn't so slow?
I also noticed that in IE11 that the function myHoverOut isn't activating. I'm not entirely sure why. Works fine in Chrome, Firefox and Safari.
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var w = 330;
var h = 330;
var R = Raphael("paper");
R.setViewBox(0,0,w,h,true);
var svg = document.querySelector("svg");
svg.removeAttribute("width");
svg.removeAttribute("height");
// Setting preserveAspectRatio to 'none' lets you stretch the SVG
R.canvas.setAttribute('preserveAspectRatio', 'xMidYMid meet');
var iconStyle = {
fill: "#fff",
stroke: "",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyle = {
fill: "#1b2833",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStylePeople = {
fill: "#005190",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyleMoney = {
fill: "#0f5086",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyleIP = {
fill: "#0d4b7c",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyleScience = {
fill: "#0f4873",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyleEndors = {
fill: "#0f436a",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyleLegislator = {
fill: "#144162",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyleChain = {
fill: "#173c59",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStylevaluePrice = {
fill: "#1d3853",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStylemarketNeed = {
fill: "#20364b",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyleAssets = {
fill: "#223343",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyleLeadEnt = {
fill: "#252d38",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var wheel = {};
wheel.people = R.path("M205.1,84.2c-0.8-0.4-1.6-0.7-2.5-1.1c-0.1-0.1-0.3-0.1-0.5-0.2c-5.4-2.2-11-3.9-16.6-5 c-0.2,0-0.3-0.1-0.5-0.1c-5.7-1.1-11.5-1.7-17.3-1.7h-0.5c-4.7,0-9.4,0.4-14,1.1l-4.7-6.5l-0.8-1.1v0l-40.8-57 c9.1-3.5,18.4-6.2,27.9-8.1c0.2-0.1,0.3-0.1,0.5-0.1c10.5-2.1,21.2-3.1,31.9-3.1h0.5c10.7,0,21.4,1.1,31.9,3.1 c0.2,0,0.4,0.1,0.5,0.1c0.3,0.1,0.7,0.1,1,0.2l3.6,72v0l0.1,1.2v0L205.1,84.2z").attr(segmentStylePeople);
wheel.leadEntrepreneur = R.path("M285,50l-0.3,0.6l-35.6,62l-0.6,1l-3.3,5.8c-0.5-0.8-1-1.7-1.6-2.5c-0.1-0.1-0.2-0.3-0.3-0.4 c-3.2-4.7-6.9-9.2-11-13.4c0,0-0.1-0.1-0.1-0.1c-0.1-0.1-0.2-0.2-0.3-0.3c-4.2-4.1-8.7-7.8-13.4-11c-0.1-0.1-0.3-0.2-0.4-0.3 c-4.1-2.7-8.5-5.1-12.9-7.1l-0.3-6.2v0l-0.1-1.2v0l-3.6-72c10.1,2.1,20.1,5.1,29.7,9.1c0.2,0.1,0.3,0.1,0.5,0.2 c9.8,4.1,19.3,9.1,28.3,15.1c0.1,0.1,0.3,0.2,0.4,0.3c8.7,5.9,17,12.7,24.8,20.4C284.8,49.8,284.9,49.9,285,50L285,50z").attr(segmentStyleLeadEnt);
wheel.assets = R.path("M330.4,134.2l-1.8,0.9l0,0l-1.7,0.8l0,0l-60.1,31.2l-1,0.5l-7,3.6c0-1.2,0.1-2.4,0.1-3.6c0-0.2,0-0.4,0-0.5 c0-5.8-0.6-11.6-1.7-17.3c0-0.2,0-0.3-0.1-0.5c-1.1-5.7-2.8-11.2-5.1-16.7c0-0.2-0.1-0.3-0.2-0.5c-1.8-4.4-4-8.7-6.6-12.8l3.3-5.8 l0.6-1l35.6-62L285,50c0,0,0.1,0.1,0.1,0.1c7.7,7.7,14.5,16,20.4,24.8c0.1,0.1,0.2,0.3,0.3,0.4c6,9,11.1,18.5,15.1,28.3 c0.1,0.2,0.1,0.3,0.2,0.5C325.2,113.9,328.3,124,330.4,134.2").attr(segmentStyleAssets);
wheel.marketNeed = R.path("M333.7,167.2v0.5c0,10.7-1,21.4-3.1,31.9c0,0.2-0.1,0.4-0.1,0.5c-2,9.9-4.8,19.6-8.6,29l-6.3-0.6h0l-1.8-0.2h0 l-63.6-5.9l-1.1-0.1l-7.9-0.7c0.7-1,1.5-2.1,2.2-3.1c0.1-0.1,0.2-0.3,0.3-0.4c3.3-4.9,6-10,8.2-15.4c0.1-0.2,0.1-0.3,0.2-0.5 c2.3-5.4,3.9-11,5-16.7c0-0.2,0.1-0.4,0.1-0.5c0.9-4.5,1.4-9.1,1.6-13.7l7-3.6l1-0.5l60.1-31.2l0,0l1.7-0.8l0,0l1.8-0.9 c0,0.2,0.1,0.4,0.1,0.6c0,0.2,0.1,0.3,0.1,0.5C332.7,145.8,333.7,156.5,333.7,167.2").attr(segmentStylemarketNeed);
wheel.valuePrice = R.path("M322,229.2c-0.2,0.6-0.5,1.2-0.7,1.7c0,0.2-0.1,0.3-0.2,0.5c-4.1,9.8-9.1,19.3-15.1,28.3 c-0.1,0.1-0.2,0.3-0.3,0.4v0c-5.9,8.8-12.7,17-20.4,24.8c-0.1,0.1-0.1,0.2-0.2,0.3c0,0-0.1,0.1-0.1,0.1 c-6.7,6.7-13.9,12.8-21.4,18.1l-10.3-8.1h0l-1.3-1.1l0,0l-46.7-36.5l-0.8-0.7l-4.8-3.8c0.9-0.3,1.9-0.7,2.8-1.1 c0.1-0.1,0.3-0.1,0.5-0.2c5.3-2.2,10.5-4.9,15.4-8.2c0.1-0.1,0.3-0.2,0.4-0.3c4.7-3.2,9.3-6.9,13.4-11.1c0,0,0.1-0.1,0.1-0.1 c0.1-0.1,0.2-0.2,0.3-0.3c3.2-3.3,6.2-6.8,8.9-10.4l7.9,0.7l1.1,0.1l63.6,5.9h0l1.8,0.2h0L322,229.2z").attr(segmentStylevaluePrice);
wheel.supplyChain = R.path("M263.5,303.5c-1.1,0.8-2.2,1.6-3.4,2.3c-0.1,0.1-0.3,0.2-0.4,0.3c-9,6-18.5,11.1-28.3,15.2 c-0.1,0.1-0.3,0.1-0.5,0.2c-10,4.1-20.3,7.2-30.7,9.3c-0.2,0-0.3,0.1-0.5,0.1c-8.1,1.6-16.3,2.6-24.5,3l-7.5-21.4l-0.5-1.5 l-17.8-51.1l-0.4-1l-0.6-1.7c0.3,0.1,0.6,0.1,0.9,0.2c0.2,0.1,0.4,0.1,0.5,0.1c5.7,1.1,11.5,1.7,17.3,1.7h0.5 c5.8,0,11.6-0.6,17.3-1.7h0c0.2,0,0.3-0.1,0.5-0.1c4.7-1,9.3-2.3,13.9-4l4.8,3.8l0.9,0.7l46.7,36.5l0,0l1.3,1.1h0L263.5,303.5z").attr(segmentStyleChain);
wheel.legislatorsRegulators = R.path("M175.1,333.8c-2.5,0.1-5,0.2-7.5,0.2h-0.5c-10.7,0-21.4-1.1-32-3.1c-0.2,0-0.4-0.1-0.5-0.1 c-10.5-2.1-20.7-5.2-30.7-9.3c-0.2,0-0.3-0.1-0.5-0.2c-6.2-2.6-12.3-5.5-18.2-8.9l8-33.3l0.4-1.5l10.5-43.8c3.8,3.7,7.9,7,12.2,9.8 c0.1,0.1,0.3,0.2,0.4,0.3c4.9,3.3,10,6,15.4,8.2c0.1,0.1,0.3,0.2,0.5,0.2c5.1,2.1,10.4,3.7,15.8,4.9l0.6,1.7l0.4,1l17.8,51.1 l0.5,1.5L175.1,333.8z").attr(segmentStyleLegislator);
wheel.independantEndorsement = R.path("M104.1,233.7l-10.5,43.8l-0.4,1.5l-8,33.3c-3.4-2-6.8-4-10.1-6.2c-0.1-0.1-0.3-0.2-0.4-0.3 c-8.8-5.9-17.1-12.7-24.8-20.4l-0.4-0.4c-7.7-7.7-14.5-16-20.4-24.8c-0.1-0.1-0.2-0.3-0.3-0.4c-2.8-4.3-5.5-8.6-7.9-13.1l33.4-32 l1.1-1l23.5-22.5c1,3.8,2.3,7.5,3.8,11.2c0,0.1,0.1,0.3,0.2,0.5c2.2,5.3,5,10.5,8.2,15.4c0.1,0.1,0.2,0.3,0.3,0.4 c3.2,4.7,6.9,9.3,11.1,13.5c0.1,0.1,0.1,0.2,0.2,0.3l0.1,0.1C103.2,232.9,103.6,233.3,104.1,233.7").attr(segmentStyleEndors);
wheel.underpinningScience = R.path("M77.7,185.6c0.4,1.8,0.8,3.6,1.3,5.4l-23.5,22.5l-1.1,1l-33.4,32c-2.7-5-5.1-10-7.2-15.2 c-0.1-0.2-0.1-0.3-0.2-0.5c-4.1-10-7.2-20.3-9.3-30.7c-0.1-0.2-0.1-0.3-0.1-0.5C2,189.1,1,178.4,1,167.8v-0.5 c0-3.5,0.1-6.9,0.4-10.4l55.9-10.9h0l1.4-0.3h0l21-4.1c-0.8,2.6-1.4,5.2-2,7.9c0,0.2-0.1,0.3-0.1,0.5c-1.1,5.7-1.7,11.5-1.7,17.3 v0.5c0,5.8,0.6,11.6,1.7,17.3C77.6,185.3,77.6,185.4,77.7,185.6").attr(segmentStyleScience);
wheel.intellectualProperty = R.path("M106.7,99.2c-1.3,1.1-2.5,2.3-3.7,3.5l-0.4,0.4c-4.2,4.2-7.9,8.7-11,13.4c-0.1,0.1-0.2,0.3-0.3,0.4 c-3.3,4.9-6,10-8.2,15.3c-0.1,0.1-0.1,0.3-0.2,0.5c-1.2,2.9-2.2,5.8-3.1,8.8l-21,4.1h0l-1.4,0.3h0L1.4,156.8 c0.5-7.2,1.4-14.4,2.8-21.5c0-0.2,0.1-0.3,0.1-0.5c2.1-10.5,5.2-20.7,9.3-30.7c0.1-0.2,0.1-0.3,0.2-0.5c4.1-9.8,9.1-19.2,15.1-28.3 c0.1-0.1,0.2-0.3,0.3-0.4c1.2-1.7,2.4-3.4,3.6-5.1l60.6,24.1l1.3,0.5L106.7,99.2z").attr(segmentStyleIP);
wheel.money = R.path("M148.4,70.7l-0.8-1.1v0l-40.8-57c-0.9,0.4-1.9,0.7-2.8,1.1v0c-0.2,0-0.3,0.1-0.5,0.2 c-9.8,4.1-19.3,9.1-28.3,15.1c-0.1,0.1-0.3,0.2-0.4,0.3C66,35.2,57.7,42,50,49.7c-0.1,0.1-0.2,0.2-0.3,0.3l-0.1,0.1 c-6.2,6.2-11.8,12.8-16.8,19.7l60.6,24.1l1.3,0.5l12,4.8c3.1-2.8,6.3-5.2,9.7-7.5c0.1-0.1,0.3-0.2,0.4-0.3c4.9-3.3,10-6,15.4-8.2 c0.1-0.1,0.3-0.1,0.5-0.2c5.4-2.2,11-3.9,16.6-5c0.2-0.1,0.3-0.1,0.5-0.1c1.1-0.2,2.2-0.4,3.3-0.6L148.4,70.7z").attr(segmentStyleMoney);
var icon = {};
icon.people = R.path("M178.1,40.9l0-1.2c1.7,0.2,5.1-1,5.1-1c-1.2-1.2-1.4-2.6-2.2-8s-5.5-5.4-5.8-5.4c-0.4,0-5.1-0.1-5.8,5.4 c-0.8,5.4-1,6.8-2.2,8c0,0,3.4,1.2,5.1,1l0,1.2c-0.9,0.9-1.9,1.7-2.9,2.3c0.3,0.2,0.7,0.4,1,0.5c2.3,1.2,4.4,2.4,4.4,4.8v2.6h10.6 c0.4,0,0.7-0.3,0.7-0.7v-3C186,44.7,181,44.1,178.1,40.9 M164.8,41.2L164.8,41.2v-1c0.9-1,1.5-2.2,2-3.5c0.1-0.2,0.1-0.4,0.2-0.6c0.5-0.2,0.8-0.8,0.9-1.6 c0-0.3,0-0.5,0-0.7c-0.1-0.4-0.2-0.7-0.4-0.9c0-0.7,0-1.5,0-2.3c0-0.6-0.1-1.3-0.1-1.9c0-0.2,0-0.3-0.1-0.5 c-0.7-3.9-4.2-4.3-5.5-4.3c-0.1,0-1,0-1,0c-1.3,0-4.9,0.4-5.5,4.3c0,0.2,0,0.3-0.1,0.5c-0.1,0.7-0.1,1.3-0.1,1.9 c0,0.8,0,1.6,0,2.3c-0.2,0.2-0.3,0.5-0.4,0.9c0,0.2,0,0.5,0,0.7c0.1,0.8,0.5,1.4,0.9,1.6c0.1,0.4,0.2,0.8,0.4,1.2 c0.4,1.1,1,2.1,1.8,3v1c-3.3,3.6-8.8,4.3-8.8,7.3v3.3c0,0.4,0.3,0.7,0.7,0.7h23.4c0.4,0,0.7-0.3,0.7-0.7v-3.3 C173.6,45.5,168.1,44.8,164.8,41.2").attr(iconStyle);
icon.leadEntrepreneur = R.path("M237.7,43.1c9.4,0,17,7.6,17,17c0,3.7-1.2,7.1-3.2,9.9c-0.2-3.5-2-4.8-2-4.8c-0.7-1.7-5.3-3.1-5.3-3.1 c-1.7-0.6-2.2-1.2-2.4-1.5c0,0,0-0.1,0-0.1v0c0,0,0,0,0-0.1v0c-0.1-0.2-0.2-0.8-0.2-1c0,0,0,0,0,0.1c0-0.1,0-0.3,0-0.5c0,0,0,0,0,0 c0.6-0.7,1-1.5,1.3-2.4c0.5-0.5,0.8-1.8,0.8-1.8c0.3-1,0.2-1.5,0.1-1.7c0-0.1,0.9-2.7-0.3-4.7c0,0-0.4-1.9-2.6-2.7 c-2-1.2-5-0.5-5-0.5c-3.7,0.6-4.5,4.9-4.5,4.9c-0.2,2,0.3,3.2,0.3,3.3c-0.2,0.5,0.2,1.7,0.2,1.7c0.1,0.7,0.5,1,0.6,1 c0.3,0.9,0.7,1.8,1.3,2.6c0,0,0,0,0,0c0,0,0.1,0.3,0,0.7c0,0,0-0.1,0-0.1c0,0.2-0.2,0.8-0.2,0.9c0,0,0,0,0,0 c-0.2,0.2-0.3,0.4-0.5,0.6c-1.4,1.1-4.7,2.1-4.7,2.1c-1.4,0.6-2,1.4-2,1.4c-1.5,2.2-2.1,4.4-2.3,5.5c-2.1-2.8-3.3-6.3-3.3-10 C220.7,50.7,228.3,43.1,237.7,43.1 M237.7,41.5c-10.3,0-18.6,8.3-18.6,18.6c0,10.3,8.3,18.6,18.6,18.6c10.3,0,18.6-8.3,18.6-18.6 C256.3,49.9,248,41.5,237.7,41.5").attr(iconStyle);
icon.assets = R.path("M286.8,125.6c-3.4,0-6.2-2.8-6.2-6.2c0-3.4,2.8-6.2,6.2-6.2c3.4,0,6.2,2.8,6.2,6.2 C293,122.8,290.2,125.6,286.8,125.6 M304.9,117.1c-0.1-0.5-0.6-1-1.1-1l-2.3-0.1c-0.5,0-1.1-0.5-1.2-0.9l-0.8-2.1 c-0.2-0.5-0.1-1.2,0.2-1.5l1.5-1.7c0.3-0.4,0.4-1,0-1.4l-3.3-3.3c-0.4-0.3-1-0.3-1.4,0l-1.7,1.5c-0.4,0.3-1.1,0.4-1.5,0.2l-2.1-0.8 c-0.5-0.2-0.9-0.7-0.9-1.2l-0.1-2.3c0-0.5-0.5-1-1-1.1c0,0-1.2-0.2-2.3-0.2c-1.1,0-2.3,0.2-2.3,0.2c-0.5,0.1-1,0.6-1,1.1l-0.1,2.3 c0,0.5-0.5,1.1-0.9,1.2l-2.1,0.8c-0.5,0.2-1.2,0.1-1.5-0.2l-1.7-1.5c-0.4-0.3-1-0.4-1.4,0l-3.3,3.3c-0.3,0.4-0.3,1,0,1.4l1.5,1.7 c0.3,0.4,0.4,1.1,0.2,1.5l-0.8,2.1c-0.2,0.5-0.7,0.9-1.2,0.9l-2.3,0.1c-0.5,0-1,0.5-1.1,1c0,0-0.2,1.2-0.2,2.3s0.2,2.3,0.2,2.3 c0.1,0.5,0.6,1,1.1,1l2.3,0.1c0.5,0,1.1,0.5,1.2,0.9l0.8,2.1c0.2,0.5,0.1,1.2-0.2,1.5l-1.5,1.7c-0.3,0.4-0.4,1,0,1.4l3.3,3.3 c0.4,0.3,1,0.3,1.4,0l1.7-1.5c0.4-0.3,1.1-0.4,1.5-0.2l2.1,0.8c0.5,0.2,0.9,0.7,0.9,1.2l0.1,2.3c0,0.5,0.5,1,1,1.1 c0,0,1.2,0.2,2.3,0.2c1.1,0,2.3-0.2,2.3-0.2c0.5-0.1,1-0.6,1-1.1l0.1-2.3c0-0.5,0.5-1.1,0.9-1.2l2.1-0.8c0.5-0.2,1.2-0.1,1.5,0.2 l1.7,1.5c0.4,0.3,1,0.4,1.4,0l3.3-3.3c0.3-0.4,0.3-1,0-1.4l-1.5-1.7c-0.3-0.4-0.4-1.1-0.2-1.5l0.8-2.1c0.2-0.5,0.7-0.9,1.2-0.9 l2.3-0.1c0.5,0,1-0.5,1.1-1c0,0,0.2-1.2,0.2-2.3S304.9,117.1,304.9,117.1").attr(iconStyle);
icon.marketNeed = R.path("M312.6,187.5c-0.3-0.4-0.7-0.5-1.1-0.5h-9.2c-0.6-4-3-9.8-9-9.8s-8.4,5.8-9,9.8h-9.1c-0.4,0-0.9,0.1-1.1,0.5 c-0.3,0.4-0.3,0.8-0.2,1.2l6.1,18.5c0.2,0.6,0.7,0.8,1.3,0.8h24.1c0.6,0,1.1-0.3,1.3-0.8l6.1-18.6 C313,188.2,312.9,187.8,312.6,187.5z M303,195h4.8l-1.6,5H303V195z M278.9,195h5.1v5h-3.5L278.9,195z M293,190v4h-8v-4H293z M293,195v5h-8v-5H293z M285,201h8v4h-8V201z M294,201h7v4h-7V201z M294,200v-5h7v5H294z M294,194v-4h7v4H294z M293.3,180 c4.3,0,5.7,4,6.2,7h-12.4C287.6,184,289,180,293.3,180z M284,190v4h-5.6l-1.3-4H284z M280.9,201h3.1v4h-1.7L280.9,201z M304.4,205 H303v-4h2.7L304.4,205z M308.2,194H303v-4h6.6L308.2,194z").attr(iconStyle);
icon.valuePrice = R.path("M271.8,251v12.3h-4.2L271.8,251z M273.3,251l4.2,12.3h-4.2V251z M250.1,263.3V251l4.2,12.3H250.1z M248.6,251 v12.3h-4.2L248.6,251z M273.7,247.7h0.3c0.6,0,1.1-0.5,1.1-1.1c0-0.6-0.5-1.1-1.1-1.1h-11.9l-0.1-4c0-0.6-0.5-1.1-1.1-1.1 c-0.6,0-1.1,0.5-1.1,1.1l-0.1,4h-11.9c-0.6,0-1.1,0.5-1.1,1.1c0,0.6,0.5,1.1,1.1,1.1h0.3l-5.4,15.6c0,0,0,3.6,6.5,3.6 s6.5-3.6,6.5-3.6l-5.4-15.6h9.2l0,0.8c-0.6,0.4-0.9,1-0.9,1.8c0,0.7,0.3,1.3,0.8,1.7l-0.4,17.9c-6.9,0.5-6.9,3.6-6.9,3.6h17.4 c0,0,0-3.1-6.9-3.6l-0.4-17.9c0.5-0.4,0.8-1,0.8-1.7c0-0.7-0.4-1.4-0.9-1.8l0-0.8h9.2l-5.4,15.6c0,0,0,3.6,6.5,3.6 c6.5,0,6.5-3.6,6.5-3.6L273.7,247.7z").attr(iconStyle);
icon.supplyChain = R.path("M187.5,290.5l-6.4,6.4h4.3v5.4c0,0.8,0.3,1.7,0.9,2.3c0.6,0.6,1.5,0.9,2.3,0.9h19.3c0.8,0,1.7-0.3,2.3-0.9 c0.6-0.6,0.9-1.5,0.9-2.3v-5.4h-4.3v4.3h-17.2v-4.3h4.3L187.5,290.5L187.5,290.5z M188.6,279.8c-0.8,0-1.7,0.3-2.3,0.9 c-0.6,0.6-0.9,1.5-0.9,2.3v5.4h4.3v-4.3h17.1v4.3h-4.3l6.4,6.4l6.4-6.4h-4.3V283c0-0.8-0.3-1.7-0.9-2.3c-0.6-0.6-1.5-0.9-2.3-0.9 H188.6L188.6,279.8z").attr(iconStyle);
icon.legislatorsRegulators = R.path("M132.2,300.3c-0.1,0.1-0.2,0.2-0.3,0.3v1.9c0,0.5-0.4,0.9-0.9,0.9h-19.4c-0.5,0-0.9-0.4-0.9-0.9v-24.9 c0-0.5,0.4-0.9,0.9-0.9H131c0.5,0,0.9,0.4,0.9,0.9v7.2l2.8-3.5v-4.5c0-1.7-1.4-3.1-3.1-3.1H111c-1.7,0-3.1,1.4-3.1,3.1v26.4 c0,1.7,1.4,3.1,3.1,3.1h20.6c1.7,0,3.1-1.4,3.1-3.1v-6.1L132.2,300.3z M128.3,299.7c-0.7,0-1.4-0.3-1.9-0.9l-4.6-5.3c-0.9-1-0.8-2.6,0.3-3.5c1-0.9,2.6-0.8,3.5,0.3l2.6,3l9.5-12 c0.8-1.1,2.4-1.2,3.5-0.4c1.1,0.8,1.2,2.4,0.4,3.5l-11.4,14.3C129.8,299.3,129.1,299.6,128.3,299.7L128.3,299.7z").attr(iconStyle);
icon.independantEndorsement = R.path("M74.1,246l-4.5-0.7l-2.4-3.9c-0.5-0.8-1.2-0.8-1.7,0l-2.6,3.9l-4.3,0.5c-0.9,0.1-1.2,0.8-0.7,1.6l2.7,4.4 l-0.5,4.5c-0.1,0.9,0.5,1.4,1.3,1.1l4.9-1.6l4.8,1.7c0.8,0.3,1.4-0.2,1.4-1.1l-0.4-4.6l2.9-4.3C75.3,246.8,75,246.1,74.1,246 M66.3,266c-3.4,0-6.6-1.1-9.3-2.9l-6,0.7c-1,0.1-1.6-0.6-1.3-1.5l1.8-5.6c-1-2.2-1.6-4.6-1.6-7.2c0-9.1,7.3-16.4,16.4-16.4 s16.4,7.3,16.4,16.4S75.4,266,66.3,266").attr(iconStyle);
icon.underpinningScience = R.path("M54.2,178.3c-0.6,0-1.1-0.5-1.1-1.1s0.5-1.1,1.1-1.1c0.6,0,1.1,0.5,1.1,1.1S54.9,178.3,54.2,178.3 M44,188.6 c-0.6,0-1.1-0.5-1.1-1.1s0.5-1.1,1.1-1.1c0.6,0,1.1,0.5,1.1,1.1S44.6,188.6,44,188.6 M32.1,186.9c-0.6,0-1.1-0.5-1.1-1.1 c0-0.6,0.5-1.1,1.1-1.1c0.6,0,1.1,0.5,1.1,1.1C33.2,186.4,32.7,186.9,32.1,186.9 M24.4,194.8c-0.6,0-1.1-0.5-1.1-1.1 c0-0.6,0.5-1.1,1.1-1.1c0.6,0,1.1,0.5,1.1,1.1C25.5,194.3,25,194.8,24.4,194.8 M54.2,173.7c-1.9,0-3.5,1.6-3.5,3.5 c0,0.6,0.2,1.2,0.5,1.8l-5.5,5.5c-0.5-0.3-1.1-0.4-1.7-0.4c-1.4,0-2.6,0.8-3.2,2l-5.4-1c-0.4-1.5-1.7-2.7-3.4-2.7 c-1.9,0-3.5,1.6-3.5,3.5c0,0.6,0.1,1.1,0.4,1.6l-3.2,3.2c-0.4-0.2-0.9-0.3-1.5-0.3c-1.9,0-3.5,1.6-3.5,3.5c0,1.9,1.6,3.5,3.5,3.5 c1.9,0,3.5-1.6,3.5-3.5c0-0.5-0.1-1-0.3-1.5l3.2-3.2c0.4,0.2,0.9,0.3,1.3,0.3c1.3,0,2.5-0.8,3.1-1.9l5.5,1.1 c0.4,1.5,1.8,2.5,3.3,2.5c1.9,0,3.5-1.6,3.5-3.5c0-0.4-0.1-0.9-0.2-1.3l5.8-5.8c0.4,0.1,0.8,0.2,1.2,0.2c1.9,0,3.5-1.6,3.5-3.5 C57.7,175.2,56.2,173.7,54.2,173.7").attr(iconStyle);
icon.intellectualProperty = R.path("M45.4,132c0.7,1.3,2.1,2.2,3.7,2.2s3-0.9,3.7-2.2H45.4z M53.2,125c0.7,0,1.5-0.7,1.5-1.5c0-6.3,5.5-7.1,5.5-15.1c0-6.1-5-11.1-11.1-11.1c-6.1,0-11.1,5-11.1,11.1 c0,8,5.5,8.9,5.5,15.1c0,0.7,0.7,1.5,1.5,1.5H53.2z M54,127c0,0.5-0.4,0.9-0.9,0.9h-7.8c-0.5,0-0.9-0.4-0.9-0.9c0-0.5,0.4-0.9,0.9-0.9H53 C53.5,126.1,54,126.5,54,127 M54,130c0,0.5-0.4,0.9-0.9,0.9h-7.8c-0.5,0-0.9-0.4-0.9-0.9c0-0.5,0.4-0.9,0.9-0.9H53 C53.5,129.1,54,129.5,54,130").attr(iconStyle);
icon.money = R.path("M92.2,50.1c-2-3-4-5-1.3-5.5c0.4-0.1,2.2-0.3,2.7-0.2c0.6,0.1,1.1,0.4,1.7,0.6c0.7,0.3,1.5,0.3,2.2,0.4 c0.8,0,1.7-0.2,2.4-0.4c0.5-0.2,1.1-0.4,1.6-0.6c0.6-0.1,2.2,0.3,2.5,0.3c0.4,0.1,0.8,0.2,1,0.6c0.2,0.6-0.3,1.4-0.6,1.8 c-0.6,1-1.3,1.9-2,2.9l-0.8,1.1H93L92.2,50.1z M101.4,71.9h-8.2v-1.3l0.1-0.1c1.2-0.6,2-1.8,2-3.1c0-0.3,0-0.7-0.1-1.1h-1.9v-1.7H95 c-0.1-0.5-0.2-1.1-0.2-1.8c0-2.3,1.6-3.9,3.8-3.9c1.2,0,1.9,0.3,2.2,0.5l0.1,0.1l-0.5,1.7l-0.3-0.1c-0.2-0.1-0.7-0.4-1.6-0.4 c-1.5,0-1.8,1.1-1.8,2.1c0,0.7,0.1,1.3,0.2,1.7h2.7v1.7h-2.5c0,0.7,0,1.3-0.1,1.9c-0.2,0.7-0.5,1.2-1,1.7h5.2V71.9z M112.1,67 c-2.2-5.1-6.2-10.7-10.5-13.4h-8.7c-4.2,2.7-8.2,8.3-10.5,13.4c-2.2,5.1,0.4,10.2,5.5,10.2h18.6C111.6,77.2,114.3,72.2,112.1,67").attr(iconStyle);
var current = null;
for (var segment in wheel) {
(function (st, segment) {
st[0].onmouseover = function () {
current && wheel[current].animate() && (document.getElementById(current).style.display = "");
document.getElementById(segment).style.display = "block";
current = segment;
};
if (segment == "people") {
st[0].onmouseover();
wheel.people.animate({ fill: '#005190', transform: 's1.05' }, 200);
wheel.people.toFront();
icon.people.animate({ fill: '#FFFFFF', transform: 's1.2' }, 200);
icon.people.toFront();
var bounce = Raphael.animation({transform: 's1.2'}, 500, "bounce").repeat(Infinity);
icon.people.animate(bounce);
icon.people.toFront();
}
})(wheel[segment], segment);
(function (st, segment) {
st[0].onclick = function () {
current && wheel[current].animate() && (document.getElementById(current).style.display = "");
document.getElementById(segment).style.display = "block";
current = segment;
};
})(wheel[segment], segment);
wheel[segment].color = "#005190";
wheel[segment].mouseover( myHover.bind(null, segment) )
icon[segment].mouseover( myHover.bind(null, segment) )
wheel[segment].mouseout( myHoverOut.bind(null, segment) )
icon[segment].mouseout( myHoverOut.bind(null, segment) )
wheel[segment].mousedown( myHover.bind(null, segment) )
icon[segment].mousedown( myHover.bind(null, segment) )
wheel[segment].touchstart( myHover.bind(null, segment) )
icon[segment].touchstart( myHover.bind(null, segment) )
wheel[segment].mouseout( myHoverOut.bind(null, segment) )
icon[segment].mouseout( myHoverOut.bind(null, segment) )
wheel[segment].touchend( myHoverOut.bind(null, segment) )
icon[segment].touchend( myHoverOut.bind(null, segment) )
}
function myHover( type ) {
icon.people.stop();
icon.people.animate({ fill: '#FFFFFF', transform: 's1' }, 200);
wheel[ type ].animate({ fill: '#005190', transform: 's1.05' }, 200);
icon[ type ].animate({ fill: '#FFFFFF', transform: 's1.2' }, 200);
wheel[ type ].toFront();
icon[ type ].toFront();
}
function myHoverOut( type ) {
wheel[ type ].animate({ fill: '#1b2833', transform: 's1' }, 200);
icon[ type ].animate({ fill: '#FFFFFF', transform: 's1' }, 200);
icon.people.animate({ fill: '#FFFFFF', transform: 's1' }, 200);
wheel.people.animate({ fill: '#005190', transform: 's1' }, 200);
wheel.leadEntrepreneur.animate({ fill: '#252d38', transform: 's1' }, 200);
wheel.assets.animate({ fill: '#223343', transform: 's1' }, 200);
wheel.marketNeed.animate({ fill: '#20364b', transform: 's1' }, 200);
wheel.valuePrice.animate({ fill: '#1d3853', transform: 's1' }, 200);
wheel.supplyChain.animate({ fill: '#173c59', transform: 's1' }, 200);
wheel.legislatorsRegulators.animate({ fill: '#144162', transform: 's1' }, 200);
wheel.independantEndorsement.animate({ fill: '#0f436a', transform: 's1' }, 200);
wheel.underpinningScience.animate({ fill: '#0f4873', transform: 's1' }, 200);
wheel.intellectualProperty.animate({ fill: '#0d4b7c', transform: 's1' }, 200);
wheel.money.animate({ fill: '#0f5086', transform: 's1' }, 200);
}
};
</script>

It is slow because you are making too many dom access. Try reducing the use of document.getElementById in the click function. You can achieve this by either of the following:
Use the 'this' keyword inside the onclick function.
Send the dom element as parameter to the click function when it is declared.
PS: I do not know your complete application so there can be other ways too to reduce dom interaction.

How do I add a second attribute in JavaScript?

I am currently working with a jvectormap. Each county has a data-code (example: 48201). Here is my code for the counties that I have colored so far...
jvm.Map.maps = {};
jvm.Map.defaultParams = {
map: 'us_lcc_en',series: {
regions: [{
values: {
/* --------------- Active Franchise --------------- */
'42029':'#eb2e4d',
'42091':'#eb2e4d',
'42101':'#eb2e4d',
'42045':'#eb2e4d',
'42017':'#eb2e4d',
'42077':'#eb2e4d',
'42095':'#eb2e4d',
'48085':'#eb2e4d',
'48113':'#eb2e4d',
'48439':'#eb2e4d',
'48121':'#eb2e4d',
/* --------------- Available Franchise --------------- */
'42129':'#5d9eec',
'42007':'#5d9eec',
'42125':'#5d9eec',
'42019':'#5d9eec',
'42003':'#5d9eec',
'13067':'#5d9eec',
'13121':'#5d9eec',
'13057':'#5d9eec',
'13135':'#5d9eec',
'13089':'#5d9eec',
'13063':'#5d9eec',
'13151':'#5d9eec',
'13297':'#5d9eec',
'13117':'#5d9eec',
'48339':'#5d9eec',
'48201':'#5d9eec',
'48157':'#5d9eec',
'48167':'#5d9eec',
'48039':'#5d9eec',
'48029':'#5d9eec',
'48187':'#5d9eec',
'48091':'#5d9eec',
'04013':'#5d9eec',
'09003':'#5d9eec',
'09013':'#5d9eec',
'09001':'#5d9eec',
'09009':'#5d9eec',
'09007':'#5d9eec',
'09005':'#5d9eec',
/* --------------- Pending Franchise --------------- */
'48491':'#83a85d',
'48453':'#83a85d',
'48209':'#83a85d',
},
attribute:'fill',
"stroke-width": 4
}]
},
backgroundColor: '#ffffff',
zoomButtons: true,
zoomOnScroll: false,
panOnDrag: true,
zoomMax: 8,
zoomMin: 1,
zoomStep: 1.6,
zoomAnimate: true,
regionsSelectable: false,
markersSelectable: false,
bindTouchEvents: true,
regionStyle: {
initial: {
fill: 'rgb(204, 204, 204)',
"fill-opacity": 1,
stroke: 'rgb(204, 204, 204)',
"stroke-width": 0,
"stroke-opacity": 1,
},
hover: {
"fill-opacity": 0.7,
cursor: 'pointer'
},
selected: {
fill: 'yellow'
},
selectedHover: {
}
},
regionLabelStyle: {
initial: {
'font-family': 'Verdana',
'font-size': '12',
'font-weight': 'bold',
cursor: 'default',
fill: 'black',
},
hover: {
cursor: 'pointer'
}
},
markerStyle: {
initial: {
fill: 'grey',
stroke: '#505050',
"fill-opacity": 1,
"stroke-width": 1,
"stroke-opacity": 1,
r: 5
},
hover: {
stroke: 'black',
"stroke-width": 2,
cursor: 'pointer'
},
selected: {
fill: 'blue'
},
selectedHover: {
}
},
markerLabelStyle: {
initial: {
'font-family': 'Verdana',
'font-size': '12',
'font-weight': 'bold',
cursor: 'default',
fill: 'black'
},
hover: {
cursor: 'pointer'
}
}
};
jvm.Map.apiEvents = {
onRegionTipShow: 'regionTipShow',
onRegionOver: 'regionOver',
onRegionOut: 'regionOut',
onRegionClick: 'regionClick',
onRegionSelected: 'regionSelected',
onMarkerTipShow: 'markerTipShow',
onMarkerOver: 'markerOver',
onMarkerOut: 'markerOut',
onMarkerClick: 'markerClick',
onMarkerSelected: 'markerSelected',
onViewportChange: 'viewportChange'
};
As you can see at the bottom...the attribute is set to 'fill'. I also want to add 'stroke'. How do I go about adding that second attribute?

Attributes in a javaScript object are separated by commas. Suppose you wanted to add a stroke-width attribute:
In this case, you would change the tail end, near the bottom, to look something like this:
'48491':'#83a85d',
'48453':'#83a85d',
'48209':'#83a85d',
},
attribute: 'fill',
stroke-width: 4
}]
},
Which should make you happy. Though, as an aside, stroke-width will actually be the third attribute of 'regions': you'll note that values is written in the form of "values: {...}," -- it's an attribute too!

Joint.js add custom ports with path class. for custom elements

What I am trying to do is make a element with custom class for ports and path so that I can add an element with custom path and my own markup for ports.This way when I create an element I will pass dynamic path for its shape just like elements of path class behave and as I have also extended from PortsModelInterface I will also have my own markup for ports.
This whole effort is to make svg scalable for zomming. Previously I was using html custom element with my custom ports which was working fine but html of custom elements wasn't scaling on zooming
var graph = new joint.dia.
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 800,
height: 600,
gridSize: 1,
model: graph,
snapLinks: true,
embeddingMode: true
});
joint.shapes.custom1={};
joint.shapes.custom1.Element = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {
markup: '<g class="rotatable"><g class="scalable"><rect class = "myrect"/></g><g class="inPorts"/><g class="outPorts"/></g>',
portMarkup: '<g class="port<%= id %>"><circle class="port-body"/></g>',
defaults: joint.util.deepSupplement({
type: 'html.Element',
size: { width: 200, height: 110 },
inPorts: [],
outPorts: [],
attrs: {
'.': { magnet: true},
rect: {
stroke: 'none', 'fill-opacity': 0, width: 300, height: 210,
},
circle: {
r: 6, //circle radius
magnet: true,
left:0,
stroke: 'gray'
},
'.inPorts circle': { fill: 'gray', magnet: 'passive', type: 'input', y: 0},
'.outPorts circle': { fill: 'gray', type: 'output' }
}
}, joint.shapes.basic.Generic.prototype.defaults),
getPortAttrs: function (portName, index, total, selector, type) {
var attrs = {};
var portClass = 'port' + index;
var portSelector = selector + '>.' + portClass;
var portCircleSelector = portSelector + '>circle';
attrs[portCircleSelector] = { port: { id: portName || _.uniqueId(type), type: type } };
attrs[portSelector] = { ref: 'rect', 'ref-x': (index + 1) * (0.55 / total)};
if (selector === '.outPorts') {
attrs[portSelector]['ref-dy'] = 15;
}
return attrs;
}
}));
joint.shapes.custom1.Atomic = joint.shapes.custom1.Element.extend({
markup: '<g class="rotatable"><g class="scalable"><path/></g><text/></g>',
defaults: joint.util.deepSupplement({
type: 'basic.Path',
size: { width: 60, height: 60 },
attrs: {
'path': { fill: '#FFFFFF', stroke: 'black' },
'text': { 'font-size': 14, text: '', 'text-anchor': 'middle', 'ref-x': .5, 'ref-dy': 20, ref: 'path', 'y-alignment': 'middle', fill: 'black', 'font-family': 'Arial, helvetica, sans-serif' }
}
}, joint.shapes.basic.Generic.prototype.defaults)
});
var a2 = new joint.shapes.custom1.Atomic({
position: { x: 50, y: 260 },
size: { width: 100, height: 100 },
attrs: {
path: { d: 'M 30 0 L 60 30 30 60 0 30 z' },
text: {
text: 'Diamond',
'ref-y': .5 // basic.Path text is originally positioned under the element
}
},
inPorts: ['in'],
outPorts: ['out']
});
graph.addCells([a2])
The element is added in graph but some how the ports don't show up.
I don't have proper concept of adding classes so please any help will be greatly appreciated. Thanks.
Fiddle example

I suggest to define an element with custom markup for the shape and ports. Both markups should contain an SVG path, so you can set an arbitrary path data d via model.attr() on them.
joint.shapes.devs.GenericModel = joint.shapes.devs.Model.extend({
markup: '<g class="rotatable"><g class="scalable"><path class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',
portMarkup: '<g class="port port<%= id %>"><path class="port-body"/><text class="port-label"/></g>',
defaults: joint.util.deepSupplement({
type: 'devs.GenericModel'
}, joint.shapes.devs.Model.prototype.defaults)
});
Tell the paper to use devs.ModelView for rendering.
joint.shapes.devs.GenericModelView = joint.shapes.devs.ModelView;
Now you can set or change d attribute for the shape and ports anytime you wish.
var model = new joint.shapes.devs.GenericModel({
attrs: {
'.body': { d: 'M 0 0 0 50 50 50 z'},
'.port-body': { d: 'M 0 0 10 0 10 10 0 10 z'}
}
});
model.attr('.body/d', 'M 25 0 50 50 0 50 z');
JS Fiddle: http://jsfiddle.net/kumilingus/kge023bc/

Explorer 11 can't remove USE element

I'm use snapsvg library; Remove <use> element in IE11 doesn't work; How i can fix it?
c = Snap(400, 620);
c.rect(0, 0, 400, 620).attr({
fill : 'white',
stroke : 'black'
});
var pattern25x25;
var createDiodePattern = function () {
var p = c.group(),
selectedColor = "#ff6900",
fillColor = "#b7b7b7";
p.add(c.circle(12, 12, 30, 30).attr({fill: '#FFFFFF', stroke: '#FFFFFF', 'stroke-with': '1', opacity: '0.1'}));
p.add(c.rect(0, 0, 25, 25).attr({fill: fillColor, stroke: '#000000', 'stroke-with': '2'}));
p.add(c.rect(3, 5, 5, 2).attr({fill: '#FFDE00', stroke: '#000000', 'stroke-with': '1'}));
p.add(c.rect(16, 5, 5, 2).attr({fill: '#FFDE00', stroke: '#000000', 'stroke-with': '1'}));
p.add(c.circle(12, 12, 3, 3).attr({fill: '#FFFFFF', stroke: '#000000', 'stroke-with': '1'}));
pattern25x25 = p.toDefs();
};
createDiodePattern();
var items = [];
for(var i = 0; i< 10; i++){
var el = pattern25x25.use().attr({
x: i * 30,
y: i * 30
});
c.append(el);
items.push(el);
}
items.map(function(el){
el.click(function(){
el.remove();
});
})
Live Copy