{"id":15832,"date":"2017-02-17T12:47:40","date_gmt":"2017-02-17T07:17:40","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=15832"},"modified":"2026-01-20T14:41:52","modified_gmt":"2026-01-20T09:11:52","slug":"rendering-fusioncharts-android-application","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/","title":{"rendered":"Rendering FusionCharts in an Android Application 2026"},"content":{"rendered":"<p><strong>Google&#8217;s Android<\/strong> is a Linux-based mobile operating system primarily designed for smartphones and tablets. Since its debut in 2007, it has been the best-selling operating system for tablets and smartphones. Furthermore, Android gives you access to a plethora of useful libraries and tools that can be used to create rich applications.<\/p>\n<p>In this post, we&#8217;ll walk through the process of integrating FusionCharts into an Android-native app. FusionCharts is available for web and mobile projects, making it simple to create stunning dashboards and <a href=\"https:\/\/www.fusioncharts.com\/fusioncharts\">Data Charts<\/a> for your Android app. Because of its extensive documentation, cross-browser support, and consistent API, it is now easier than ever to add interactive graphs and responsive charts to your website. Without further ado, let&#8217;s get started with the tutorial!<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_71 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#Core_Requirements\" title=\"Core Requirements\">Core Requirements<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#Embedding_FusionCharts_and_Creating_Charts_in_an_Android_App\" title=\"Embedding FusionCharts and Creating Charts in an Android App\">Embedding FusionCharts and Creating Charts in an Android App<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#Step_1\" title=\"Step 1\">Step 1<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#Step_2\" title=\"Step 2\">Step 2<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#Step_3\" title=\"Step 3\">Step 3<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#Step_4\" title=\"Step 4\">Step 4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#Step_5\" title=\"Step 5\">Step 5<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#Step_6\" title=\"Step 6\">Step 6<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#Step_7\" title=\"Step 7\">Step 7<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#Step_8\" title=\"Step 8\">Step 8<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#Step_9\" title=\"Step 9\">Step 9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#Step_10\" title=\"Step 10\">Step 10<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#Building_Your_Own_apk_File\" title=\"Building Your Own .apk File\">Building Your Own .apk File<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Core_Requirements\"><\/span>Core Requirements<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before we start with the steps on embedding FusionCharts in an Android app, we need to make sure that we have the following components downloaded and installed on our local machine:<\/p>\n<ul>\n<li>FusionCharts Suite XT [<a href=\"https:\/\/www.fusioncharts.com\/download\/\" target=\"_blank\" rel=\"noopener noreferrer\">Download Link<\/a>]<\/li>\n<li>Android Studio [<a href=\"https:\/\/developer.android.com\/studio\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">Download Link<\/a>]<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Embedding_FusionCharts_and_Creating_Charts_in_an_Android_App\"><\/span>Embedding FusionCharts and Creating Charts in an Android App<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>For a demonstration, we will embed FusionCharts in an Android app and create the following three types of charts:<\/p>\n<ul>\n<li>Column 2D chart, to showcase the quarterly revenue at Harry\u2019s SuperMart<\/li>\n<li>Pie 2D chart, to showcase the number of visitors for different age groups for one year<\/li>\n<li>Drill-down chart, to showcase the top 3 juice flavors for one year<\/li>\n<\/ul>\n<p>Follow the steps given below to embed FusionCharts and create charts in an Android app:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_1\"><\/span>Step 1<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>Launch Android Studio. The <b>Create New Project<\/b> window is displayed.<\/li>\n<li>Create a new project and name it FusionCharts as shown in the image below.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/create-new-project.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15833\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/create-new-project.png\" alt=\"create-new-project\" width=\"620\" height=\"430\" align=\"middle\" srcset=\"\/blog\/wp-content\/uploads\/2017\/02\/create-new-project.png 620w, \/blog\/wp-content\/uploads\/2017\/02\/create-new-project-150x104.png 150w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_2\"><\/span>Step 2<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>Select the target device from the list of form factors mentioned and the minimum SDK required for your application, as shown in the image below:<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/select-android-devices.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15838\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/select-android-devices.png\" alt=\"select-android-devices\" width=\"620\" height=\"421\" align=\"middle\" srcset=\"\/blog\/wp-content\/uploads\/2017\/02\/select-android-devices.png 620w, \/blog\/wp-content\/uploads\/2017\/02\/select-android-devices-150x102.png 150w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_3\"><\/span>Step 3<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>Create an activity for the mobile. The <b>Activity<\/b> class is a code block that supports the screen and the UI. For our project, we will select <b>Empty Activity<\/b>, as shown in the image below:<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/add-an-activity.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15839\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/add-an-activity.png\" alt=\"add-an-activity\" width=\"620\" height=\"423\" align=\"middle\" srcset=\"\/blog\/wp-content\/uploads\/2017\/02\/add-an-activity.png 620w, \/blog\/wp-content\/uploads\/2017\/02\/add-an-activity-150x102.png 150w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<ul>\n<li>When the activity is selected, click <b>Next<\/b>.<\/li>\n<li>Click <b>Finish<\/b>.<\/li>\n<\/ul>\n<p>The image below shows the project structure created so far:<\/p>\n<p><a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/android-project-structure.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15840\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/android-project-structure.png\" alt=\"android-project-structure\" width=\"320\" height=\"286\" align=\"middle\" srcset=\"\/blog\/wp-content\/uploads\/2017\/02\/android-project-structure.png 320w, \/blog\/wp-content\/uploads\/2017\/02\/android-project-structure-150x134.png 150w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_4\"><\/span>Step 4<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>From the <b>res<\/b> folder, select the <b>layout<\/b> folder, and open the <b>activity_main.xml<\/b> file.<\/li>\n<li>Copy the code given below, for setting the layout of the application, and paste it in the <b>activity_main.xml<\/b> file.<\/li>\n<\/ul>\n<pre class=\"lang:markup\">&lt; ?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n\r\n&lt;linearlayout xmlns:android=\"https:\/\/schemas.android.com\/apk\/res\/android\"\r\n   xmlns:tools=\"https:\/\/schemas.android.com\/tools\"\r\n   android:id=\"@+id\/activity_main\"\r\n   android:layout_width=\"match_parent\"\r\n   android:layout_height=\"match_parent\"\r\n   android:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\n   android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\n   android:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\n   android:paddingTop=\"@dimen\/activity_vertical_margin\"\r\n   tools:context=\"com.fusioncharts.app.fusiondemo.MainActivity\"\r\n   android:orientation=\"vertical\"\r\n   android:baselineAligned=\"false\"&gt;\r\n\r\n   &lt;tablerow android:layout_width=\"350dp\"\r\n       android:layout_height=\"wrap_content\"\r\n       android:orientation=\"horizontal\"&gt;\r\n       &lt;button android:text=\"Column\"\r\n           android:layout_width=\"wrap_content\"\r\n           android:layout_height=\"wrap_content\"\r\n           android:id=\"@+id\/button_column\"\r\n           android:layout_gravity=\"left\"\r\n           android:onClick=\"showcolumn\"&gt;&lt;\/button&gt;\r\n\r\n       &lt;button android:text=\"Pie\"\r\n           android:layout_width=\"wrap_content\"\r\n           android:layout_height=\"wrap_content\"\r\n           android:id=\"@+id\/button_pie\"\r\n           android:onClick=\"showpie\"&gt;&lt;\/button&gt;\r\n\r\n       &lt;button android:text=\"Drilldown\"\r\n           android:layout_width=\"wrap_content\"\r\n           android:layout_height=\"wrap_content\"\r\n           android:id=\"@+id\/button_drilldown\"\r\n           android:layout_gravity=\"right\"\r\n           android:onClick=\"showdrilldown\"&gt;&lt;\/button&gt;\r\n   &lt;\/tablerow&gt;\r\n   &lt;webview android:layout_width=\"match_parent\"\r\n       android:layout_height=\"match_parent\"\r\n       android:id=\"@+id\/webView\"&gt;&lt;\/webview&gt;\r\n&lt;\/linearlayout&gt;<\/pre>\n<p>The image below shows the layout of the application created when the above code is executed. This layout can be further customized as required.<\/p>\n<p><a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/layout.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15841\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/layout.png\" alt=\"layout\" width=\"500\" height=\"447\" align=\"middle\" srcset=\"\/blog\/wp-content\/uploads\/2017\/02\/layout.png 500w, \/blog\/wp-content\/uploads\/2017\/02\/layout-150x134.png 150w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_5\"><\/span>Step 5<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>From the <b>java<\/b> folder, select the <b>com.fusioncharts.app.demo<\/b> folder, and open the <b>MainActivity.java<\/b> file.<\/li>\n<li>Copy the following code in the <b>MainActivity.java<\/b> file.<\/li>\n<\/ul>\n<pre class=\"lang:java\">package com.fusioncharts.app.fusiondemo;\r\n\r\nimport android.app.Activity;\r\nimport android.os.Bundle;\r\nimport android.view.View;\r\nimport android.webkit.WebChromeClient;\r\nimport android.webkit.WebView;\r\nimport android.widget.EditText;\r\nimport android.widget.TextView;\r\n\r\npublic class MainActivity extends Activity {\r\n\r\n   @Override\r\n   protected void onCreate(Bundle savedInstanceState) {\r\n       super.onCreate(savedInstanceState);\r\n       setContentView(R.layout.activity_main);\r\n   }\r\n   public void showcolumn(View a) {\r\n       if (a.getId() == R.id.button_column) {\r\n           WebView webView= (WebView)findViewById(R.id.webView);\r\n           webView.getSettings().setJavaScriptEnabled(true);\r\n           webView.setWebChromeClient(new WebChromeClient());\r\n           webView.loadUrl(\"file:\/\/\/android_asset\/index.html\");\r\n       }\r\n   }\r\n   public void showpie(View a) {\r\n       if (a.getId() == R.id.button_pie) {\r\n           WebView webView= (WebView)findViewById(R.id.webView);\r\n           webView.getSettings().setJavaScriptEnabled(true);\r\n           webView.setWebChromeClient(new WebChromeClient());\r\n           webView.loadUrl(\"file:\/\/\/android_asset\/pie.html\");\r\n       }\r\n   }\r\n   public void showdrilldown(View a) {\r\n       if (a.getId() == R.id.button_drilldown) {\r\n           WebView webView= (WebView)findViewById(R.id.webView);\r\n           webView.getSettings().setJavaScriptEnabled(true);\r\n           webView.setWebChromeClient(new WebChromeClient());\r\n           webView.loadUrl(\"file:\/\/\/android_asset\/drilldown.html\");\r\n       }\r\n   }\r\n}<\/pre>\n<p>After adding the above code in the <b>MainActivity.java<\/b> file, you&#8217;ll notice that each button-click loads an HTML page inside the webview.<\/p>\n<p>The subsequent steps talk about how these HTML pages are included.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_6\"><\/span>Step 6<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>From the <b>app<\/b> folder, select <b>New &gt; Folder &gt; Assets<\/b> Folder, as shown in the image below:<\/p>\n<p><a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/create-assets-folder.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15844\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/create-assets-folder.png\" alt=\"create-assets-folder\" width=\"620\" height=\"505\" align=\"middle\" srcset=\"\/blog\/wp-content\/uploads\/2017\/02\/create-assets-folder.png 620w, \/blog\/wp-content\/uploads\/2017\/02\/create-assets-folder-150x122.png 150w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<p>The <b>New Android Component<\/b> window opens.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_7\"><\/span>Step 7<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>Select the target Source for your <b>Assets<\/b> Folder, as shown in the image below:<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/configure-component.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15846\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/configure-component.png\" alt=\"configure-component\" width=\"620\" height=\"514\" align=\"middle\" srcset=\"\/blog\/wp-content\/uploads\/2017\/02\/configure-component.png 620w, \/blog\/wp-content\/uploads\/2017\/02\/configure-component-150x124.png 150w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<ul>\n<li>Click Finish<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Step_8\"><\/span>Step 8<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>The <b>Copy<\/b> window will appear. Insert the <b>FusionCharts<\/b> library files in the <b>Assets<\/b> folder. The image below shows the <b>fusioncharts.js<\/b> file will be copied into the Assets folder.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/copy-window.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15847\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/copy-window.png\" alt=\"copy-window\" width=\"500\" height=\"206\" align=\"middle\" srcset=\"\/blog\/wp-content\/uploads\/2017\/02\/copy-window.png 500w, \/blog\/wp-content\/uploads\/2017\/02\/copy-window-150x62.png 150w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<ul>\n<li>Include all the other library files in the same way.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Step_9\"><\/span>Step 9<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>Create HTML files for each chart type to be rendered.<\/li>\n<li>In the case of the <b>column 2D chart<\/b>, copy the following code into the HTML file and save it in the <b>assets<\/b> folder.<\/li>\n<\/ul>\n<pre class=\"lang:markup\">&lt;html&gt;\r\n&lt;head&gt;\r\n\t&lt;title&gt;My first chart using FusionCharts Suite XT&lt;\/title&gt;\r\n\t&lt;script type=\"text\/javascript\" src=\"fusioncharts.js\"&gt;&lt;\/script&gt;\r\n\t&lt;script type=\"text\/javascript\" src=\"fusioncharts.charts.js\"&gt;&lt;\/script&gt;\r\n\t&lt;script type=\"text\/javascript\" src=\"fusioncharts.theme.fint.js\"&gt;&lt;\/script&gt;\r\n\t&lt;script type=\"text\/javascript\"&gt;\r\n\tFusionCharts.ready(function(){\r\n    var revenueChart = new FusionCharts({\r\n        \"type\": \"column2d\",\r\n        \"renderAt\": \"chartContainer\",\r\n        \"width\": \"260\",\r\n        \"height\": \"300\",\r\n        \"dataFormat\": \"json\",\r\n        \"dataSource\": {\r\n            \"chart\": {\r\n                \"caption\": \"Quarterly revenue for last year\",\r\n                \"subCaption\": \"Harry's SuperMart\",\r\n                \"palettecolors\": \"#2874A6\",\r\n                \"useplotgradientcolor\": \"0\",\r\n                \"yAxisName\": \"Revenues (In USD)\",\r\n                \"theme\": \"fint\",\r\n                \"showvalues\": \"0\",\r\n                \"yaxismaxvalue\": \"40000\",\r\n                \"yaxisminvalue\": \"0\"\r\n            },\r\n            \"data\": [{\r\n                    \"label\": \"Q1\",\r\n                    \"value\": \"16000\"\r\n                },\r\n                {\r\n                    \"label\": \"Q2\",\r\n                    \"value\": \"25300\"\r\n                },\r\n                {\r\n                    \"label\": \"Q3\",\r\n                    \"value\": \"10140\"\r\n                },\r\n                {\r\n                    \"label\": \"Q4\",\r\n                    \"value\": \"19140\"\r\n                }\r\n            ]\r\n        }\r\n    });\r\n    revenueChart.render();\r\n\t})\r\n\t&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;div id=\"chartContainer\"&gt;FusionCharts XT will load here!&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<ul>\n<li>For the <b>pie 2D chart<\/b>, copy the following code into the HTML file and save it in the <b>assets<\/b> folder.<\/li>\n<\/ul>\n<pre class=\"lang:markup\">&lt;html&gt;\r\n&lt;head&gt;\r\n\t&lt;title&gt;My first chart using FusionCharts Suite XT&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\t&lt;div id=\"chartContainer\"&gt;FusionCharts XT will load here!&lt;\/div&gt;\r\n\t&lt;script src=\"fusioncharts.js\"&gt;&lt;\/script&gt;\r\n\t&lt;script src=\"fusioncharts.charts.js\"&gt;&lt;\/script&gt;\r\n\t&lt;script type=\"text\/javascript\"&gt;\r\n\tFusionCharts.ready(function(){\r\n    var ageGroupChart = new FusionCharts({\r\n        type: 'pie2d',\r\n        renderAt: 'chartContainer',\r\n        width: '270',\r\n        height: '290',\r\n        dataFormat: 'json',\r\n        dataSource: {\r\n            \"chart\": {\r\n                \"caption\": \"Split of Visitors by Age Group\",\r\n                \"subCaption\": \"Last year\",\r\n                \"paletteColors\": \"#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000\",\r\n                \"bgColor\": \"#ffffff\",\r\n                \"showBorder\": \"0\",\r\n                \"use3DLighting\": \"0\",\r\n                \"showShadow\": \"0\",\r\n                \"pieradius\": \"40\",\r\n                \"enableSmartLabels\": \"1\",\r\n                \"startingAngle\": \"0\",\r\n                \"showPercentValues\": \"1\",\r\n                \"showPercentInTooltip\": \"0\",\r\n                \"decimals\": \"1\",\r\n                \"captionFontSize\": \"14\",\r\n                \"subcaptionFontSize\": \"14\",\r\n                \"subcaptionFontBold\": \"0\",\r\n                \"toolTipColor\": \"#ffffff\",\r\n                \"toolTipBorderThickness\": \"0\",\r\n                \"toolTipBgColor\": \"#000000\",\r\n                \"toolTipBgAlpha\": \"80\",\r\n                \"toolTipBorderRadius\": \"2\",\r\n                \"toolTipPadding\": \"5\",\r\n                \"showHoverEffect\": \"1\",\r\n                \"showLegend\": \"1\",\r\n                \"legendBgColor\": \"#ffffff\",\r\n                \"legendBorderAlpha\": '0',\r\n                \"legendShadow\": '0',\r\n                \"legendItemFontSize\": '10',\r\n                \"legendItemFontColor\": '#666666'\r\n            },\r\n            \"data\": [{\r\n                    \"label\": \"Teenage\",\r\n                    \"value\": \"1250400\"\r\n                },\r\n                {\r\n                    \"label\": \"Adult\",\r\n                    \"value\": \"1463300\"\r\n                },\r\n                {\r\n                    \"label\": \"Mid-age\",\r\n                    \"value\": \"1050700\"\r\n                },\r\n                {\r\n                    \"label\": \"Senior\",\r\n                    \"value\": \"491000\"\r\n                }\r\n            ]\r\n        }\r\n    }).render();\r\n});\r\n\t&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<ul>\n<li>For the <b>drill-down chart<\/b>, copy the following code into the HTML file and save it in the <b>assets<\/b> folder.<\/li>\n<\/ul>\n<pre class=\"lang:markup\">&lt;html&gt;\r\n&lt;head&gt;\r\n\t &lt;title&gt;My first chart using FusionCharts Suite XT&lt;\/title&gt;\r\n\t &lt;script type=\"text\/javascript\" src=\"fusioncharts.js\"&gt;&lt;\/script&gt;\r\n\t &lt;script type=\"text\/javascript\" src=\"fusioncharts.charts.js\"&gt;&lt;\/script&gt;\r\n\t &lt;script type=\"text\/javascript\"&gt;\r\nFusionCharts.ready(function() {\r\n    var salesChart = new FusionCharts({\r\n        type: 'column2d',\r\n        renderAt: 'chartContainer',\r\n        width: '260',\r\n        height: '290',\r\n        dataFormat: 'json',\r\n        dataSource: {\r\n            \"chart\": {\r\n                \"caption\": \"Top 3 Juice Flavors\",\r\n                \"subcaption\": \"Last year\",\r\n                \"xaxisname\": \"Flavor\",\r\n                \"yaxisname\": \"Amount (In USD)\",\r\n                \"numberprefix\": \"$\",\r\n                \"palettecolors\": \"#008ee4\",\r\n                \"canvasbgalpha\": \"0\",\r\n                \"canvasborderalpha\": \"0\",\r\n                \"useplotgradientcolor\": \"0\",\r\n                \"showplotborder\": \"0\",\r\n                \"placevaluesinside\": \"1\",\r\n                \"valuefontcolor\": \"#ffffff\",\r\n                \"captionpadding\": \"20\",\r\n                \"showaxislines\": \"1\",\r\n                \"axislinealpha\": \"20\",\r\n                \"divlinealpha\": \"20\",\r\n                \"showborder\": \"1\",\r\n                \"bgalpha\": \"0\",\r\n                \"animation\": \"0\"\r\n            },\r\n            \"data\": [{\r\n                \"label\": \"Apple\",\r\n                \"value\": \"810000\",\r\n                \"link\": \"newchart-xml-apple\"\r\n            }, {\r\n                \"label\": \"Cranberry\",\r\n                \"value\": \"620000\",\r\n                \"link\": \"newchart-xml-cranberry\"\r\n            }, {\r\n                \"label\": \"Grapes\",\r\n                \"value\": \"350000\",\r\n                \"link\": \"newchart-xml-grapes\"\r\n            }],\r\n            \"linkeddata\": [{\r\n                \"id\": \"apple\",\r\n                \"linkedchart\": {\r\n                    \"chart\": {\r\n                        \"caption\": \"Apple Juice - Quarterly Sales\",\r\n                        \"subcaption\": \"Last year\",\r\n                        \"xaxisname\": \"Quarter\",\r\n                        \"yaxisname\": \"Amount (In USD)\",\r\n                        \"numberprefix\": \"$\",\r\n                        \"palettecolors\": \"#008ee4\",\r\n                        \"canvasbgalpha\": \"0\",\r\n                        \"canvasborderalpha\": \"0\",\r\n                        \"useplotgradientcolor\": \"0\",\r\n                        \"showplotborder\": \"0\",\r\n                        \"placevaluesinside\": \"1\",\r\n                        \"valuefontcolor\": \"#ffffff\",\r\n                        \"captionpadding\": \"20\",\r\n                        \"showaxislines\": \"1\",\r\n                        \"axislinealpha\": \"20\",\r\n                        \"divlinealpha\": \"20\",\r\n                        \"showborder\": \"1\",\r\n                        \"bgalpha\": \"0\",\r\n                        \"animation\": \"0\"\r\n                    },\r\n                    \"data\": [{\r\n                        \"label\": \"Q1\",\r\n                        \"value\": \"157000\"\r\n                    }, {\r\n                        \"label\": \"Q2\",\r\n                        \"value\": \"172000\"\r\n                    }, {\r\n                        \"label\": \"Q3\",\r\n                        \"value\": \"206000\"\r\n                    }, {\r\n                        \"label\": \"Q4\",\r\n                        \"value\": \"275000\"\r\n                    }]\r\n                }\r\n            }, {\r\n                \"id\": \"cranberry\",\r\n                \"linkedchart\": {\r\n                    \"chart\": {\r\n                        \"caption\": \"Cranberry Juice - Quarterly Sales\",\r\n                        \"subcaption\": \"Last year\",\r\n                        \"xaxisname\": \"Quarter\",\r\n                        \"yaxisname\": \"Amount (In USD)\",\r\n                        \"numberprefix\": \"$\",\r\n                        \"palettecolors\": \"#008ee4\",\r\n                        \"canvasbgalpha\": \"0\",\r\n                        \"canvasborderalpha\": \"0\",\r\n                        \"useplotgradientcolor\": \"0\",\r\n                        \"showplotborder\": \"0\",\r\n                        \"placevaluesinside\": \"1\",\r\n                        \"valuefontcolor\": \"#ffffff\",\r\n                        \"captionpadding\": \"20\",\r\n                        \"showaxislines\": \"1\",\r\n                        \"axislinealpha\": \"20\",\r\n                        \"divlinealpha\": \"20\",\r\n                        \"showborder\": \"1\",\r\n                        \"bgalpha\": \"0\",\r\n                        \"animation\": \"0\"\r\n                    },\r\n                    \"data\": [{\r\n                        \"label\": \"Q1\",\r\n                        \"value\": \"102000\"\r\n                    }, {\r\n                        \"label\": \"Q2\",\r\n                        \"value\": \"142000\"\r\n                    }, {\r\n                        \"label\": \"Q3\",\r\n                        \"value\": \"187000\"\r\n                    }, {\r\n                        \"label\": \"Q4\",\r\n                        \"value\": \"189000\"\r\n                    }]\r\n                }\r\n            }, {\r\n                \"id\": \"grapes\",\r\n                \"linkedchart\": {\r\n                    \"chart\": {\r\n                        \"caption\": \"Grape Juice - Quarterly Sales\",\r\n                        \"subcaption\": \"Last year\",\r\n                        \"xaxisname\": \"Quarter\",\r\n                        \"yaxisname\": \"Amount (In USD)\",\r\n                        \"numberprefix\": \"$\",\r\n                        \"palettecolors\": \"#008ee4\",\r\n                        \"canvasbgalpha\": \"0\",\r\n                        \"canvasborderalpha\": \"0\",\r\n                        \"useplotgradientcolor\": \"0\",\r\n                        \"showplotborder\": \"0\",\r\n                        \"placevaluesinside\": \"1\",\r\n                        \"valuefontcolor\": \"#ffffff\",\r\n                        \"captionpadding\": \"20\",\r\n                        \"showaxislines\": \"1\",\r\n                        \"axislinealpha\": \"20\",\r\n                        \"divlinealpha\": \"20\",\r\n                        \"showborder\": \"1\",\r\n                        \"bgalpha\": \"0\",\r\n                        \"animation\": \"0\"\r\n                    },\r\n                    \"data\": [{\r\n                        \"label\": \"Q1\",\r\n                        \"value\": \"45000\"\r\n                    }, {\r\n                        \"label\": \"Q2\",\r\n                        \"value\": \"72000\"\r\n                    }, {\r\n                        \"label\": \"Q3\",\r\n                        \"value\": \"95000\"\r\n                    }, {\r\n                        \"label\": \"Q4\",\r\n                        \"value\": \"108000\"\r\n                    }]\r\n                }\r\n            }]\r\n        }\r\n    });\r\n    salesChart.render();\r\n});\r\n\r\n&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;div id=\"chartContainer\"&gt;FusionCharts XT will load here!&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Step_10\"><\/span>Step 10<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>Click <b>Run<\/b>, to execute the application.<\/li>\n<li>If all steps have been followed correctly, the output will be rendered as shown in the image below:<br \/>\n<b>Note:<\/b> The output shown below is three different views for the respective charts. But, only one gets displayed at a time.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/FC-output.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15852\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/FC-output.jpg\" alt=\"FC-output\" width=\"620\" height=\"286\" align=\"middle\" srcset=\"\/blog\/wp-content\/uploads\/2017\/02\/FC-output.jpg 620w, \/blog\/wp-content\/uploads\/2017\/02\/FC-output-150x69.jpg 150w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Building_Your_Own_apk_File\"><\/span>Building Your Own .apk File<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Follow the steps given below to build your own <b>.apk<\/b> file:<\/p>\n<ul>\n<li>From the Build menu, select the Build APK option, as shown in the image below:<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/apk-file.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15850\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/apk-file.png\" alt=\"apk-file\" width=\"620\" height=\"365\" align=\"middle\" srcset=\"\/blog\/wp-content\/uploads\/2017\/02\/apk-file.png 620w, \/blog\/wp-content\/uploads\/2017\/02\/apk-file-150x88.png 150w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<p>If you find any difficulty in rendering the chart or you see any errors in your code, click <a href=\"https:\/\/www.dropbox.com\/s\/6m0yx3rzi5zblay\/FusionCharts.zip?dl=0\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a> to download the complete source code of the sample project we have created for this tutorial.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Google&#8217;s Android is a Linux-based mobile operating system primarily designed for smartphones and tablets. Since its debut in 2007, it has been the best-selling operating system for tablets and smartphones. Furthermore, Android gives you access to a plethora of useful libraries and tools that can be used to create rich applications. In this post, we&#8217;ll [&hellip;]<\/p>\n","protected":false},"author":33,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[640,641,643,152,642],"coauthors":[648,647],"class_list":["post-15832","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-android","tag-android-application","tag-android-studio","tag-fusioncharts","tag-rendering-fusioncharts-in-android-application"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Render FusionCharts in an Android Application<\/title>\n<meta name=\"description\" content=\"Render interactive FusionCharts in your Android app via WebView. Step-by-step setup, data binding, and configuration tips for smooth mobile chart rendering.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Render FusionCharts in an Android Application\" \/>\n<meta property=\"og:description\" content=\"Render interactive FusionCharts in your Android app via WebView. Step-by-step setup, data binding, and configuration tips for smooth mobile chart rendering.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-17T07:17:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:11:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/02\/create-new-project.png\" \/>\n\t<meta property=\"og:image:width\" content=\"620\" \/>\n\t<meta property=\"og:image:height\" content=\"430\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ayan Bhadury, Dishank Tiwari\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ayan Bhadury, Dishank Tiwari\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Ayan Bhadury\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/24e8946ae2b802e172aa5964689ca243\"\n\t            },\n\t            \"headline\": \"Rendering FusionCharts in an Android Application 2026\",\n\t            \"datePublished\": \"2017-02-17T07:17:40+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:52+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/\"\n\t            },\n\t            \"wordCount\": 748,\n\t            \"commentCount\": 1,\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/create-new-project.png\",\n\t            \"keywords\": [\n\t                \"Android\",\n\t                \"Android application\",\n\t                \"Android Studio\",\n\t                \"FusionCharts\",\n\t                \"rendering FusionCharts in Android Application\"\n\t            ],\n\t            \"articleSection\": [\n\t                \"Tutorials\"\n\t            ],\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"CommentAction\",\n\t                    \"name\": \"Comment\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/\",\n\t            \"name\": \"Render FusionCharts in an Android Application\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\"\n\t            },\n\t            \"primaryImageOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/create-new-project.png\",\n\t            \"datePublished\": \"2017-02-17T07:17:40+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:52+00:00\",\n\t            \"description\": \"Render interactive FusionCharts in your Android app via WebView. Step-by-step setup, data binding, and configuration tips for smooth mobile chart rendering.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"ImageObject\",\n\t            \"inLanguage\": \"en-US\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#primaryimage\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/create-new-project.png\",\n\t            \"contentUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/create-new-project.png\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.fusioncharts.com\/blog\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"Rendering FusionCharts in an Android Application 2026\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"name\": \"FusionBrew - The FusionCharts Blog\",\n\t            \"description\": \"Get tips and tricks on how to build effective Data Visualisation using FusionCharts\",\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\",\n\t            \"name\": \"FusionCharts\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"width\": 1,\n\t                \"height\": 1,\n\t                \"caption\": \"FusionCharts\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/24e8946ae2b802e172aa5964689ca243\",\n\t            \"name\": \"Ayan Bhadury\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/e8b4bd366bf824e42027140489ad1ba6\",\n\t                \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/017\/017a9628c57694af5b4b3dcf5924840ex96.jpg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/017\/017a9628c57694af5b4b3dcf5924840ex96.jpg\",\n\t                \"caption\": \"Ayan Bhadury\"\n\t            },\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/ayan-bhadury\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Render FusionCharts in an Android Application","description":"Render interactive FusionCharts in your Android app via WebView. Step-by-step setup, data binding, and configuration tips for smooth mobile chart rendering.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/","og_locale":"en_US","og_type":"article","og_title":"Render FusionCharts in an Android Application","og_description":"Render interactive FusionCharts in your Android app via WebView. Step-by-step setup, data binding, and configuration tips for smooth mobile chart rendering.","og_url":"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2017-02-17T07:17:40+00:00","article_modified_time":"2026-01-20T09:11:52+00:00","og_image":[{"width":620,"height":430,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/02\/create-new-project.png","type":"image\/png"}],"author":"Ayan Bhadury, Dishank Tiwari","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Ayan Bhadury, Dishank Tiwari","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/"},"author":{"name":"Ayan Bhadury","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/24e8946ae2b802e172aa5964689ca243"},"headline":"Rendering FusionCharts in an Android Application 2026","datePublished":"2017-02-17T07:17:40+00:00","dateModified":"2026-01-20T09:11:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/"},"wordCount":748,"commentCount":1,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/create-new-project.png","keywords":["Android","Android application","Android Studio","FusionCharts","rendering FusionCharts in Android Application"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/","url":"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/","name":"Render FusionCharts in an Android Application","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/create-new-project.png","datePublished":"2017-02-17T07:17:40+00:00","dateModified":"2026-01-20T09:11:52+00:00","description":"Render interactive FusionCharts in your Android app via WebView. Step-by-step setup, data binding, and configuration tips for smooth mobile chart rendering.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#primaryimage","url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/create-new-project.png","contentUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/create-new-project.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/rendering-fusioncharts-android-application\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Rendering FusionCharts in an Android Application 2026"}]},{"@type":"WebSite","@id":"https:\/\/www.fusioncharts.com\/blog\/#website","url":"https:\/\/www.fusioncharts.com\/blog\/","name":"FusionBrew - The FusionCharts Blog","description":"Get tips and tricks on how to build effective Data Visualisation using FusionCharts","publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.fusioncharts.com\/blog\/#organization","name":"FusionCharts","url":"https:\/\/www.fusioncharts.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/","url":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","contentUrl":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","width":1,"height":1,"caption":"FusionCharts"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/24e8946ae2b802e172aa5964689ca243","name":"Ayan Bhadury","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/e8b4bd366bf824e42027140489ad1ba6","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/017\/017a9628c57694af5b4b3dcf5924840ex96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/017\/017a9628c57694af5b4b3dcf5924840ex96.jpg","caption":"Ayan Bhadury"},"url":"https:\/\/www.fusioncharts.com\/blog\/author\/ayan-bhadury\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/15832","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/users\/33"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=15832"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/15832\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=15832"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=15832"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=15832"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=15832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}