(function() {
var idCounter = 0,
base = Highcharts.Renderer.prototype.color;
Highcharts.Renderer.prototype.color = function(color, elem, prop) {
if (color && color.pattern && prop === 'fill') {
<%-- SVG renderer--%>
if (this.box.tagName == 'svg') {
var id = 'highcharts-pattern-'+ idCounter++;
var pattern = this.createElement('pattern')
.attr({
id: id,
patternUnits: 'userSpaceOnUse',
width: color.width,
height: color.width
})
.add(this.defs),
image = this.image(
color.pattern, 0, 0, 6, 6
)
.add(pattern);
return 'url(' + this.url + '#' + id + ')';
<%--VML renderer--%>
} else {
var markup = ['<', prop, ' type="tile" src="', color.pattern, '" />'];
elem.appendChild(
document.createElement(this.prepVML(markup))
);
}
} else {
return base.apply(this, arguments);
}
};
})();
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link href="piechart.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="highcharts.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function () {
// Build the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
color: {
pattern: 'taxability_bottom.png',
width: 6,
height: 6
}
},
{
name: 'bow',
y: 20,
sliced: true,
selected: true,
color: 'red'
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
});
(function() {
var idCounter = 0,
base = Highcharts.Renderer.prototype.color;
Highcharts.Renderer.prototype.color = function(color, elem, prop) {
if (color && color.pattern && prop === 'fill') {
if (this.box.tagName == 'svg') {
var id = 'highcharts-pattern-'+ idCounter++;
var pattern = this.createElement('pattern')
.attr({
id: id,
patternUnits: 'userSpaceOnUse',
width: color.width,
height: color.width
})
.add(this.defs),
image = this.image(
color.pattern, 0, 0, 6, 6
)
.add(pattern);
return 'url(' + this.url + '#' + id + ')';
} else {
var markup = ['<', prop, ' type="tile" src="', color.pattern, '" />'];
elem.appendChild(
document.createElement(this.prepVML(markup))
);
}
} else {
return base.apply(this, arguments);
}
};
})();
</script>
</head>
<body>
<div class="accounts_tab">
<img src="taxability_bottom.png" alt="">
<div id="container" ></div>
</div>
</body>
</html>
