Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add Highcharts on UIWebView in iOS?

I am totally new to HighCharts and I referred example http://blog.li-labs.com/developing-ios-apps-with-custom-charting/ and tried same, but on iPad simulator I am getting a blank screen.

I have referred questions on stack-overflow, but still it is not working. Can anyone tell where am I going wrong.

EDIT : Code in My HTML file :

 <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
$(function () {

        // Radialize the colors
        Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
            return {
                radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
                stops: [
                    [0, color],
                    [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                ]
            };
        });

        // Build the chart
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Browser market shares at a specific website, 2010'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                percentageDecimals: 1
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Browser share',
                data: [
                    ['Firefox',   45.0],
                    ['IE',       26.8],
                    {
                        name: 'Chrome',
                        y: 12.8,
                        sliced: true,
                        selected: true
                    },
                    ['Safari',    8.5],
                    ['Opera',     6.2],
                    ['Others',   0.7]
                ]
            }]
        });
    });


        </script>
    </head>
    <body>
<!--<script src="../../js/highcharts.js"></script>-->
<!--<script src="../../js/modules/exporting.js"></script>-->

<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript" src="exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    </body>
</html>

How to add and use the Javascript libraries in XCode

Here is a simple view of how I handle the code and data within XCode.

  1. Download the Javascript reporting package from your preferd chart site. In my case: http://www.highcharts.com/download

  2. Add or import the files into XCode resources. (I suggest creating a group called JS).

  3. When adding a resource to XCode it will generally be marked as being needed to be compiled. Ensure that the files are not listed as being “Compiled”. The easiest way is to simply drag the files from Targets -> Your Project Name -> Compiled Sources into Targets -> Your Project Name -> Copy Bundle Resources.

  4. Create a test html file or simply import one from your HighChart (or any other javascript chart library) examples folder. In my case I name it hcpie.html

  5. Ensure that any file references in the tags do not recurse or move into any folder (even if they are in one in your project). e.g.

RIGHT =

WRONG =

  1. Create a UIWebView within Interface Designer and link it to your view (in my case I named it chart1). e.g.

@interface FirstViewController : UIViewController { IBOutlet UIWebView *chart1; }

@end

  1. Simply reference the HTML example file when loading.

    • (void)viewDidLoad {

NSString *pathOfFile = [[NSBundle mainBundle] pathForResource:@”hcpie” ofType:@”html”]; NSString *htmlText = [NSString stringWithContentsOfFile:pathOfFile encoding:NSUTF8StringEncoding error:nil];

NSURL *baseURL = [NSURL fileURLWithPath:pathOfFile];

[chart1 loadHTMLString: htmlText baseURL:baseURL];

[super viewDidLoad];

}

like image 913
parilogic Avatar asked May 02 '13 07:05

parilogic


2 Answers

Steps:-

1) First just creat one html file and do the needful code or for trial can copy html code from examples that you get from package http://www.highcharts.com/download

2) Make sure that the scripts in html should have proper .js links for e.g:- <script src="http://code.highcharts.com/highcharts.js"></script>

or

if you want to give it locally you can write <script src="highcharts.js"></script> But make sure that the .js files are there in your application folder.

3) NSString *htmlFile = [[NSBundle mainBundle] pathForResource:@"graph" ofType:@"html"];
   NSString* htmlString = [NSString stringWithContentsOfFile:htmlFile encoding:NSUTF8StringEncoding error:nil];
   [obj loadHTMLString:htmlString baseURL:nil];  // Webview *obj;

Hope this help you. In my case its working.

like image 63
LittleIDev Avatar answered Nov 01 '22 11:11

LittleIDev


I tried the suggestions in this post and couldn't get the HighChart load.

The problem ended up being the "loadHTMLString" call. Passing nil for the baseURL was incorrect. Here's what worked for me - I needed to pass the actual baseURL:

NSString *htmlFile = [[NSBundle mainBundle] pathForResource:url ofType:@"html"];
NSString* htmlString = [NSString stringWithContentsOfFile:htmlFile encoding:NSUTF8StringEncoding error:nil];

NSURL *baseURL = [NSURL fileURLWithPath:htmlFile];

[webView loadHTMLString:htmlString baseURL:baseURL];
like image 36
DiscDev Avatar answered Nov 01 '22 12:11

DiscDev