JSFiddle - React, Tailwind, and code Playground
by alr3
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>
JavaScript
// http://jsfiddle.net/alr3/wvkL44hm/1/
$(function () {
var colors = Highcharts.getOptions().colors,
categories = ['Tech', 'People', 'How To Deliver', 'Product'],
data = [{
y: 20,
color: colors[4],
drilldown: {
name: 'Tech',
categories: ['Ruby on Rails', 'Javascript', 'Responsive CSS', 'C#', 'Others'],
data: [9, 4, 4, 2, 1],
color: colors[4]
}
}, {
y: 35,
color: colors[9],
drilldown: {
name: 'People',
categories: ['Inspiring', 'Team Design', 'Listening', 'Serving (Leadership)', 'Empathizing with Customers'],
data: [5, 5, 10, 10, 5],
}
}, {
y: 20,
color: colors[6],
drilldown: {
name: 'Process',
categories: [
'"Posture of We"',
'Working Software',
'Agile Manifesto'],
data: [7, 6, 7],
color: colors[6]
}
}, {
y: 25,
color: colors[7],
drilldown: {
name: 'Product',
categories: ['Lean Startup Principles', 'SEO', 'Inbound Marketing', 'Competitive Analysis', 'Roadmap Generation', 'User Experience Design'],
data: [5, 3, 4, 3, 5, 5],
color: colors[7]
}
}],
browserData = [],
versionsData = [],
i,
j,
dataLen = data.length,
drillDataLen,
brightness;
// Build the data arrays
for (i = 0; i < dataLen; i += 1) {
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
// add version data
drillDataLen = data[i].drilldown.data.length;
for (j = 0; j <...