Graph for android and iOS with multi colour area plotting line graph

I need a line/area graph with multi colour as like the picture below. is there any graph library or something? I need it both android and iOS.

Here is the sample image of graph

enter image description here

or is there any simple lib, which I can edit and modify to this ???

2 answers

  • answered 2018-04-17 05:53 Zilan Pattni

    you can use highcharts.com demo for create custom charts with lots of styles,

    1). select any demo you want to add in your chart

    2). click on EDIT IN JSFIDDLE button

    then the online editor opens and on that page you have 2 editors one is HTML and one is JavaScript editor

    copy both the data and arrange in HTML Format and put your dynamic string converted data between it and print it on webView in android

    [Note: you compulsory have the internet connection, and also use WebView to load the HTML data]

    Example:

    Link which i Edit the example

    http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/line-log-axis/

    Android Studio Code

    webView = (WebView) view.findViewById(R.id.webView);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.loadData(getHtmlUrl(), "text/html", "UTF-8");
    

    function getHtmlUrl()

    public String getHtmlUrl() {
            htmlUrl = "<html>" +
                    "<head>" +
                    "<script src=\"https://code.highcharts.com/highcharts.js\"></script>" +
                    "<script src=\"https://code.highcharts.com/modules/exporting.js\"></script>" +
                    "<script src=\"https://code.highcharts.com/modules/export-data.js\"></script>" +
                    "" +
                    "<div id=\"container\" style=\"min-width: 310px; height: 400px; margin: 0 auto\"></div>" +
                    "</head>" +
                    "<body>" +
                    "Highcharts.chart('container', {" +
                    "" +
                    "    title: {" +
                    "        text: 'Logarithmic axis demo'" +
                    "    }," +
                    "" +
                    "    xAxis: {" +
                    "        tickInterval: 1" +
                    "    }," +
                    "" +
                    "    yAxis: {" +
                    "        type: 'logarithmic'," +
                    "        minorTickInterval: 0.1" +
                    "    }," +
                    "" +
                    "    tooltip: {" +
                    "        headerFormat: '<b>{series.name}</b><br />'," +
                    "        pointFormat: 'x = {point.x}, y = {point.y}'" +
                    "    }," +
                    "" +
                    "    series: [{" +
                    "        data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512]," +
                    "        pointStart: 1" +
                    "    }]" +
                    "});" +
                    "</body>" +
                    "</html>";
            Log.d("htmlUrl", htmlUrl);
            return htmlUrl;
        }
    

    [Note: This Example is Just for android, you can use same for IOS too.]

  • answered 2018-04-17 05:53 Shivam Tripathi

    U can use HighCharts. Its a very useful library currently used by these industry gaints companies using HighCharts. Moreover its SDK's are available for both android and iOS. U can find useful references below :

    Highcharts android sdk

    Highcharts android code sample

    Highcharts iOS sdk

    Highcharts iOS code samples