$(document).ready(function() {
  $.ajax({
     cache: false,
     url: '/data/grafy.json',
     dataType: "JSON",
     success: function(json){
       if($("#puda-chart").length && typeof json["puda-chart"] != 'undefined') {
         chart_render_puda(json["puda-chart"]);
       }
     }
  });

});

function chart_render_puda(data) {
  var areaData = {
    labels: data['labels'],
    datasets: [{
        data: data[0]['datasets']['data'],
        backgroundColor: ['rgba(255, 0, 0, .0)'],
        borderColor: '#ff0000',
        borderWidth: 2,
        fill: true,
        label: data[0]['datasets']['label']
      },
      {
        data: data[1]['datasets']['data'],
        backgroundColor: ['rgba(255, 128, 0, .0)'],
        borderColor: '#ff8000',
        borderWidth: 2,
        fill: true,
        label: data[1]['datasets']['label']
      },
      {
        data: data[2]['datasets']['data'],
        backgroundColor: ['rgba(0, 128, 0, .0)'],
        borderColor: '#008000',
        borderWidth: 2,
        fill: true,
        label: data[2]['datasets']['label']
      },
      {
        data: data[3]['datasets']['data'],
        backgroundColor: ['rgba(103, 103, 103, .0)'],
        borderColor: '#676767',
        borderWidth: 2,
        fill: true,
        label: data[3]['datasets']['label']
      }
    ]
  };
  var areaOptions = {
    responsive: true,
    maintainAspectRatio: true,
    plugins: {
      filler: {
        propagate: false
      }
    },
    scales: {
      xAxes: [{
        display: false,
        ticks: {
          display: true
        },
        gridLines: {
          display: false,
          drawBorder: false,
          color: 'transparent',
          zeroLineColor: '#eeeeee'
        }
      }],
      yAxes: [{
        display: false,
        ticks: {
          display: true,
          autoSkip: false,
          maxRotation: 0,
          stepSize: 100,
          min: Math.min.apply(this, data[0]['datasets']['data']) - 0.5,
          max: Math.max.apply(this, data[0]['datasets']['data']) + 0.5
        },
        gridLines: {
          drawBorder: false
        }
      }]
    },
    legend: {
      display: false
    },
    tooltips: {
      mode: 'index',
      intersect: false,
    },
   hover: {
      mode: 'nearest',
      intersect: true
    },
    elements: {
      line: {
        tension: .35
      },
      point: {
        radius: 3
      }
    }
  }

  var totalSalesCanvas = $("#puda-chart").get(0).getContext("2d");
  var totalSales = new Chart(totalSalesCanvas, {
    type: 'line',
    data: areaData,
    options: areaOptions
  });
}