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 http://www.highcharts.com/documentation/compatibility)

You can find the source code of the demo at https://github.com/spritle/rhodes_highcharts_demo

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.series.name +’: ‘+ 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]

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

[/source]

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.

Venkat

Leave a comment