Run HighCharts in RhoMobile (iPhone, iPad and Android)

February 17, 2012

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:
      

1 Comment. Leave new

Venkat Polisetti
April 30, 2012 6:04 PM

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

Venkat

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

%d bloggers like this: