Charts in Ionic projects (AngularJS)

Overview 

As we know, Ionic is a powerful HTML5 SDK that helps you build native-feeling mobile apps using web technologies like HTML, CSS, and Javascript. Ionic currently requires AngularJS in order to work at its full potential. While you can still use the CSS portion of the framework, you'll miss out on powerful UI interactions, gestures, animations, and other things.

This sample is to show how to use charts in Ionic project. We will be using Angular charts to Ionic project.

The complete source code of this example is here 

This

Create Project

We can create Ionic project in 2 ways:

1) Through IONIC Creator (Here)
(Ionic creator is very useful and easy to use prototyping tool to create UI templates for IONIC projects. It allows to implement basic routing through pages, style class and various layout of templates in quick time. We can create and download the project from IONIC creator through IONIC CLI tool, ZIP file format, Package or in Mobile app to device)

2) Through command prompt as follows:
Go to your command line and start a new ionic app:

once, project created use next command:

to run the project, user following command:

** --lab flag is quite new and shows how your app will look on ios & Android.

  

Copying files

Add following files to your www/js folder

Chart.min.js (Here)
angular-chart.min.js (Here)

Modify index.html

Add script reference of Chart.min.js and angular-chart.min.js to index.html file.

your file will look like this :

 

Modify app.js

Add chart.js module to app.js file 

 

 

Add controller in controller.js

This controller will provide data to charts, labels and series. This controller also provide options control for charts like tooltips, tooltips event, font style etc.

.controller("ExampleController", function($scope) {

    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
    $scope.series = ['Average Spent Effort', 'Average Estimated Effort', 'Average Remainning Effort'];
    $scope.data = [
        [65, 59, 80, 81, 56, 55, 40],
        [28, 48, 40, 19, 86, 27, 90],
        [18, 38, 40, 49, 81, 43, 77]
    ];
   
    $scope.dohnutdata = [65, 59, 80, 81, 56, 55, 40];
    $scope.piedata = [65, 59, 80, 81, 56, 55, 40];
    $scope.polardata = [65, 59, 80, 81, 56, 55, 40];   

    $scope.colors = ['#45b7cd', '#ff6384', '#ff8e72'];
   

     //Globals
    $scope.myChartOptions = {
        // Boolean - Whether to animate the chart
        animation: true,

        // Number - Number of animation steps
        animationSteps: 60,

        // String - Animation easing effect
        animationEasing: "easeOutQuart",

        // Boolean - If we should show the scale at all
        showScale: true,

        // Boolean - If we want to override with a hard coded scale
        scaleOverride: false,

        // ** Required if scaleOverride is true **
        // Number - The number of steps in a hard coded scale
        scaleSteps: null,
        // Number - The value jump in the hard coded scale
        scaleStepWidth: null,
        // Number - The scale starting value
        scaleStartValue: null,

        // String - Colour of the scale line
        scaleLineColor: "rgba(0,0,0,.1)",

        // Number - Pixel width of the scale line
        scaleLineWidth: 1,

        // Boolean - Whether to show labels on the scale
        scaleShowLabels: true,

        // Interpolated JS string - can access value
        scaleLabel: "<%=value%>",

        // Boolean - Whether the scale should stick to integers, not floats even if drawing space is there
        scaleIntegersOnly: true,

        // Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
        scaleBeginAtZero: false,

        // String - Scale label font declaration for the scale label
        scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

        // Number - Scale label font size in pixels
        scaleFontSize: 12,

        // String - Scale label font weight style
        scaleFontStyle: "normal",

        // String - Scale label font colour
        scaleFontColor: "#666",

        // Boolean - whether or not the chart should be responsive and resize when the browser does.
        responsive: true,

        // Boolean - Determines whether to draw tooltips on the canvas or not
        showTooltips: false,

        // Array - Array of string names to attach tooltip events
        tooltipEvents: ["mousemove", "touchstart", "touchmove"],

        // String - Tooltip background colour
        tooltipFillColor: "rgba(0,0,0,0.8)",

        // String - Tooltip label font declaration for the scale label
        tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

        // Number - Tooltip label font size in pixels
        tooltipFontSize: 14,

        // String - Tooltip font weight style
        tooltipFontStyle: "normal",

        // String - Tooltip label font colour
        tooltipFontColor: "#fff",

        // String - Tooltip title font declaration for the scale label
        tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

        // Number - Tooltip title font size in pixels
        tooltipTitleFontSize: 14,

        // String - Tooltip title font weight style
        tooltipTitleFontStyle: "bold",

        // String - Tooltip title font colour
        tooltipTitleFontColor: "#fff",

        // Number - pixel width of padding around tooltip text
        tooltipYPadding: 6,

        // Number - pixel width of padding around tooltip text
        tooltipXPadding: 6,

        // Number - Size of the caret on the tooltip
        tooltipCaretSize: 8,

        // Number - Pixel radius of the tooltip border
        tooltipCornerRadius: 6,

        // Number - Pixel offset from point x to tooltip edge
        tooltipXOffset: 10,

        // String - Template string for single tooltips
        tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",

        // String - Template string for single tooltips
        multiTooltipTemplate: "<%= value %>",

        // Function - Will fire on animation progression.
        onAnimationProgress: function(){},

        // Function - Will fire on animation completion.
        onAnimationComplete: function(){}
    };
}) 

Add charts in index.html

After all above steps, now we can modify out dashboard.html which will display various charts.

1) Add ng-controller property to ion-content tab

<ion-content ng-controller="ExampleController">

2) Add div inside which chart will be created. In this canvas property from chart.js will create various charts.

<div class="card" style="width:90%;">
      <div class="item item-divider">
            Line Chart
      </div>
      <div class="item item-text-wrap">
              <canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-legend="true" chart-series="series" chart-options="{showTooltips: true}"></canvas>
      </div>

</div>

Your file will look like this 

<ion-content ng-controller="ExampleController">
    <div class="card" style="width:90%;">
      <div class="item item-divider">
          Line Chart
      </div>
      <div class="item item-text-wrap">
          <canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-legend="true" chart-series="series" chart-options="{showTooltips: true}"></canvas>
      </div>
    </div>
</ion-content>

Similar to above Line chart, we can add bar chart, pie chart, radar chart. As every chart need different data structure from controller, we have to manipulate it accordingly.

After all above steps run your application.

ionic serve
 

Enjoy and happy coding!