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:

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: '<a href="http://www.spritle.com/"> HighCharts in Rhomobile - Demo 1 <br/> by Spritle Software </a>',
						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]
					}]
				});
				
				
			});
			

 //note the "id" is very important
 <div id="container" style="height: 80%;margin: 0 auto"></div>			

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

Sample screenshots from iPhone simulator:
            

Sample screenshots from iPad simulator:
      

Tags: android, highcharts, ipad, iPhone, rhodes, Ruby, Ruby on Rails
Unique Views: 1842 Total views: 2338
Follow responses at RSS 2.0. Leave a response | Trackback.

One Response to “Run HighCharts in RhoMobile (iPhone, iPad and Android)”

1. Venkat Polisetti says:

   April 30, 2012 at 6:04 PM

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

   Venkat