Using Charts in Your Ionic Framework Mobile App

Hi Today Discussed Ionic Framework Using charts in your Ionic Framework Mobile Appplication Highcharts and Stockcharts More attractive and pretty chart highcharts. Here Looks Like pretty chart using Ionic Framework is Follows Code.

Using Charts in Your Ionic Framework Mobile App

Index Page

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link rel="stylesheet" href="css/angular-chart.css">
        <link href="css/style.css" rel="stylesheet">
        <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        <link href="css/ionic.app.css" rel="stylesheet">
        -->
        <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <!-- cordova script (this will be a 404 during development) -->
        <script src="cordova.js"></script>
        <!-- your app's js -->
        <script src="js/Chart.min.js"></script>
        <script src="js/angular-chart.min.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">
        <ion-pane>
            <ion-header-bar class="bar-stable">
                <h1 class="title">Ionic Blank Starter</h1>
            </ion-header-bar>
            <ion-content>
            </ion-content>
        </ion-pane>
    </body>
</html>

Module Inject

angular.module('starter', ['ionic', 'chart.js'])

Controller Page

controller("ChartController", function($scope) {
    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
    $scope.series = ['Series A', 'Series B'];
    $scope.data = [
        [65, 59, 80, 81, 56, 55, 40],
        [28, 48, 40, 19, 86, 27, 90]
    ];
});

Html Page

 <ion-content ng-controller="ChartController">
    <div class="card">
        <div class="item item-divider">
            A line chart
        </div>
        <div class="item item-text-wrap">
            <canvas id="line" class="chart chart-line" data="data" labels="labels" legend="true" series="series" options="{showTooltips: false}"></canvas>
        </div>
    </div>
    <div class="card">
        <div class="item item-divider">
            A bar chart
        </div>
        <div class="item item-text-wrap">
            <canvas id="bar" class="chart chart-bar" data="data" labels="labels" legend="true" series="series" options="{showTooltips: false}"></canvas>
        </div>
    </div>
</ion-content>

Using Charts in Your Ionic Framework Mobile App

Using Charts in Your Ionic Framework Mobile App

Author : Dev2Tricks

Share this

Using Charts in Your Ionic Framework Mobile App

Using Charts in Your Ionic Framework Mobile App

Author : Dev2Tricks

Share this

Related Posts