/*=========================================================================================

    File Name: crypto-currency.js

    Description: intialize dashboard crypto

    ----------------------------------------------------------------------------------------

    Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template

    Author: Pixinvent

    Author URL: http://www.themeforest.net/user/pixinvent

==========================================================================================*/



(function (window, document, $) {

  'use strict';



  /********************************************

   *               BTC Card                    *

   ********************************************/

  //Get the context of the Chart canvas element we want to select

  var btcChartjs = document.getElementById("btc-chartjs").getContext("2d");

  // Create Linear Gradient

  var blue_trans_gradient = btcChartjs.createLinearGradient(0, 0, 0, 100);

  blue_trans_gradient.addColorStop(0, 'rgba(255, 145, 73,0.4)');

  blue_trans_gradient.addColorStop(1, 'rgba(255,255,255,0)');

  // Chart Options

  var BTCStats = {

    responsive: true,

    maintainAspectRatio: false,

    datasetStrokeWidth: 3,

    pointDotStrokeWidth: 4,

    tooltipFillColor: "rgba(255, 145, 73,0.8)",

    legend: {

      display: false,

    },

    hover: {

      mode: 'label'

    },

    scales: {

      xAxes: [{

        display: false,

      }],

      yAxes: [{

        display: false,

        ticks: {

          min: 0,

          max: 85

        },

      }]

    },

    title: {

      display: false,

      fontColor: "#FFF",

      fullWidth: false,

      fontSize: 30,

      text: '52%'

    }

  };



  // Chart Data

  var BTCMonthData = {

    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],

    datasets: [{

      label: "BTC",

      data: [20, 18, 35, 60, 38, 40, 70],

      backgroundColor: blue_trans_gradient,

      borderColor: "#FF9149",

      borderWidth: 1.5,

      strokeColor: "#FF9149",

      pointRadius: 0,

    }]

  };



  var BTCCardconfig = {

    type: 'line',



    // Chart Options

    options: BTCStats,



    // Chart Data

    data: BTCMonthData

  };



  // Create the chart

  var BTCAreaChart = new Chart(btcChartjs, BTCCardconfig);





  /********************************************

   *               BTC Card1                   *

   ********************************************/

  //Get the context of the Chart canvas element we want to select

  var btcChartjs = document.getElementById("btc-chartjs1").getContext("2d");

  // Create Linear Gradient

  var blue_trans_gradient = btcChartjs.createLinearGradient(0, 0, 0, 100);

  blue_trans_gradient.addColorStop(0, 'rgba(255, 145, 73,0.4)');

  blue_trans_gradient.addColorStop(1, 'rgba(255,255,255,0)');

  // Chart Options

  var BTCStats = {

    responsive: true,

    maintainAspectRatio: false,

    datasetStrokeWidth: 3,

    pointDotStrokeWidth: 4,

    tooltipFillColor: "rgba(255, 145, 73,0.8)",

    legend: {

      display: false,

    },

    hover: {

      mode: 'label'

    },

    scales: {

      xAxes: [{

        display: false,

      }],

      yAxes: [{

        display: false,

        ticks: {

          min: 0,

          max: 85

        },

      }]

    },

    title: {

      display: false,

      fontColor: "#FFF",

      fullWidth: false,

      fontSize: 30,

      text: '52%'

    }

  };



  // Chart Data

  var BTCMonthData = {

    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],

    datasets: [{

      label: "BTC",

      data: [30, 70, 50, 40, 60, 30, 20],

      backgroundColor: blue_trans_gradient,

      borderColor: "#FF9149",

      borderWidth: 1.5,

      strokeColor: "#FF9149",

      pointRadius: 0,

    }]

  };



  var BTCCardconfig = {

    type: 'line',



    // Chart Options

    options: BTCStats,



    // Chart Data

    data: BTCMonthData

  };



  // Create the chart

  var BTCAreaChart = new Chart(btcChartjs, BTCCardconfig);









  /********************************************

   *               ETH Card                    *

   ********************************************/

  //Get the context of the Chart canvas element we want to select

  var ethChartjs = document.getElementById("eth-chartjs").getContext("2d");

  // Create Linear Gradient

  var blue_trans_gradient = ethChartjs.createLinearGradient(0, 0, 0, 100);

  blue_trans_gradient.addColorStop(0, 'rgba(120, 144, 156,0.4)');

  blue_trans_gradient.addColorStop(1, 'rgba(255,255,255,0)');

  // Chart Options

  var ETHStats = {

    responsive: true,

    maintainAspectRatio: false,

    datasetStrokeWidth: 3,

    pointDotStrokeWidth: 4,

    tooltipFillColor: "rgba(120, 144, 156,0.8)",

    legend: {

      display: false,

    },

    hover: {

      mode: 'label'

    },

    scales: {

      xAxes: [{

        display: false,

      }],

      yAxes: [{

        display: false,

        ticks: {

          min: 0,

          max: 85

        },

      }]

    },

    title: {

      display: false,

      fontColor: "#FFF",

      fullWidth: false,

      fontSize: 30,

      text: '52%'

    }

  };



  // Chart Data

  var ETHMonthData = {

    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],

    datasets: [{

      label: "ETH",

      data: [40, 30, 60, 40, 45, 30, 60],

      backgroundColor: blue_trans_gradient,

      borderColor: "#78909C",

      borderWidth: 1.5,

      strokeColor: "#78909C",

      pointRadius: 0,

    }]

  };



  var ETHCardconfig = {

    type: 'line',

    // Chart Options

    options: ETHStats,

    // Chart Data

    data: ETHMonthData

  };



  // Create the chart

  var ETHAreaChart = new Chart(ethChartjs, ETHCardconfig);



  /********************************************

   *               XRP Card                    *

   ********************************************/

  //Get the context of the Chart canvas element we want to select

  var xrpChartjs = document.getElementById("xrp-chartjs").getContext("2d");





  // Create Linear Gradient

  var blue_trans_gradient = xrpChartjs.createLinearGradient(0, 0, 0, 100);

  blue_trans_gradient.addColorStop(0, 'rgba(30,159,242,0.4)');

  blue_trans_gradient.addColorStop(1, 'rgba(255,255,255,0)');

  // Chart Options

  var XRPStats = {

    responsive: true,

    maintainAspectRatio: false,

    datasetStrokeWidth: 3,

    pointDotStrokeWidth: 4,

    tooltipFillColor: "rgba(30,159,242,0.8)",

    legend: {

      display: false,

    },

    hover: {

      mode: 'label'

    },

    scales: {

      xAxes: [{

        display: false,

      }],

      yAxes: [{

        display: false,

        ticks: {

          min: 0,

          max: 85

        },

      }]

    },

    title: {

      display: false,

      fontColor: "#FFF",

      fullWidth: false,

      fontSize: 30,

      text: '52%'

    }

  };



  // Chart Data

  var XRPMonthData = {

    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],

    datasets: [{

      label: "XRP",

      data: [70, 20, 35, 60, 20, 40, 30],

      backgroundColor: blue_trans_gradient,

      borderColor: "#1E9FF2",

      borderWidth: 1.5,

      strokeColor: "#1E9FF2",

      pointRadius: 0,

    }]

  };



  var XRPCardconfig = {

    type: 'line',



    // Chart Options

    options: XRPStats,



    // Chart Data

    data: XRPMonthData

  };



  // Create the chart

  var XRPAreaChart = new Chart(xrpChartjs, XRPCardconfig);

})(window, document, jQuery);

