Render bar chart - highcharts

Question

I have the following data structure:
{
"origin": "category2",
"value": 30,
"key": "name1"
},
{
"origin": "category1",
"value": 18,
"key": "name2"
},
{
"origin": "category2",
"value": 15,
"key": "name3"
},
{
"origin": "category1",
"value": 11,
"key": "name4"
},
Now I'm looking for a way to draw this data as bar chart where the key is used as legend for the axis and the origin is used for the color of the bar and the chart legend, so I have a chart with 4 bars with 2 different colors and a chart legend that shows category1 and category2.
I wonder if there is better way then have 2 series looking like this:
{name: 'category1', data: [0,18,0,11]}
{name: 'category2', data: [30,0,15,0]}
and the categories:
['name1','name2','name3','name4' ]

Answer 1

Apart of your solution, you can use single serie and define color for point like:
series: [{
name: 'Year 1800',
data: [107, 31, {
y: 635,
color: 'red'
}, {
y: 635,
color: 'red'
}]
}]
http://jsfiddle.net/RBSpe/

Answer 2

Other option is to manage each bar as unique and have more control over each bar configuration.
Template.body.helpers({
createChart: function () {
// Prepare some data:
category1= [{
y: 18,
name: "category1"
}],
category2 = [{
y: 30,
name: "category2"
}],
category3 = [{
y: 40,
name: "category3"
}],
category4 = [{
y: 5,
name: "category4"
}];
// Use Meteor.defer() to create chart after DOM is ready:
Meteor.defer(function() {
// Create standard Highcharts chart with options:
Highcharts.chart('Charts', {
chart: {
renderTo: 'container',
type: 'column',
},
series: [{
type: 'column',
margin: 75,
data: category1,
name: "category1Name",
color: '#FF6600'
}, {
type: 'column',
margin: 75,
data: category2,
name: "category2Name",
color: '#FF6600'
}, {
type: 'column',
margin: 75,
data: category3,
name: "category3Name",
color: '#ffff00'
}, {
type: 'column',
margin: 75,
data: category4,
name: "category4Name",
color: '#ffff00'
}]
});
});