Skip to content

Instantly share code, notes, and snippets.

@paul-delange

paul-delange/HighChartViewController.h

Created March 27, 2013 11:03
Show Gist options
  • Save paul-delange/5253394 to your computer and use it in GitHub Desktop.
Save paul-delange/5253394 to your computer and use it in GitHub Desktop.
Download ZIP
Highcharts running in a UIWebView for iOS
Raw
HighChartViewController.h
#import <UIKit/UIKit.h>
@interface HighChartViewController : UIViewController
@property (weak, nonatomic) IBOutlet UIWebView *webView;
@property (strong, nonatomic) NSArray* seriesArray;
@property (copy, nonatomic) NSString* optionFileName;
@end
Raw
HighChartViewController.m
#import "HighChartViewController.h"
#define EMPTY_WEB_VIEW @"<!DOCTYPE html> \
<html> \
<head> \
</head> \
<body> \
<div id=\"container\" style=\"width:%fpx;height:%fpx;position:absolute;left:50%%;top:50%%;margin-left:-%fpx;margin-top:-%fpx;\"> \
</div> \
</body> \
</html>"
@interface HighChartViewController () <UIWebViewDelegate>
@end
@implementation HighChartViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
}
- (void) viewWillLayoutSubviews {
[super viewWillLayoutSubviews];
if( self.seriesArray && self.optionFileName ) {
NSString* format = EMPTY_WEB_VIEW;
NSString* html = [NSString stringWithFormat: format,
CGRectGetWidth(self.webView.frame),
CGRectGetHeight(self.webView.frame),
CGRectGetWidth(self.webView.frame)/2.f,
CGRectGetHeight(self.webView.frame)/2.f];
[self.webView loadHTMLString: html baseURL: nil];
}
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
#pragma mark - UIWebViewDelegate
- (void) webViewDidFinishLoad:(UIWebView *)webView {
NSParameterAssert(self.optionFileName);
NSParameterAssert(self.seriesArray);
__autoreleasing NSError* error = nil;
//Load jQuery
NSString* jQueryPath = [[NSBundle mainBundle] pathForResource: @"jquery-1.9.1.min" ofType: @"js"];
NSString* jQuery = [NSString stringWithContentsOfFile: jQueryPath encoding: NSUTF8StringEncoding error: &error];
NSAssert(!error, @"Error loading jQuery: %@", error);
[webView stringByEvaluatingJavaScriptFromString: jQuery];
//Load HighChart
NSString* highChartPath = [[NSBundle mainBundle] pathForResource: @"highcharts" ofType: @"js"];
NSString* highChart = [NSString stringWithContentsOfFile: highChartPath encoding: NSUTF8StringEncoding error: &error];
NSAssert(!error, @"Error loading highchart: %@", error);
[webView stringByEvaluatingJavaScriptFromString: highChart];
//Load theme
NSString* themePath = [[NSBundle mainBundle] pathForResource: @"theme" ofType: @"js"];
NSString* theme = [NSString stringWithContentsOfFile: themePath encoding: NSUTF8StringEncoding error: &error];
NSAssert(!error, @"Error loading theme: %@", error);
//Load this graph object
NSString* optionPath = [[NSBundle mainBundle] pathForResource: self.optionFileName ofType: nil];
NSString* format = [NSString stringWithContentsOfFile: optionPath encoding: NSUTF8StringEncoding error: &error];
NSData* json = [NSJSONSerialization dataWithJSONObject: self.seriesArray options: 0 error: &error];
NSAssert(!error, @"Error creating JSON string from %@", self.seriesArray);
NSString* graph = [theme stringByAppendingFormat: format, [[NSString alloc] initWithData: json encoding: NSUTF8StringEncoding]];
NSAssert(!error, @"Error loading progress javascript: %@", error);
[webView stringByEvaluatingJavaScriptFromString: graph];
}
@end
Raw
progress.js
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
credits : {
enabled : false
},
title : {
text : null
},
xAxis : {
categories : [],
labels : {
enabled : false
},
lineWidth : 0,
tickWidth : 0,
gridLineWidth : 0,
minorGridLineWidth : 0
},
yAxis : {
min : 0,
max : 100,
maxPadding : 0.1,
opposite : true,
labels : {
step : 10,
formatter : function() {
return this.value + '%';
}
},
lineWidth : 0,
tickWidth : 0,
gridLineWidth : 0,
minorGridLineWidth : 0,
title : {
text : null
}
},
legend : {
enabled : false
},
tooltip : {
enabled: false
},
plotOptions : {
series : {
stacking : 'normal'
},
bar : {
shadow : false,
pointPadding : 0
}
},
series : %@
});
});
Raw
theme.js
Highcharts.theme = {
colors : ['#da3c0c', '#f0aa02', '#099d33', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
chart : {
backgroundColor : '#f7f7f7',
borderWidth : 0,
plotBackgroundColor : '#f7f7f7',
plotShadow : false,
plotBorderWidth : 1
},
title : {
style : {
color : '#000',
font : 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
subtitle : {
style : {
color : '#666666',
font : 'bold 12px "Trebuchet MS", Verdana, sans-serif'
}
},
xAxis : {
gridLineWidth : 1,
lineColor : '#000',
tickColor : '#000',
labels : {
style : {
color : '#000',
font : '11px Trebuchet MS, Verdana, sans-serif'
}
},
title : {
style : {
color : '#333',
fontWeight : 'bold',
fontSize : '12px',
fontFamily : 'Trebuchet MS, Verdana, sans-serif'
}
}
},
yAxis : {
minorTickInterval : 'auto',
lineColor : '#000',
lineWidth : 1,
tickWidth : 1,
tickColor : '#000',
labels : {
style : {
color : '#000',
font : '11px Trebuchet MS, Verdana, sans-serif'
}
},
title : {
style : {
color : '#333',
fontWeight : 'bold',
fontSize : '12px',
fontFamily : 'Trebuchet MS, Verdana, sans-serif'
}
}
},
legend : {
itemStyle : {
font : '9pt Trebuchet MS, Verdana, sans-serif',
color : 'black'
},
itemHoverStyle : {
color : '#039'
},
itemHiddenStyle : {
color : 'gray'
}
},
labels : {
style : {
color : '#99b'
}
}
};
// Apply the theme
Highcharts.setOptions(Highcharts.theme);
@itrunks
Copy link

itrunks commented Sep 30, 2014

what is seriesArray and optionFileName and where i get this. what i replace of those variables.
advance thanks

@vijayavijaiR
Copy link

what is seriesArray and optionFileName and where i get this. what i replace of those variables.
advance thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment