Run HighCharts in RhoMobile (iPhone, iPad and Android)

I like HighCharts and used it for one of our project. I wanted to use HighCharts in Rhomobile mobile applications and thought I would give it a whirl.
You can find the sample I tried that would include

  • Stacked bar chart
  • Combination chart
  • Line time series chart
  • Pie chart

Before we jump in, HighCharts will work fine in Android OS 3+ and iPhone/iPad.
It won’t work in Android 2.x versions (as per my knowledge and also see

You can find the source code of the demo at

How to use:
1) You need to include the JavaScript file (highchart.js) in the head section of the web page.
2) In the Script tag in the Head tag of the web page or in a separate .js file, add the JavaScript code to initialize the chart. Note that the id of the div where you want to place the chart is given in the renderTo option below:

[source language=”javascript”]
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: ‘container’,
defaultSeriesType: ‘bar’
title: {
text: ‘Stacked bar chart’,
margin: 18
xAxis: {
categories: [‘Apples’, ‘Oranges’, ‘Pears’, ‘Grapes’, ‘Bananas’]
subtitle: {
text: ‘ HighCharts in Rhomobile – Demo 1
by Spritle Software
style: {
color: ‘#FF00FF’,
fontWeight: ‘bold’
yAxis: {
min: 0,
title: {
text: ‘Total fruit consumption’
legend: {
backgroundColor: ‘#FFFFFF’,
reversed: true
tooltip: {
formatter: function() {
return ”+ +’: ‘+ this.y +”;
plotOptions: {
series: {
stacking: ‘normal’
series: [{
name: ‘John’,
data: [3, 1, 2, 3, 2]
}, {
name: ‘Jane’,
data: [2, 2, 3, 2, 1]
}, {
name: ‘Joe’,
data: [2, 3, 1, 2, 3]



[source language=”javascript”]
//note the “id” is very important


Thanks and please share your comments.
Sample screenshots from Android simulator:

Sample screenshots from iPhone simulator:

Sample screenshots from iPad simulator:

Related Posts

Comments (1)

These charts look much better than jqplot on Rhomobile. Thanks for putting this up.


Leave a comment