Meteor Wrapper for HighCharts, HighMaps with a helper
Add to your Meteor app
meteor add maazalik:highcharts
Instructions for HighCharts
The plugin comes with a helper that can be used to quickly generate charts
// myTempmlate.html
{{> highchartsHelper chartId="test" chartWidth="100%" charHeight="100%" chartObject=topGenresChart}}
The chartObject basically takes the object that you would normally define using highCharts, example below:
// myTemplate.js
Template.myTemplate.topGenresChart = function() {
return {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: this.username + "'s top genres"
},
tooltip: {
pointFormat: '<b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
},
connectorColor: 'silver'
}
}
},
series: [{
type: 'pie',
name: 'genre',
data: [
['Adventure', 45.0],
['Action', 26.8],
['Ecchi', 12.8],
['Comedy', 8.5],
['Yuri', 6.2]
]
}]
};
};
Instructions for HighMaps
The plugin comes with a helper that can be used to quickly generate charts
// myTempmlate.html
{{> highmapsHelper chartId="test-map" chartWidth="100%" charHeight="100%" chartObject=mapConfig}}
The chartObject basically takes the object that you would normally define using HighMaps, example below:
// myTemplate.js
Template.myTemplate.mapConfig = function() {
var mapData = Highcharts.geojson(Highcharts.maps['custom/world']);
$.each(mapData, function () {
this.id = this.properties['hc-key'];
});
return {
title : {
text : 'My highmap'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
type: 'logarithmic',
endOnTick: false,
startOnTick: false,
min: 50000
},
series : [{
data : [{
code3: 'BR',
name: 'Brazil',
value: 2500000
}, {
code3: 'ES',
name: 'Spain',
value: 10000
}, {
code3: 'US',
name: 'United States',
value: 300000
}],
mapData: mapData,
joinBy: ['iso-a2', 'code3'],
name: 'Some text here',
allowPointSelect: true,
cursor: 'pointer',
states: {
select: {
color: '#a4edba',
borderColor: 'black',
dashStyle: 'shortdot'
}
}
}]
};
};
More charts
- Solid Gauges
- 3D Charts
- Drilldowns
- more to come ...
Examples
A set of running examples can be found here and the source can be found here.
License (Highcharts)
Highcharts is free for personal and non-profit projects. For other purposes click here.
Compatible with Meteor V0.9 and above!