Added price chart

app-template/bitcoincom/appConfig.json

@@ -29,6 +29,7 @@
     "coinbase": false,
     "glidera": false,
     "amazon": false,
-    "bitcoincom": true
+    "bitcoincom": true,
+    "pricechart": true
   }
 }

app-template/bitcoincom/css/bitcoin.com.css

@@ -133,3 +133,60 @@ div.onboarding-topic {
 .big-icon-svg > .bg.green {
    background: #fab915 !important;
 }
+
+.chart-container {
+    font-family: 'Varela Round', sans-serif;
+    width:100%;
+    height:auto;
+    box-shadow: 0px 0px 24px -5px rgba(0,0,0,0.75);
+}
+
+.ct-series-a .ct-area {
+    fill: #FDE9BE;
+}
+.ct-area {
+    opacity:.6 !important;
+}
+
+.ct-series-a .ct-line,
+.ct-series-a .ct-point {
+    stroke: #F9B016;
+    stroke-width: 2px;
+}
+.ct-labels {
+    border: red thin solid;
+}
+.chart-header {
+    display: flex;
+    box-sizing: border-box;
+    width:100%;
+    height:10%;
+    color: white;
+
+}
+.latest-price {
+    box-sizing: border-box;
+    padding: .6em .2em 0 .4em;
+    font-size: 1.6em;
+    background-color: #F9B016;
+    width:40%;
+}
+.high-price {
+    box-sizing: border-box;
+    padding:.7em 1em;
+    font-size: 1em;
+    background-color: #EFA406;
+    width:30%;
+    height:inherit;
+}
+.low-price {
+    box-sizing: border-box;
+    padding:.7em 0em;
+    font-size: 1em;
+    background-color: #EFA406;
+    width:30%;
+    height:inherit;
+}
+.light-yellow {
+    color:#FFD579;
+}

src/js/controllers/pricechart.js

@@ -0,0 +1,119 @@
+'use strict';
+
+angular.module('copayApp.controllers').controller('pricechartController',
+  function($scope, $timeout, $ionicModal, $log, $state, $ionicHistory, lodash, pricechartService, externalLinkService, popupService) {
+
+    $scope.openExternalLink = function(url) {
+      externalLinkService.open(url);
+    };
+
+    var pricechart = function() {
+        var rawData = [];
+
+	var request = new XMLHttpRequest();
+	request.open('GET', 'https://index.bitcoin.com/api/v0/history?unix=1&pretty=0', true);
+
+	var priceHigh = 0;
+	var priceLow = 100000000;
+	var priceLatest = 0;
+
+	request.onload = function () {
+	    if (request.status >= 200 && request.status < 400) {
+		// Success!
+		console.log(request.responseText);
+
+		var data = {
+		    series: [
+		        {
+		            name: 'series-1',
+		            data: []
+		        }
+		    ]
+		};
+		console.log(data);
+		rawData = JSON.parse("" + request.responseText + "");
+		for (var i = rawData.length - 1; i > 0; i--) {
+		    var tuple = rawData[i];
+		    data.series[0].data.push({x: new Date(tuple[0]), y: tuple[1]});
+
+		    if (priceHigh < tuple[1])
+		    {
+		        priceHigh = tuple[1];
+		    }
+		    if (priceLow > tuple[1])
+		    {
+		        priceLow = tuple[1]
+		    }
+		    priceLatest = tuple[1];
+		}
+
+		document.getElementById("latest-price").innerHTML = (priceLatest / 100).toFixed(2);
+		document.getElementById("low-price").innerHTML = (priceLow / 100).toFixed(2);
+		document.getElementById("high-price").innerHTML = (priceHigh / 100).toFixed(2);
+
+		var chartContainer = document.querySelector('.chart-container');
+                var chartHeader = document.querySelector('.chart-header');
+		console.log("Height: " + window.getComputedStyle(chartContainer).height);
+                console.log("Height2: " + window.getComputedStyle(chartHeader).height);
+		console.log("Width: " + window.getComputedStyle(chartContainer).width);
+
+                var chartHeight = window.getComputedStyle(chartContainer).height - window.getComputedStyle(chartHeader).height;
+                var chartWidth = window.getComputedStyle(chartContainer).width;
+
+                console.log(chartHeight);
+
+		var options = {
+                    width: chartWidth,
+                    height: 570,
+		    // Don't draw the line chart points
+		    showPoint: false,
+		    // Disable line smoothing
+		    lineSmooth: false,
+		    fillOpacity: 1,
+		    // X-Axis specific configuration
+		    axisX: {
+		        type: Chartist.FixedScaleAxis,
+		        divisor: 5,
+		        labelInterpolationFnc: function (value) {
+		            return moment(value).format('MMM D');
+		        }
+		    },
+		    // Y-Axis specific configuration
+		    axisY: {
+		        type: Chartist.FixedScaleAxis,
+		        divisor: 5,
+		        // Lets offset the chart a bit from the labels
+		        offset: 70,
+		        low: 50000,
+		        // The label interpolation function enables you to modify the values
+		        // used for the labels on each axis.
+		        labelInterpolationFnc: function (value) {
+		            return '$' + (value / 100).toFixed(2);
+		        }
+		    },
+		    showArea: true
+		};
+
+
+	// Create a new line chart object where as first parameter we pass in a selector
+	// that is resolving to our chart container element. The Second parameter
+	// is the actual data object.
+		new Chartist.Line('.ct-chart', data, options);
+	    }
+	    else
+	    {
+		// We reached our target server, but it returned an error
+	    }
+	};
+
+	request.onerror = function () {
+	    // There was a connection error of some sort
+	};
+
+	request.send();
+    };
+
+    $scope.$on("$ionicView.beforeEnter", function(event, data) {
+      pricechart();
+    });
+  });

src/js/controllers/tab-home.js

@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('copayApp.controllers').controller('tabHomeController',
-  function($rootScope, $timeout, $scope, $state, $stateParams, $ionicModal, $ionicScrollDelegate, $window, gettextCatalog, lodash, popupService, ongoingProcess, externalLinkService, latestReleaseService, profileService, walletService, configService, $log, platformInfo, storageService, txpModalService, appConfigService, startupService, addressbookService, feedbackService, bwcError, nextStepsService, buyAndSellService, homeIntegrationsService, bitpayCardService, pushNotificationsService, timeService, bitcoincomService) {
+  function($rootScope, $timeout, $scope, $state, $stateParams, $ionicModal, $ionicScrollDelegate, $window, gettextCatalog, lodash, popupService, ongoingProcess, externalLinkService, latestReleaseService, profileService, walletService, configService, $log, platformInfo, storageService, txpModalService, appConfigService, startupService, addressbookService, feedbackService, bwcError, nextStepsService, buyAndSellService, homeIntegrationsService, bitpayCardService, pushNotificationsService, timeService, bitcoincomService, pricechartService) {
     var wallet;
     var listeners = [];
     var notifications = [];

src/js/routes.js

@@ -1037,6 +1037,17 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
         }
       })
 
+      /* Price Chart */
+      .state('tabs.pricechart', {
+        url: '/pricechart',
+        views: {
+          'tab-home@tabs': {
+            controller: 'pricechartController',
+            templateUrl: 'views/pricechart.html'
+          }
+        }
+      })
+
       /*
        *
        * Amazon.com Gift Card

src/js/services/pricechartService.js

@@ -0,0 +1,26 @@
+'use strict';
+angular.module('copayApp.services').factory('pricechartService', function($http, $log, lodash, moment, storageService, configService, platformInfo, nextStepsService, homeIntegrationsService) {
+  var root = {};
+  var credentials = {};
+
+  var homeItem = {
+    name: 'pricechart',
+    title: 'Bitcoin Price Chart',
+    icon: 'icon-bitcoincom',
+    sref: 'tabs.pricechart',
+  };
+
+  var nextStepItem = {
+    name: 'pricechart',
+    title: 'Bitcoin Price Chart',
+    icon: 'icon-bitcoincom',
+    sref: 'tabs.pricechart',
+  };
+
+  var register = function() {
+        nextStepsService.register(nextStepItem);
+  };
+
+  register();
+  return root;
+});

www/css/bitcoin.com.css

@@ -170,3 +170,59 @@ button.button.button-secondary {
 div.slide-success__background.fill-screen {
     background-color: #fab915 !important;
 }
+
+.chart-container {
+    font-family: 'Varela Round', sans-serif;
+    width:100%;
+    height:100%;
+}
+
+.ct-series-a .ct-area {
+    fill: #FDE9BE;
+}
+.ct-area {
+    opacity:.6 !important;
+}
+
+.ct-series-a .ct-line,
+.ct-series-a .ct-point {
+    stroke: #F9B016;
+    stroke-width: 2px;
+}
+.ct-labels {
+    border: red thin solid;
+}
+.chart-header {
+    display: flex;
+    box-sizing: border-box;
+    width:100%;
+    height:10%;
+    color: white;
+
+}
+.latest-price {
+    box-sizing: border-box;
+    padding: .6em .2em 0 .4em;
+    font-size: 1.6em;
+    background-color: #F9B016;
+    width:40%;
+}
+.high-price {
+    box-sizing: border-box;
+    padding:.7em 1em;
+    font-size: 1em;
+    background-color: #EFA406;
+    width:30%;
+    height:64px;
+}
+.low-price {
+    box-sizing: border-box;
+    padding:.7em 0em;
+    font-size: 1em;
+    background-color: #EFA406;
+    width:30%;
+    height:64px;
+}
+.light-yellow {
+    color:#FFD579;
+}

www/css/chartist.css

@@ -0,0 +1,615 @@
+.ct-label {
+  fill: rgba(0, 0, 0, 0.4);
+  color: rgba(0, 0, 0, 0.4);
+  font-size: 0.75rem;
+  line-height: 1; }
+
+.ct-chart-line .ct-label,
+.ct-chart-bar .ct-label {
+  display: block;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex; }
+
+.ct-chart-pie .ct-label,
+.ct-chart-donut .ct-label {
+  dominant-baseline: central; }
+
+.ct-label.ct-horizontal.ct-start {
+  -webkit-box-align: flex-end;
+  -webkit-align-items: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+  -webkit-box-pack: flex-start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: flex-start;
+  justify-content: flex-start;
+  text-align: left;
+  text-anchor: start; }
+
+.ct-label.ct-horizontal.ct-end {
+  -webkit-box-align: flex-start;
+  -webkit-align-items: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-box-pack: flex-start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: flex-start;
+  justify-content: flex-start;
+  text-align: left;
+  text-anchor: start; }
+
+.ct-label.ct-vertical.ct-start {
+  -webkit-box-align: flex-end;
+  -webkit-align-items: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+  -webkit-box-pack: flex-end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: flex-end;
+  justify-content: flex-end;
+  text-align: right;
+  text-anchor: end; }
+
+.ct-label.ct-vertical.ct-end {
+  -webkit-box-align: flex-end;
+  -webkit-align-items: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+  -webkit-box-pack: flex-start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: flex-start;
+  justify-content: flex-start;
+  text-align: left;
+  text-anchor: start; }
+
+.ct-chart-bar .ct-label.ct-horizontal.ct-start {
+  -webkit-box-align: flex-end;
+  -webkit-align-items: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  text-align: center;
+  text-anchor: start; }
+
+.ct-chart-bar .ct-label.ct-horizontal.ct-end {
+  -webkit-box-align: flex-start;
+  -webkit-align-items: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  text-align: center;
+  text-anchor: start; }
+
+.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start {
+  -webkit-box-align: flex-end;
+  -webkit-align-items: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+  -webkit-box-pack: flex-start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: flex-start;
+  justify-content: flex-start;
+  text-align: left;
+  text-anchor: start; }
+
+.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end {
+  -webkit-box-align: flex-start;
+  -webkit-align-items: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-box-pack: flex-start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: flex-start;
+  justify-content: flex-start;
+  text-align: left;
+  text-anchor: start; }
+
+.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start {
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: flex-end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: flex-end;
+  justify-content: flex-end;
+  text-align: right;
+  text-anchor: end; }
+
+.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end {
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: flex-start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: flex-start;
+  justify-content: flex-start;
+  text-align: left;
+  text-anchor: end; }
+
+.ct-grid {
+  stroke: rgba(0, 0, 0, 0.2);
+  stroke-width: 1px;
+  stroke-dasharray: 2px; }
+
+.ct-grid-background {
+  fill: none; }
+
+.ct-point {
+  stroke-width: 10px;
+  stroke-linecap: round; }
+
+.ct-line {
+  fill: none;
+  stroke-width: 4px; }
+
+.ct-area {
+  stroke: none;
+  fill-opacity: 0.6; }
+
+.ct-bar {
+  fill: none;
+  stroke-width: 10px; }
+
+.ct-slice-donut {
+  fill: none;
+  stroke-width: 60px; }
+
+.ct-series-a .ct-point, .ct-series-a .ct-line, .ct-series-a .ct-bar, .ct-series-a .ct-slice-donut {
+  stroke: #d70206; }
+
+.ct-series-a .ct-slice-pie, .ct-series-a .ct-slice-donut-solid, .ct-series-a .ct-area {
+  fill: #d70206; }
+
+.ct-series-b .ct-point, .ct-series-b .ct-line, .ct-series-b .ct-bar, .ct-series-b .ct-slice-donut {
+  stroke: #f05b4f; }
+
+.ct-series-b .ct-slice-pie, .ct-series-b .ct-slice-donut-solid, .ct-series-b .ct-area {
+  fill: #f05b4f; }
+
+.ct-series-c .ct-point, .ct-series-c .ct-line, .ct-series-c .ct-bar, .ct-series-c .ct-slice-donut {
+  stroke: #f4c63d; }
+
+.ct-series-c .ct-slice-pie, .ct-series-c .ct-slice-donut-solid, .ct-series-c .ct-area {
+  fill: #f4c63d; }
+
+.ct-series-d .ct-point, .ct-series-d .ct-line, .ct-series-d .ct-bar, .ct-series-d .ct-slice-donut {
+  stroke: #d17905; }
+
+.ct-series-d .ct-slice-pie, .ct-series-d .ct-slice-donut-solid, .ct-series-d .ct-area {
+  fill: #d17905; }
+
+.ct-series-e .ct-point, .ct-series-e .ct-line, .ct-series-e .ct-bar, .ct-series-e .ct-slice-donut {
+  stroke: #453d3f; }
+
+.ct-series-e .ct-slice-pie, .ct-series-e .ct-slice-donut-solid, .ct-series-e .ct-area {
+  fill: #453d3f; }
+
+.ct-series-f .ct-point, .ct-series-f .ct-line, .ct-series-f .ct-bar, .ct-series-f .ct-slice-donut {
+  stroke: #59922b; }
+
+.ct-series-f .ct-slice-pie, .ct-series-f .ct-slice-donut-solid, .ct-series-f .ct-area {
+  fill: #59922b; }
+
+.ct-series-g .ct-point, .ct-series-g .ct-line, .ct-series-g .ct-bar, .ct-series-g .ct-slice-donut {
+  stroke: #0544d3; }
+
+.ct-series-g .ct-slice-pie, .ct-series-g .ct-slice-donut-solid, .ct-series-g .ct-area {
+  fill: #0544d3; }
+
+.ct-series-h .ct-point, .ct-series-h .ct-line, .ct-series-h .ct-bar, .ct-series-h .ct-slice-donut {
+  stroke: #6b0392; }
+
+.ct-series-h .ct-slice-pie, .ct-series-h .ct-slice-donut-solid, .ct-series-h .ct-area {
+  fill: #6b0392; }
+
+.ct-series-i .ct-point, .ct-series-i .ct-line, .ct-series-i .ct-bar, .ct-series-i .ct-slice-donut {
+  stroke: #f05b4f; }
+
+.ct-series-i .ct-slice-pie, .ct-series-i .ct-slice-donut-solid, .ct-series-i .ct-area {
+  fill: #f05b4f; }
+
+.ct-series-j .ct-point, .ct-series-j .ct-line, .ct-series-j .ct-bar, .ct-series-j .ct-slice-donut {
+  stroke: #dda458; }
+
+.ct-series-j .ct-slice-pie, .ct-series-j .ct-slice-donut-solid, .ct-series-j .ct-area {
+  fill: #dda458; }
+
+.ct-series-k .ct-point, .ct-series-k .ct-line, .ct-series-k .ct-bar, .ct-series-k .ct-slice-donut {
+  stroke: #eacf7d; }
+
+.ct-series-k .ct-slice-pie, .ct-series-k .ct-slice-donut-solid, .ct-series-k .ct-area {
+  fill: #eacf7d; }
+
+.ct-series-l .ct-point, .ct-series-l .ct-line, .ct-series-l .ct-bar, .ct-series-l .ct-slice-donut {
+  stroke: #86797d; }
+
+.ct-series-l .ct-slice-pie, .ct-series-l .ct-slice-donut-solid, .ct-series-l .ct-area {
+  fill: #86797d; }
+
+.ct-series-m .ct-point, .ct-series-m .ct-line, .ct-series-m .ct-bar, .ct-series-m .ct-slice-donut {
+  stroke: #b2c326; }
+
+.ct-series-m .ct-slice-pie, .ct-series-m .ct-slice-donut-solid, .ct-series-m .ct-area {
+  fill: #b2c326; }
+
+.ct-series-n .ct-point, .ct-series-n .ct-line, .ct-series-n .ct-bar, .ct-series-n .ct-slice-donut {
+  stroke: #6188e2; }
+
+.ct-series-n .ct-slice-pie, .ct-series-n .ct-slice-donut-solid, .ct-series-n .ct-area {
+  fill: #6188e2; }
+
+.ct-series-o .ct-point, .ct-series-o .ct-line, .ct-series-o .ct-bar, .ct-series-o .ct-slice-donut {
+  stroke: #a748ca; }
+
+.ct-series-o .ct-slice-pie, .ct-series-o .ct-slice-donut-solid, .ct-series-o .ct-area {
+  fill: #a748ca; }
+
+.ct-square {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-square:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 100%; }
+  .ct-square:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-square > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-minor-second {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-minor-second:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 93.75%; }
+  .ct-minor-second:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-minor-second > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-major-second {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-major-second:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 88.8888888889%; }
+  .ct-major-second:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-major-second > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-minor-third {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-minor-third:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 83.3333333333%; }
+  .ct-minor-third:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-minor-third > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-major-third {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-major-third:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 80%; }
+  .ct-major-third:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-major-third > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-perfect-fourth {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-perfect-fourth:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 75%; }
+  .ct-perfect-fourth:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-perfect-fourth > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-perfect-fifth {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-perfect-fifth:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 66.6666666667%; }
+  .ct-perfect-fifth:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-perfect-fifth > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-minor-sixth {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-minor-sixth:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 62.5%; }
+  .ct-minor-sixth:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-minor-sixth > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-golden-section {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-golden-section:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 61.804697157%; }
+  .ct-golden-section:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-golden-section > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-major-sixth {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-major-sixth:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 60%; }
+  .ct-major-sixth:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-major-sixth > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-minor-seventh {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-minor-seventh:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 56.25%; }
+  .ct-minor-seventh:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-minor-seventh > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-major-seventh {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-major-seventh:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 53.3333333333%; }
+  .ct-major-seventh:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-major-seventh > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-octave {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-octave:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 50%; }
+  .ct-octave:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-octave > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-major-tenth {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-major-tenth:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 40%; }
+  .ct-major-tenth:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-major-tenth > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-major-eleventh {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-major-eleventh:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 37.5%; }
+  .ct-major-eleventh:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-major-eleventh > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-major-twelfth {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-major-twelfth:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 33.3333333333%; }
+  .ct-major-twelfth:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-major-twelfth > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-double-octave {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-double-octave:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 25%; }
+  .ct-double-octave:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-double-octave > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+/*# sourceMappingURL=chartist.css.map */

www/index.html

@@ -7,6 +7,7 @@
   <meta name="msapplication-tap-highlight" content="no">
   <meta name="format-detection" content="telephone=no">
   <link rel="stylesheet" type="text/css" href="css/main.css">
+  <link rel="stylesheet" type="text/css" href="css/chartist.css">
   <link rel="stylesheet" type="text/css" href="css/bitcoin.com.css">
   <link rel="stylesheet" type="text/css" href="css/icomoon.css">
   <title>Bitcoin.com - Bitcoin.com Wallet</title>
@@ -28,6 +29,8 @@
 
   <script src="lib/ionic.bundle.min.js"></script>
   <script src="lib/angular-components.js"></script>
+  <script src="js/moment.min.js"></script>
+  <script src="js/chartist.min.js"></script>
 
   <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
 

www/views/pricechart.html

@@ -12,7 +12,7 @@
                 <div class="low-price"><span  class="light-yellow">Low:</span><br/>$<span id="low-price">2500</span></div>
             </div>
             <div class="chart">
-            <div class="ct-chart ct-perfect-fourth"></div>
+            <div class="ct-chart"></div>
             </div>
         </div>
   </ion-content>