{"id":16480,"date":"2017-11-13T14:49:59","date_gmt":"2017-11-13T09:19:59","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=16480"},"modified":"2026-01-20T14:40:41","modified_gmt":"2026-01-20T09:10:41","slug":"charts-ionic-2-framework-sqlite","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/","title":{"rendered":"Creating Mobile Charts in Ionic 2 Framework Using SQLite 2026"},"content":{"rendered":"Ionic is one of the leading SDK (Software development kit) for hybrid mobile app development in open-source platform. The latest Ionic SDK, Ionic 2 is built on top of AngularJS. Ionic is an open source framework which provides an array of tools and services for unique development of hybrid mobile apps using web technologies like CSS, HTML5, and SasS.\r\n\r\nThis tutorial showcases how you can render charts in Ionic framework using SQLite which is an embedded SQL database engine. To render charts, we\u2019ll use FusionCharts JavaScript Library.\r\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\/charts-ionic-2-framework-sqlite\/#Requirements\" title=\"Requirements\">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\/charts-ionic-2-framework-sqlite\/#Step_1_Setting_up_the_Environment\" title=\"Step 1: Setting up the Environment\">Step 1: Setting up the Environment<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/#Step_2_Setting_up_the_database\" title=\"Step 2: Setting up the database\">Step 2: Setting up the database<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/#Step_3_Preparing_the_Chart_Data_Source\" title=\"Step 3: Preparing the Chart Data Source\">Step 3: Preparing the Chart Data Source<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/#Step_4_Creating_FusionCharts_Directive\" title=\"Step 4: Creating FusionCharts Directive\">Step 4: Creating FusionCharts Directive<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/#Step_5_Building_the_application\" title=\"Step 5: Building the application\">Step 5: Building the application<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/#Step_6_Running_the_app\" title=\"Step 6: Running the app\">Step 6: Running the app<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Requirements\"><\/span>Requirements<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nBefore you start, make sure you have the following components on your local machine:\r\n<ul>\r\n \t<li>Ionic 2 [<a href=\"https:\/\/ionicframework.com\/docs\/intro\/installation\/\" target=\"_blank\" rel=\"noopener noreferrer\">Download Link<\/a>]<\/li>\r\n \t<li>SQLite Plugin [<a href=\"https:\/\/danielsogl.gitbook.io\/awesome-cordova-plugins\/sqlite\" target=\"_blank\" rel=\"noopener noreferrer\">Download Link<\/a>]<\/li>\r\n \t<li>FusionCharts Suite XT [<a href=\"https:\/\/www.fusioncharts.com\/download\/\" target=\"_blank\" rel=\"noopener noreferrer\">Download Link<\/a>]<\/li>\r\n \t<li>FusionCharts Angular 2 Plugin [<a href=\"https:\/\/www.fusioncharts.com\/angular2-js-charts\" target=\"_blank\" rel=\"noopener noreferrer\">Download Link<\/a>]<\/li>\r\n<\/ul>\r\nTo render charts in Ionic 2 framework, refer to the step by step process given below:\r\n<h2><span class=\"ez-toc-section\" id=\"Step_1_Setting_up_the_Environment\"><\/span>Step 1: Setting up the Environment<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<ul>\r\n \t<li>Install Ionic 2 in your local system. Run the following code in the terminal:\r\n<code>npm install -g ionic cordova<\/code>\r\nYou can also refer to the documentation page of Ionic 2 from <a href=\"https:\/\/ionicframework.com\/docs\/intro\/installation\/\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.<\/li>\r\n \t<li>After the installation, create the skeleton of the app. Run the following code in cmd shell to create the skeleton:\r\n<code>ionic\u00a0start fusiondatabase blank\r\n<\/code>The above command will install all the dependencies to run a basic project.<\/li>\r\n \t<li>Install SQLite plugin.\r\nFrom your CMD shell, get into application directory\r\nReference : c:\\ionicprojects\\fusiondatabase&gt;<\/li>\r\n \t<li>Once you are in the application directory, run the following command:\r\n<code>ionic cordova plugin add cordova-sqlite-storage<\/code>\r\nNote: To know more, refer to the <a href=\"https:\/\/danielsogl.gitbook.io\/awesome-cordova-plugins\/sqlite\" target=\"_blank\" rel=\"noopener noreferrer\">documentation<\/a> of SQLite plugin.<\/li>\r\n \t<li>app.module.ts file is pre build in the project created. The command mentioned below will import the SQLite class to the app.module.ts file. SQLite class, imports the SQLite native plugin for Ionic 2.\r\n<code>import\u00a0{ SQLite } from '@ionic-native\/sqlite';<\/code><\/li>\r\n \t<li>Pass the SQLite class in the provider of app.module.ts file. Refer to the code below:\r\n<pre class=\"lang:icon decode:true \">providers: [SQLite,\r\n    StatusBar,\r\n    SplashScreen,\r\n    {provide: ErrorHandler, useClass: IonicErrorHandler}\r\n  ]\r\n<\/pre>\r\n<\/li>\r\n \t<li>It\u2019s time to import SQLite and SQLiteObject in home.ts file.You\u2019ll get the file in folder named home under src folder [src -&gt; home -&gt; home.ts]. Once done, from the terminal run the command given below:\r\n<code>import\u00a0{ SQLite, SQLiteObject } from '@ionic-native\/sqlite';<\/code><\/li>\r\n \t<li>Create a reference of the constructor using the following code in your home.ts file\r\n<pre class=\"lang:icon decode:true \">constructor(public navCtrl: NavController,private sqlite: SQLite) {\r\n\r\n  }\r\n<\/pre>\r\n<\/li>\r\n \t<li>Add the FusionCharts angular 2 plugin to your project. Run the following command in your CMD shell:\r\n<code>npm install angular2-fusioncharts --save\r\n<\/code><\/li>\r\n \t<li>The entire <code>app.module.ts<\/code> looks like:\r\n<pre class=\"lang:javascript decode:true \">import { BrowserModule } from '@angular\/platform-browser';\r\nimport { ErrorHandler, NgModule } from '@angular\/core';\r\nimport { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';\r\nimport { SplashScreen } from '@ionic-native\/splash-screen';\r\nimport { StatusBar } from '@ionic-native\/status-bar';\r\nimport { SQLite } from '@ionic-native\/sqlite';\r\n\r\nimport { MyApp } from '.\/app.component';\r\nimport { HomePage } from '..\/pages\/home\/home';\r\n\r\n\/\/ Import angular2-fusioncharts\r\nimport { FusionChartsModule } from 'angular2-fusioncharts';\r\n\r\n\/\/ Import FusionCharts library\r\nimport * as FusionCharts from 'fusioncharts';\r\n\/\/ Load FusionCharts Charts module\r\nimport Charts from \"fusioncharts\/fusioncharts.charts\";\r\n\/\/ Load themes\r\nimport themes from \"fusioncharts\/themes\/fusioncharts.theme.fint\";\r\n\r\n@NgModule({\r\n  declarations: [\r\n    MyApp,\r\n    HomePage\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    FusionChartsModule.forRoot(FusionCharts, Charts, themes),\r\n    IonicModule.forRoot(MyApp)\r\n  ],\r\n  bootstrap: [IonicApp],\r\n  entryComponents: [\r\n    MyApp,\r\n    HomePage\r\n  ],\r\n  providers: [SQLite,\r\n    StatusBar,\r\n    SplashScreen,\r\n    {provide: ErrorHandler, useClass: IonicErrorHandler}\r\n  ]\r\n})\r\nexport class AppModule {}\r\n<\/pre>\r\nWith this, you have set the environment by installing and configuring all the applications required.<\/li>\r\n<\/ul>\r\n<h2><span class=\"ez-toc-section\" id=\"Step_2_Setting_up_the_database\"><\/span>Step 2: Setting up the database<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nIt\u2019s time to create the database from where the data will be fetched to render the chart. In your <code>home.ts<\/code> file, copy the code below:\r\n<pre class=\"lang:javascript decode:true \">store=[];\r\n\r\nlabel='';\r\nvalue='';\r\nitems1 = [];\r\nitems2 = [];\r\ndraw()\r\n{\r\n\r\nthis.sqlite.create({\r\nname: 'data.db',\r\nlocation: 'default'\r\n})\r\n.then((db: SQLiteObject) =&gt; {\r\n\r\n\/\/database create section\r\ndb.executeSql('CREATE TABLE IF NOT EXISTS singleseries(id INTEGER PRIMARY KEY AUTOINCREMENT,label,value)', {})\r\n.then(() =&gt; console.log('Executed SQL'))\r\n.catch(e =&gt; console.log(e));\r\n\r\n\/\/data insert section\r\ndb.executeSql('INSERT INTO singleseries VALUES(?)', [this.label,this.value])\r\n.then(() =&gt; console.log('Executed SQL'))\r\n.catch(e =&gt; console.log(e));\r\nthis.store=[];\r\nthis.items1 = [];\r\nthis.items2 =[];\r\nthis.items1.push({label: 'Java'});\r\nthis.items2.push({value: '36435'});\r\nthis.items1.push({label: 'JavaScript'});\r\nthis.items2.push({value: '28855'});\r\nthis.items1.push({label: 'PHP'});\r\nthis.items2.push({value: '24358'});\r\nthis.items1.push({label: 'SQL'});\r\nthis.items2.push({value: '18072'});\r\nthis.items1.push({label: 'C#'});\r\nthis.items2.push({value: '11648'});\r\nthis.items1.push({label: 'C++'});\r\nthis.items2.push({value: '8455'});\r\nthis.items1.push({label: 'Python'});\r\nthis.items2.push({value: '7760'});\r\nthis.items1.push({label: 'C'});\r\nthis.items2.push({value: '7359'});\r\nthis.items1.push({label: 'Shell'});\r\nthis.items2.push({value: '7359'});\r\n\r\n for(var i = 0; i &lt; this.items1.length; i++) {\r\n  var dataset={\r\n    label :this.items1[i].label,\r\n    value :this.items2[i].value\r\n     }\r\n  this.store.push(dataset);\r\n }\r\n }\r\n<\/pre>\r\n<h2><span class=\"ez-toc-section\" id=\"Step_3_Preparing_the_Chart_Data_Source\"><\/span>Step 3: Preparing the Chart Data Source<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nIt\u2019s time to prepare the data source for the chart to be rendered. Refer to the code given below:\r\n<pre class=\"lang:javascript decode:true \">this.dataSource = {\r\n      \"chart\": {\r\n        \"caption\": \"Widely used Programming languages\",\r\n          \"paletteColors\": \"#FFFFFF\",\r\n          \"bgColor\": \"#141B28\",\r\n          \"bgAlpha\": \"70\",\r\n          \"showBorder\": \"0\",\r\n          \"showCanvasBorder\": \"0\",\r\n          \"canvasbgcolor\": \"#141B28\",\r\n          \"canvasBgAlpha\": \"0\",\r\n          \"baseFontColor\": \"#ffffff\",\r\n          \"usePlotGradientColor\": \"0\",\r\n          \"plotBorderAlpha\": \"10\",\r\n          \"placeValuesInside\": \"0\",\r\n          \"plotspacepercent\": \"40\",\r\n          \"outCnvBaseFontsize\": \"15\",\r\n          \"axisLineAlpha\": \"25\",\r\n          \"yaxismaxvalue\": \"45000\",\r\n          \"formatnumberscale\": \"1\",\r\n          \"showxaxisline\": \"1\",\r\n          \"xaxislinecolor\": \"#ffffff\",\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      },\r\n      \"data\": this.store\r\n    }\r\n\r\nthis.visible = true;\r\n\r\n}, (err) =&gt; {\r\nalert('Unable to execute sql: '+JSON.stringify(err));\r\n});\r\n})\r\n.catch(e =&gt; console.log(JSON.stringify(e)));\r\n}\r\n<\/pre>\r\nBy following the steps mentioned above, you are ready with your <code>home.ts<\/code> file with all the required code:\r\n<pre class=\"lang:php decode:true \">import { Component } from '@angular\/core';\r\nimport { NavController } from 'ionic-angular';\r\nimport { SQLite, SQLiteObject } from '@ionic-native\/sqlite';\r\n\r\n@Component({\r\n  selector: 'page-home',\r\n  templateUrl: 'home.html'\r\n})\r\nexport class HomePage {\r\ndataSource: Object;\r\nvisible: boolean = false;\r\n  constructor(public navCtrl: NavController,private sqlite: SQLite) {\r\n\r\n  }\r\nstore=[];\r\n\r\nlabel='';\r\nvalue='';\r\nitems1 = [];\r\nitems2 = [];\r\ndraw()\r\n{\r\n\r\nthis.sqlite.create({\r\nname: 'data.db',\r\nlocation: 'default'\r\n})\r\n.then((db: SQLiteObject) =&gt; {\r\n\r\n\/\/database create section\r\ndb.executeSql('CREATE TABLE IF NOT EXISTS singleseries(id INTEGER PRIMARY KEY AUTOINCREMENT,label,value)', {})\r\n.then(() =&gt; console.log('Executed SQL'))\r\n.catch(e =&gt; console.log(e));\r\n\r\n\/\/data insert section\r\ndb.executeSql('INSERT INTO singleseries VALUES(?)', [this.label,this.value])\r\n.then(() =&gt; console.log('Executed SQL'))\r\n.catch(e =&gt; console.log(e));\r\n\r\n\/\/data retrieve section\r\ndb.executeSql('select * from singleseries', {}).then((data) =&gt; {\r\nthis.store=[];\r\nthis.items1 = [];\r\nthis.items2 =[];\r\nthis.items1.push({label: 'Java'});\r\nthis.items2.push({value: '36435'});\r\nthis.items1.push({label: 'JavaScript'});\r\nthis.items2.push({value: '28855'});\r\nthis.items1.push({label: 'PHP'});\r\nthis.items2.push({value: '24358'});\r\nthis.items1.push({label: 'SQL'});\r\nthis.items2.push({value: '18072'});\r\nthis.items1.push({label: 'C#'});\r\nthis.items2.push({value: '11648'});\r\nthis.items1.push({label: 'C++'});\r\nthis.items2.push({value: '8455'});\r\nthis.items1.push({label: 'Python'});\r\nthis.items2.push({value: '7760'});\r\nthis.items1.push({label: 'C'});\r\nthis.items2.push({value: '7359'});\r\nthis.items1.push({label: 'Shell'});\r\nthis.items2.push({value: '7359'});\r\n\r\nfor(var i = 0; i &lt; this.items1.length; i++) {\r\n  var dataset={\r\n    label :this.items1[i].label,\r\n    value :this.items2[i].value\r\n    }\r\n  this.store.push(dataset);\r\n }\r\n \r\nthis.dataSource = {\r\n      \"chart\": {\r\n        \"caption\": \"Widely used Programming languages\",\r\n          \"paletteColors\": \"#FFFFFF\",\r\n          \"bgColor\": \"#141B28\",\r\n          \"bgAlpha\": \"70\",\r\n          \"showBorder\": \"0\",\r\n          \"showCanvasBorder\": \"0\",\r\n          \"canvasbgcolor\": \"#141B28\",\r\n          \"canvasBgAlpha\": \"0\",\r\n          \"baseFontColor\": \"#ffffff\",\r\n          \"usePlotGradientColor\": \"0\",\r\n          \"plotBorderAlpha\": \"10\",\r\n          \"placeValuesInside\": \"0\",\r\n          \"plotspacepercent\": \"40\",\r\n          \"outCnvBaseFontsize\": \"15\",\r\n          \"axisLineAlpha\": \"25\",\r\n          \"yaxismaxvalue\": \"45000\",\r\n          \"formatnumberscale\": \"1\",\r\n          \"showxaxisline\": \"1\",\r\n          \"xaxislinecolor\": \"#ffffff\",\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      },\r\n      \"data\": this.store\r\n    }\r\n\r\nthis.visible = true;\r\n\r\n}, (err) =&gt; {\r\nalert('Unable to execute sql: '+JSON.stringify(err));\r\n});\r\n})\r\n.catch(e =&gt; console.log(JSON.stringify(e)));\r\n}\r\n}\r\n<\/pre>\r\n<h2><span class=\"ez-toc-section\" id=\"Step_4_Creating_FusionCharts_Directive\"><\/span>Step 4: Creating FusionCharts Directive<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nInclude FusionCharts directive inside <code>home.html<\/code> file located in <code>home<\/code> folder under <code>src<\/code> folder. [Reference path: src \u2192 home\u2192 home.html]\r\n\r\nRefer to the following code which will already be present in <code>home.html<\/code> file:\r\n<pre class=\"lang:markup decode:true \">&lt;ion-content padding&gt;\r\n&lt;button ion-button color=\"danger\" (click)=\"draw()\" &gt; Draw Chart &lt;\/button&gt;\r\n&lt;fusioncharts\r\n          *ngIf=\"visible\"\r\n          width=\"100%\"\r\n          height=\"500\"\r\n          type=\"Bar2D\"\r\n          dataFormat=\"JSON\"\r\n          [dataSource]=\"dataSource\"&gt;\r\n       \r\n      &lt;\/fusioncharts&gt;\r\n&lt;\/ion-content&gt;\r\n<\/pre>\r\n<h2><span class=\"ez-toc-section\" id=\"Step_5_Building_the_application\"><\/span>Step 5: Building the application<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nNow that we are done with the coding, it\u2019s time to build the application. We will be working with android application (you can also build the application for iOS). Run the following command in your CMD shell:\r\n<code>ionic cordova build android<\/code>\r\n\r\nThis command builds all the files for your application automatically.\r\n\r\n<strong>Note<\/strong>: Please make sure you have cordova plugin installed in your system\r\n<h2><span class=\"ez-toc-section\" id=\"Step_6_Running_the_app\"><\/span>Step 6: Running the app<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nAll set?\r\nIt\u2019s time to render the chart in your application. Just copy the command stated below and run it in your CMD shell:\r\n<code>ionic cordova android run<\/code>\r\n\r\nRunning the above command will open your emulator and deploy the application. The output looks like:\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/11\/Group.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16499\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/11\/Group.png\" alt=\"charts in ionic 2\" width=\"1310\" height=\"721\" srcset=\"\/blog\/wp-content\/uploads\/2017\/11\/Group.png 1310w, \/blog\/wp-content\/uploads\/2017\/11\/Group-150x83.png 150w\" sizes=\"auto, (max-width: 1310px) 100vw, 1310px\" \/><\/a>\r\n<strong>Note<\/strong>: Before you run the above command, make sure that you have the android emulator already installed in your system. Please note, the above sample will not get rendered properly in a browser as most of the browsers do not support cordova natively. Thus we recommend to check the application in an emulator, as using Ionic server may not give you the desired output.\r\n\r\nIf you find any difficulty in rendering the chart or you see any error in your code, click <a href=\"https:\/\/www.dropbox.com\/s\/ae1mb7j5oukjkk4\/Ionic2sqlite_bar2d.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.","protected":false},"excerpt":{"rendered":"<p>Ionic is one of the leading SDK (Software development kit) for hybrid mobile app development in open-source platform. The latest Ionic SDK, Ionic 2 is built on top of AngularJS. Ionic is an open source framework which provides an array of tools and services for unique development of hybrid mobile apps using web technologies like [&hellip;]<\/p>\n","protected":false},"author":39,"featured_media":16500,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"coauthors":[675,648],"class_list":["post-16480","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Creating Mobile Charts In Ionic 2 Framework Using SQLite<\/title>\n<meta name=\"description\" content=\"Integrate charts with Ionic 2 and SQLite. Elevate your 2026 insights with enhanced data visualization for mobile applications. Build mobile charts today.\" \/>\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\/charts-ionic-2-framework-sqlite\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Mobile Charts In Ionic 2 Framework Using SQLite\" \/>\n<meta property=\"og:description\" content=\"Integrate charts with Ionic 2 and SQLite. Elevate your 2026 insights with enhanced data visualization for mobile applications. Build mobile charts today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-11-13T09:19:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:10:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/11\/FusionCharts-In-Ionic-2-Framework-Using-SQLite.png\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"335\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jonathan, Ayan Bhadury\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jonathan, Ayan Bhadury\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 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\/charts-ionic-2-framework-sqlite\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Jonathan\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb\"\n\t            },\n\t            \"headline\": \"Creating Mobile Charts in Ionic 2 Framework Using SQLite 2026\",\n\t            \"datePublished\": \"2017-11-13T09:19:59+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:10:41+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/\"\n\t            },\n\t            \"wordCount\": 700,\n\t            \"commentCount\": 0,\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\/charts-ionic-2-framework-sqlite\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2017\/11\/FusionCharts-In-Ionic-2-Framework-Using-SQLite.png\",\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\/charts-ionic-2-framework-sqlite\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/\",\n\t            \"name\": \"Creating Mobile Charts In Ionic 2 Framework Using SQLite\",\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\/charts-ionic-2-framework-sqlite\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2017\/11\/FusionCharts-In-Ionic-2-Framework-Using-SQLite.png\",\n\t            \"datePublished\": \"2017-11-13T09:19:59+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:10:41+00:00\",\n\t            \"description\": \"Integrate charts with Ionic 2 and SQLite. Elevate your 2026 insights with enhanced data visualization for mobile applications. Build mobile charts today.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/#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\/charts-ionic-2-framework-sqlite\/\"\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\/charts-ionic-2-framework-sqlite\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2017\/11\/FusionCharts-In-Ionic-2-Framework-Using-SQLite.png\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2017\/11\/FusionCharts-In-Ionic-2-Framework-Using-SQLite.png\",\n\t            \"width\": 900,\n\t            \"height\": 335,\n\t            \"caption\": \"Ionic 2 Framework Using SQLite\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/#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\": \"Creating Mobile Charts in Ionic 2 Framework Using SQLite 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\/14fbfb07e81bfbcd524a4202f34bdcbb\",\n\t            \"name\": \"Jonathan\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/0b58dff9af412d6ac90a1569df4d596c\",\n\t                \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg\",\n\t                \"caption\": \"Jonathan\"\n\t            },\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/jonathan\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating Mobile Charts In Ionic 2 Framework Using SQLite","description":"Integrate charts with Ionic 2 and SQLite. Elevate your 2026 insights with enhanced data visualization for mobile applications. Build mobile charts today.","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\/charts-ionic-2-framework-sqlite\/","og_locale":"en_US","og_type":"article","og_title":"Creating Mobile Charts In Ionic 2 Framework Using SQLite","og_description":"Integrate charts with Ionic 2 and SQLite. Elevate your 2026 insights with enhanced data visualization for mobile applications. Build mobile charts today.","og_url":"https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2017-11-13T09:19:59+00:00","article_modified_time":"2026-01-20T09:10:41+00:00","og_image":[{"width":900,"height":335,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/11\/FusionCharts-In-Ionic-2-Framework-Using-SQLite.png","type":"image\/png"}],"author":"Jonathan, Ayan Bhadury","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jonathan, Ayan Bhadury","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/"},"author":{"name":"Jonathan","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb"},"headline":"Creating Mobile Charts in Ionic 2 Framework Using SQLite 2026","datePublished":"2017-11-13T09:19:59+00:00","dateModified":"2026-01-20T09:10:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/"},"wordCount":700,"commentCount":0,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2017\/11\/FusionCharts-In-Ionic-2-Framework-Using-SQLite.png","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/","url":"https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/","name":"Creating Mobile Charts In Ionic 2 Framework Using SQLite","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2017\/11\/FusionCharts-In-Ionic-2-Framework-Using-SQLite.png","datePublished":"2017-11-13T09:19:59+00:00","dateModified":"2026-01-20T09:10:41+00:00","description":"Integrate charts with Ionic 2 and SQLite. Elevate your 2026 insights with enhanced data visualization for mobile applications. Build mobile charts today.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2017\/11\/FusionCharts-In-Ionic-2-Framework-Using-SQLite.png","contentUrl":"\/blog\/wp-content\/uploads\/2017\/11\/FusionCharts-In-Ionic-2-Framework-Using-SQLite.png","width":900,"height":335,"caption":"Ionic 2 Framework Using SQLite"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/charts-ionic-2-framework-sqlite\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating Mobile Charts in Ionic 2 Framework Using SQLite 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\/14fbfb07e81bfbcd524a4202f34bdcbb","name":"Jonathan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/0b58dff9af412d6ac90a1569df4d596c","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg","caption":"Jonathan"},"url":"https:\/\/www.fusioncharts.com\/blog\/author\/jonathan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16480","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\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=16480"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16480\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media\/16500"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=16480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=16480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=16480"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=16480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}