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

    File Name: card-interactive.js

    Description: Interactive cards

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

    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';



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

   *               Interactive Charts                  *

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



  // Live visits from specific countries

  var seriesData = [

    [],

    [],

    [],

    []

  ];

  var random = new Rickshaw.Fixtures.RandomData(150);



  for (var i = 0; i < 150; i++) {

    random.addData(seriesData);

  }



  var liveVisits = $('#live-visits');

  var liveVisitsGraph = new Rickshaw.Graph({

    element: liveVisits.get(0),

    width: liveVisits.width(),

    height: 400,

    renderer: 'area',

    stroke: true,

    series: [{

      color: '#99B898',

      data: seriesData[0],

      name: 'Asia'

    }, {

      color: '#FECEA8',

      data: seriesData[1],

      name: 'Africa'

    }, {

      color: '#FF847C',

      data: seriesData[2],

      name: 'America'

    }, {

      color: '#6C5B7B',

      data: seriesData[3],

      name: 'Europe'

    }]

  });



  liveVisitsGraph.render();



  setInterval(function () {

    random.removeData(seriesData);

    random.addData(seriesData);

    liveVisitsGraph.update();



  }, 2000);



  var hoverDetail = new Rickshaw.Graph.HoverDetail({

    graph: liveVisitsGraph

  });



  var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({

    graph: liveVisitsGraph,

    // legend: legend

  });



  $(window).on('resize', function () {

    liveVisitsGraph.configure({

      width: liveVisits.width()

    });

    liveVisitsGraph.render();

  });



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

  var liveVisitsDoughnut = $("#live-visits-doughnut");



  // Chart Options

  var liveVisitsOptions = {

    responsive: true,

    maintainAspectRatio: false,

    responsiveAnimationDuration: 500,

  };



  // Chart Data

  var liveVisitsData = {

    labels: ["Asia", "Africa", "America", "Europe"],

    datasets: [{

      label: "My First dataset",

      data: [15684, 54789, 89756, 23489],

      backgroundColor: ["#99B898", "#FECEA8", "#FF847C", "#6C5B7B"],

    }]

  };



  var liveVisitsConfig = {

    type: 'doughnut',



    // Chart Options

    options: liveVisitsOptions,



    data: liveVisitsData

  };



  // Create the chart

  var visitsDoughnutChart = new Chart(liveVisitsDoughnut, liveVisitsConfig);





})(window, document, jQuery);

