Script Chart

var Usulantrg = {};
  var prioritas = ['DPP','KPPN','KSPN','Umum'];
  var kd_jenis = ['01','02','03'];
  $(document).ready(function() {
    function chartRUPerkegiatan(target,title,category,type,data,pointTitle) {
      Highcharts.chart(target,{
        chart: {
        type: type
      },
        title: {
        text: pointTitle
      },
        credits: {
        enabled: false
      },
        xAxis: {
        categories: category,
        crosshair: true
      },
        yAxis: {
        min: 0,
        title: {
          text: '(Rupiah)'
        }
      },
        tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>Rp. {point.y}</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
      },
        plotOptions: {
          column: {
            pointPadding: 0.2,
            borderWidth: 0
          },
          series: {
            cursor: 'pointer',
            point: {
              events: {
                click: function () {
                  var tahun = this.series.name;
                  Usulantrg.prioritas = prioritas[this.x];
                  alert(Usulantrg.prioritas);
                  getUsulanPrioritas('2019');
                }
              }
            }
          }
        },
        series: [{
        name: pointTitle,
        data: data
      }]
      });
    }

    function chartRUPerprioritas(target,title,category,type,data,pointTitle) {
      Highcharts.chart(target,{
        chart: {
          type: type
        },
        title: {
          text: pointTitle
        },
        credits: {
          enabled: false
        },
        xAxis: {
          categories: category,
          crosshair: true
        },
        yAxis: {
          min: 0,
          title: {
            text: '(Rupiah)'
          }
        },
        tooltip: {
          headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
          pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
          '<td style="padding:0"><b>Rp. {point.y}</b></td></tr>',
          footerFormat: '</table>',
          shared: true,
          useHTML: true
        },
        plotOptions: {
          column: {
            pointPadding: 0.2,
            borderWidth: 0
          },
          series: {
            cursor: 'pointer',
            point: {
              events: {
                click: function () {
                  var tahun = this.series.name;
                  // Usulantrg.prioritas = prioritas[this.x];
                  // // alert(Usulantrg.prioritas);
                  // getUsulanPrioritas('2019');
                }
              }
            }
          }
        },
        series: [{
          name: pointTitle,
          data: data
        }]
      });
    }

    function normalCurrencyChart(target,type,title,data,max,subtitle) {
      var chartdata = {
        chart: {
        type: type
      },
        title: {
        text: title
      },
        subtitle: {
        text: subtitle,
        style:{
          fontSize:'14px',
          textAlign:'center',
        }

      },
        xAxis: {
        type: 'category',
        labels: {
          style:{
            fontSize:'15px',
            textAlign:'left',
          }
        }
      },
        yAxis: {
        title: {
          text: 'Jumlah'
        },
        max : max
      },
        legend: {
        enabled: false
      },
        credits: {
        enabled: false
      },
        plotOptions: {
          series: {
            borderWidth: 0,
            dataLabels: {
              enabled: true,
              formatter:function() {
                // return '<b>  Rp.'+Highcharts.numberFormat(this.point.y,2,',','.')+'</b>';
                return this.point.name;
              }
            }
          }
        },
        tooltip: {
          headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
          formatter:function() {
            return this.point.name + '<br> Biaya : <b> Rp.'+Highcharts.numberFormat(this.point.y,2,',','.')+'</b>';
          }
        },
        series: [
          {
            "name": "Usulan Berdasarkan Kegiatan",
            "data": data,
            point : {
              events: {
                click: function () {
                  var str = this.x;
                  var ptitle = this.series.data[this.x].name;
                  Usulantrg.kdjenis = kd_jenis[this.x];
                  // alert(Usulantrg.kdjenis);
                  getUsulanKegiatan('2019',ptitle);
                }
              }
            },
          }
        ]
      }
      Highcharts.chart(target,chartdata);
    }

    function getUsulanKegiatan(tahun = '2019',pointTitle) {
      $.ajax({
        type : 'get',
        url : '<?php echo base_url() ?>dashboard/listUsulanKegiatan/'+tahun,
        data : {kdusulan:Usulantrg.kdjenis},
        dataType : 'json',
        success : function (json) {
          $('#rowChartTA').hide();
          $('#rowChartRUK').show();
          chartRUPerkegiatan('chartRUKegiatan','Rupiah Usulan Per Kegiatan',['DPP','KPPN','KSPN','Umum'],'column',json.dak_prioritas,pointTitle[0].toUpperCase() + pointTitle.slice(1));
          console.log(json);
        }
      });
    }

    function getUsulanPrioritas(tahun = '2019') {
      $.ajax({
        type : 'get',
        url : '<?php echo base_url() ?>dashboard/listUsulanPrioritas/'+tahun,
        data : {kdusulan:Usulantrg.kdjenis,prioritas:Usulantrg.prioritas},
        dataType : 'json',
        success : function (json) {
          console.log(json);
          $('#rowChartRUK').hide();
          $('#rowChartRUP').show();
          chartRUPerprioritas('chartRUPrioritas','Rupiah Usulan Per Kegiatan',json.dp_kabkot,'column',json.dp_nominal,Usulantrg.prioritas[0].toUpperCase() + Usulantrg.prioritas.slice(1));
        }
      });
    }

    function getTotal() {
      $.ajax({
        type : 'get',
        url : '<?php echo base_url() ?>/dashboard/total_dak_prioritas',
        dataType : 'json',
        success : function (json) {
          normalCurrencyChart('chartTotalUsulan','pie','Rupiah Total Usulan',json.reguler,3147483647,'');
          normalCurrencyChart('chartTotalAlokasi','pie','Rupiah Total Alokasi',json.penugasan,3147483647,'');
          normalCurrencyChart('chartTotalRealisasi','pie','Rupiah Total Realisasi',json.afirmasi,3147483647,'');
          normalCurrencyChart('chartTotalAll','column','Rupiah Total DAK',json.total.all,4718114255910,'');
        }
      })
    }

    function showChartJumlah(target,type,title,data,max,subtitle) {
      var chartdata = {
      chart: {
        type: type
      },
      title: {
        text: title
      },
      subtitle: {
        text: subtitle
      },
      xAxis: {
        type: 'category',
        labels: {
          style:{
            fontSize:'15px',
            textAlign:'left',
          }
        }
      },
      yAxis: {
        title: {
          text: 'Jumlah'
        },
        max : max
      },
      legend: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      plotOptions: {
        series: {
          borderWidth: 0,
          dataLabels: {
            enabled: true,
            format : '{point.y}'
          }
        }
      },
      tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:,.2f}</b><br/>'
      },
      series: [
        {
          "name": "Usulan Berdasarkan Kegiatan",
          "colorByPoint": false,
          "data": data
        }
      ]
    }
      Highcharts.chart(target,chartdata);
    }

    function showChartRupiah(target,type,title,data,max,subtitle) {
      var chartdata = {
        chart: {
        type: type
      },
        title: {
        text: title
      },
        subtitle: {
        text: subtitle,
        style:{
          fontSize:'14px',
          textAlign:'center',
        }

      },
        xAxis: {
        type: 'category',
        labels: {
          style:{
            fontSize:'15px',
            textAlign:'left',
          }
        }
      },
        yAxis: {
        title: {
          text: 'Jumlah'
        },
        max : max
      },
        legend: {
        enabled: false
      },
        credits: {
        enabled: false
      },
        plotOptions: {
        series: {
          borderWidth: 0,
          dataLabels: {
            enabled: true,
            formatter:function() {
              return '<b> Rp.'+Highcharts.numberFormat(this.point.y,2,',','.')+'</b>';
            }
          }
        }
      },
        tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        formatter:function() {
          return this.point.name + '<br> Biaya : <b> Rp.'+Highcharts.numberFormat(this.point.y,2,',','.')+'</b>';
        }
      },
        series: [
        {
          "colorByPoint": false,
          "data": data
        }
      ],
      }
      Highcharts.chart(target,chartdata);
    }

    function getDataUsulan(tahun = '2018',provinsi = 'all',kabkot = 'all') {
      $.ajax({
        type : 'get',
        url : '<?php echo base_url() ?>index.php/dashboard/dataUsulan/'+provinsi+'/'+tahun+'/'+kabkot,
        dataType : 'json',
        success : function (json) {
          $('.txt_tahun').text(tahun);
          $('#txt_total_r').text('Rp. '+json.total.reguler);
          $('#txt_total_p').text('Rp. '+json.total.penugasan);
          $('#txt_total_a').text('Rp. '+json.total.afirmasi);
          $('#alo_total_a').text('Rp. '+json.total.total);
          showChartJumlah('chart','column','Usulan Kegiatan DPP',json.dpp,700);
          showChartJumlah('chart2','column','Usulan Kegiatan KPPN',json.kppn,700);
          showChartJumlah('chart3','column','Usulan Kegiatan KSPN',json.kspn,700);
          showChartJumlah('chart4','column','Usulan Kegiatan Umum',json.umum,700);
          showChartJumlah('chart6','bar','Jumlah Kegiatan Pengembangan Daya Tarik Wisata',json.dtw,300,'REGULER');
          showChartRupiah('chartdtw','bar','Rupiah Kegiatan Pengembangan Daya Tarik Wisata',json.dtwr,99999999999,'REGULER');
          showChartJumlah('chart8','bar','Jumlah Kegiatan Pengembangan Amenitas',json.amenitas,300,'REGULER');
          showChartRupiah('chartame','bar','Rupiah Kegiatan Pengembangan Amenitas',json.amenitasr,99999999999,'REGULER');
          showChartJumlah('chart03','bar','Jumlah Kegiatan Pembangunan Fasilitas Pendukung Kawasan Pondok/Rumah Wisata',json.penugasan,300,'REGULER');
          showChartRupiah('chart03r','bar','Rupiah Kegiatan Pembangunan Fasilitas Pendukung Kawasan Pondok/Rumah Wisata',json.penugasanr,99999999999,'PENUGASAN');
        }
      });
    }

    getTotal();
    // $.ajax({
  //   type : 'get',
  //   url : '<?php echo base_url() ?>index.php/provinsi/provinsi_usulan',
  //   dataType : 'json',
  //   success : function (json) {
  //     for (var i = 0; i < json.length; i++) {
  //       $('#slcprovinsi').append('<option value="'+json[i].kd_provinsi+'">'+json[i].provinsi+'</option>');
  //     }
  //   }
  // });

    $('#slcprovinsi').change(function() {
    var kd_prov = $('#slcprovinsi').find(":selected").val();
    $("#slckabkot").prop('disabled', false);
    $.ajax({
      type : 'get',
      url : '<?php echo base_url() ?>index.php/kota/kota_per_provinsi/'+kd_prov,
      dataType : 'json',
      success : function (json) {
        $('#slckabkot').html('<option value="all" selected>Semua kabkot</option>');
        for (var i = 0; i < json.length; i++) {
          $('#slckabkot').append('<option value="'+json[i].kd_kabkot+'">'+json[i].kota+'</option>');
        }
      }
    });
  });

    $('#btnfilter').click(function() {
    var tahun = $('#slctahun').find(":selected").text();
    var kd_prov = $('#slcprovinsi').find(":selected").val();
    var kd_kabkot = $('#slckabkot').find(":selected").val();
    getDataUsulan(tahun,kd_prov,kd_kabkot);
  });

    function usulanLoad() {
    $.ajax({
      type : 'get',
      url : '<?php echo base_url() ?>index.php/dashboard/detailUsulan/',
      data : {tahun:tahun},
      dataType : 'json',
      success : function (json) {

      }
    })
  }

    getDataUsulan();
  })