daily pastebin goal
18%
SHARE
TWEET

Script Chart

a guest Jan 18th, 2019 77 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. var Usulantrg = {};
  2.   var prioritas = ['DPP','KPPN','KSPN','Umum'];
  3.   var kd_jenis = ['01','02','03'];
  4.   $(document).ready(function() {
  5.     function chartRUPerkegiatan(target,title,category,type,data,pointTitle) {
  6.       Highcharts.chart(target,{
  7.         chart: {
  8.         type: type
  9.       },
  10.         title: {
  11.         text: pointTitle
  12.       },
  13.         credits: {
  14.         enabled: false
  15.       },
  16.         xAxis: {
  17.         categories: category,
  18.         crosshair: true
  19.       },
  20.         yAxis: {
  21.         min: 0,
  22.         title: {
  23.           text: '(Rupiah)'
  24.         }
  25.       },
  26.         tooltip: {
  27.         headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
  28.         pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
  29.         '<td style="padding:0"><b>Rp. {point.y}</b></td></tr>',
  30.         footerFormat: '</table>',
  31.         shared: true,
  32.         useHTML: true
  33.       },
  34.         plotOptions: {
  35.           column: {
  36.             pointPadding: 0.2,
  37.             borderWidth: 0
  38.           },
  39.           series: {
  40.             cursor: 'pointer',
  41.             point: {
  42.               events: {
  43.                 click: function () {
  44.                   var tahun = this.series.name;
  45.                   Usulantrg.prioritas = prioritas[this.x];
  46.                   alert(Usulantrg.prioritas);
  47.                   getUsulanPrioritas('2019');
  48.                 }
  49.               }
  50.             }
  51.           }
  52.         },
  53.         series: [{
  54.         name: pointTitle,
  55.         data: data
  56.       }]
  57.       });
  58.     }
  59.  
  60.     function chartRUPerprioritas(target,title,category,type,data,pointTitle) {
  61.       Highcharts.chart(target,{
  62.         chart: {
  63.           type: type
  64.         },
  65.         title: {
  66.           text: pointTitle
  67.         },
  68.         credits: {
  69.           enabled: false
  70.         },
  71.         xAxis: {
  72.           categories: category,
  73.           crosshair: true
  74.         },
  75.         yAxis: {
  76.           min: 0,
  77.           title: {
  78.             text: '(Rupiah)'
  79.           }
  80.         },
  81.         tooltip: {
  82.           headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
  83.           pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
  84.           '<td style="padding:0"><b>Rp. {point.y}</b></td></tr>',
  85.           footerFormat: '</table>',
  86.           shared: true,
  87.           useHTML: true
  88.         },
  89.         plotOptions: {
  90.           column: {
  91.             pointPadding: 0.2,
  92.             borderWidth: 0
  93.           },
  94.           series: {
  95.             cursor: 'pointer',
  96.             point: {
  97.               events: {
  98.                 click: function () {
  99.                   var tahun = this.series.name;
  100.                   // Usulantrg.prioritas = prioritas[this.x];
  101.                   // // alert(Usulantrg.prioritas);
  102.                   // getUsulanPrioritas('2019');
  103.                 }
  104.               }
  105.             }
  106.           }
  107.         },
  108.         series: [{
  109.           name: pointTitle,
  110.           data: data
  111.         }]
  112.       });
  113.     }
  114.  
  115.     function normalCurrencyChart(target,type,title,data,max,subtitle) {
  116.       var chartdata = {
  117.         chart: {
  118.         type: type
  119.       },
  120.         title: {
  121.         text: title
  122.       },
  123.         subtitle: {
  124.         text: subtitle,
  125.         style:{
  126.           fontSize:'14px',
  127.           textAlign:'center',
  128.         }
  129.  
  130.       },
  131.         xAxis: {
  132.         type: 'category',
  133.         labels: {
  134.           style:{
  135.             fontSize:'15px',
  136.             textAlign:'left',
  137.           }
  138.         }
  139.       },
  140.         yAxis: {
  141.         title: {
  142.           text: 'Jumlah'
  143.         },
  144.         max : max
  145.       },
  146.         legend: {
  147.         enabled: false
  148.       },
  149.         credits: {
  150.         enabled: false
  151.       },
  152.         plotOptions: {
  153.           series: {
  154.             borderWidth: 0,
  155.             dataLabels: {
  156.               enabled: true,
  157.               formatter:function() {
  158.                 // return '<b>  Rp.'+Highcharts.numberFormat(this.point.y,2,',','.')+'</b>';
  159.                 return this.point.name;
  160.               }
  161.             }
  162.           }
  163.         },
  164.         tooltip: {
  165.           headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
  166.           formatter:function() {
  167.             return this.point.name + '<br> Biaya : <b> Rp.'+Highcharts.numberFormat(this.point.y,2,',','.')+'</b>';
  168.           }
  169.         },
  170.         series: [
  171.           {
  172.             "name": "Usulan Berdasarkan Kegiatan",
  173.             "data": data,
  174.             point : {
  175.               events: {
  176.                 click: function () {
  177.                   var str = this.x;
  178.                   var ptitle = this.series.data[this.x].name;
  179.                   Usulantrg.kdjenis = kd_jenis[this.x];
  180.                   // alert(Usulantrg.kdjenis);
  181.                   getUsulanKegiatan('2019',ptitle);
  182.                 }
  183.               }
  184.             },
  185.           }
  186.         ]
  187.       }
  188.       Highcharts.chart(target,chartdata);
  189.     }
  190.  
  191.     function getUsulanKegiatan(tahun = '2019',pointTitle) {
  192.       $.ajax({
  193.         type : 'get',
  194.         url : '<?php echo base_url() ?>dashboard/listUsulanKegiatan/'+tahun,
  195.         data : {kdusulan:Usulantrg.kdjenis},
  196.         dataType : 'json',
  197.         success : function (json) {
  198.           $('#rowChartTA').hide();
  199.           $('#rowChartRUK').show();
  200.           chartRUPerkegiatan('chartRUKegiatan','Rupiah Usulan Per Kegiatan',['DPP','KPPN','KSPN','Umum'],'column',json.dak_prioritas,pointTitle[0].toUpperCase() + pointTitle.slice(1));
  201.           console.log(json);
  202.         }
  203.       });
  204.     }
  205.  
  206.     function getUsulanPrioritas(tahun = '2019') {
  207.       $.ajax({
  208.         type : 'get',
  209.         url : '<?php echo base_url() ?>dashboard/listUsulanPrioritas/'+tahun,
  210.         data : {kdusulan:Usulantrg.kdjenis,prioritas:Usulantrg.prioritas},
  211.         dataType : 'json',
  212.         success : function (json) {
  213.           console.log(json);
  214.           $('#rowChartRUK').hide();
  215.           $('#rowChartRUP').show();
  216.           chartRUPerprioritas('chartRUPrioritas','Rupiah Usulan Per Kegiatan',json.dp_kabkot,'column',json.dp_nominal,Usulantrg.prioritas[0].toUpperCase() + Usulantrg.prioritas.slice(1));
  217.         }
  218.       });
  219.     }
  220.  
  221.     function getTotal() {
  222.       $.ajax({
  223.         type : 'get',
  224.         url : '<?php echo base_url() ?>/dashboard/total_dak_prioritas',
  225.         dataType : 'json',
  226.         success : function (json) {
  227.           normalCurrencyChart('chartTotalUsulan','pie','Rupiah Total Usulan',json.reguler,3147483647,'');
  228.           normalCurrencyChart('chartTotalAlokasi','pie','Rupiah Total Alokasi',json.penugasan,3147483647,'');
  229.           normalCurrencyChart('chartTotalRealisasi','pie','Rupiah Total Realisasi',json.afirmasi,3147483647,'');
  230.           normalCurrencyChart('chartTotalAll','column','Rupiah Total DAK',json.total.all,4718114255910,'');
  231.         }
  232.       })
  233.     }
  234.  
  235.     function showChartJumlah(target,type,title,data,max,subtitle) {
  236.       var chartdata = {
  237.       chart: {
  238.         type: type
  239.       },
  240.       title: {
  241.         text: title
  242.       },
  243.       subtitle: {
  244.         text: subtitle
  245.       },
  246.       xAxis: {
  247.         type: 'category',
  248.         labels: {
  249.           style:{
  250.             fontSize:'15px',
  251.             textAlign:'left',
  252.           }
  253.         }
  254.       },
  255.       yAxis: {
  256.         title: {
  257.           text: 'Jumlah'
  258.         },
  259.         max : max
  260.       },
  261.       legend: {
  262.         enabled: false
  263.       },
  264.       credits: {
  265.         enabled: false
  266.       },
  267.       plotOptions: {
  268.         series: {
  269.           borderWidth: 0,
  270.           dataLabels: {
  271.             enabled: true,
  272.             format : '{point.y}'
  273.           }
  274.         }
  275.       },
  276.       tooltip: {
  277.         headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
  278.         pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:,.2f}</b><br/>'
  279.       },
  280.       series: [
  281.         {
  282.           "name": "Usulan Berdasarkan Kegiatan",
  283.           "colorByPoint": false,
  284.           "data": data
  285.         }
  286.       ]
  287.     }
  288.       Highcharts.chart(target,chartdata);
  289.     }
  290.  
  291.     function showChartRupiah(target,type,title,data,max,subtitle) {
  292.       var chartdata = {
  293.         chart: {
  294.         type: type
  295.       },
  296.         title: {
  297.         text: title
  298.       },
  299.         subtitle: {
  300.         text: subtitle,
  301.         style:{
  302.           fontSize:'14px',
  303.           textAlign:'center',
  304.         }
  305.  
  306.       },
  307.         xAxis: {
  308.         type: 'category',
  309.         labels: {
  310.           style:{
  311.             fontSize:'15px',
  312.             textAlign:'left',
  313.           }
  314.         }
  315.       },
  316.         yAxis: {
  317.         title: {
  318.           text: 'Jumlah'
  319.         },
  320.         max : max
  321.       },
  322.         legend: {
  323.         enabled: false
  324.       },
  325.         credits: {
  326.         enabled: false
  327.       },
  328.         plotOptions: {
  329.         series: {
  330.           borderWidth: 0,
  331.           dataLabels: {
  332.             enabled: true,
  333.             formatter:function() {
  334.               return '<b> Rp.'+Highcharts.numberFormat(this.point.y,2,',','.')+'</b>';
  335.             }
  336.           }
  337.         }
  338.       },
  339.         tooltip: {
  340.         headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
  341.         formatter:function() {
  342.           return this.point.name + '<br> Biaya : <b> Rp.'+Highcharts.numberFormat(this.point.y,2,',','.')+'</b>';
  343.         }
  344.       },
  345.         series: [
  346.         {
  347.           "colorByPoint": false,
  348.           "data": data
  349.         }
  350.       ],
  351.       }
  352.       Highcharts.chart(target,chartdata);
  353.     }
  354.  
  355.     function getDataUsulan(tahun = '2018',provinsi = 'all',kabkot = 'all') {
  356.       $.ajax({
  357.         type : 'get',
  358.         url : '<?php echo base_url() ?>index.php/dashboard/dataUsulan/'+provinsi+'/'+tahun+'/'+kabkot,
  359.         dataType : 'json',
  360.         success : function (json) {
  361.           $('.txt_tahun').text(tahun);
  362.           $('#txt_total_r').text('Rp. '+json.total.reguler);
  363.           $('#txt_total_p').text('Rp. '+json.total.penugasan);
  364.           $('#txt_total_a').text('Rp. '+json.total.afirmasi);
  365.           $('#alo_total_a').text('Rp. '+json.total.total);
  366.           showChartJumlah('chart','column','Usulan Kegiatan DPP',json.dpp,700);
  367.           showChartJumlah('chart2','column','Usulan Kegiatan KPPN',json.kppn,700);
  368.           showChartJumlah('chart3','column','Usulan Kegiatan KSPN',json.kspn,700);
  369.           showChartJumlah('chart4','column','Usulan Kegiatan Umum',json.umum,700);
  370.           showChartJumlah('chart6','bar','Jumlah Kegiatan Pengembangan Daya Tarik Wisata',json.dtw,300,'REGULER');
  371.           showChartRupiah('chartdtw','bar','Rupiah Kegiatan Pengembangan Daya Tarik Wisata',json.dtwr,99999999999,'REGULER');
  372.           showChartJumlah('chart8','bar','Jumlah Kegiatan Pengembangan Amenitas',json.amenitas,300,'REGULER');
  373.           showChartRupiah('chartame','bar','Rupiah Kegiatan Pengembangan Amenitas',json.amenitasr,99999999999,'REGULER');
  374.           showChartJumlah('chart03','bar','Jumlah Kegiatan Pembangunan Fasilitas Pendukung Kawasan Pondok/Rumah Wisata',json.penugasan,300,'REGULER');
  375.           showChartRupiah('chart03r','bar','Rupiah Kegiatan Pembangunan Fasilitas Pendukung Kawasan Pondok/Rumah Wisata',json.penugasanr,99999999999,'PENUGASAN');
  376.         }
  377.       });
  378.     }
  379.  
  380.     getTotal();
  381.     // $.ajax({
  382.   //   type : 'get',
  383.   //   url : '<?php echo base_url() ?>index.php/provinsi/provinsi_usulan',
  384.   //   dataType : 'json',
  385.   //   success : function (json) {
  386.   //     for (var i = 0; i < json.length; i++) {
  387.   //       $('#slcprovinsi').append('<option value="'+json[i].kd_provinsi+'">'+json[i].provinsi+'</option>');
  388.   //     }
  389.   //   }
  390.   // });
  391.  
  392.     $('#slcprovinsi').change(function() {
  393.     var kd_prov = $('#slcprovinsi').find(":selected").val();
  394.     $("#slckabkot").prop('disabled', false);
  395.     $.ajax({
  396.       type : 'get',
  397.       url : '<?php echo base_url() ?>index.php/kota/kota_per_provinsi/'+kd_prov,
  398.       dataType : 'json',
  399.       success : function (json) {
  400.         $('#slckabkot').html('<option value="all" selected>Semua kabkot</option>');
  401.         for (var i = 0; i < json.length; i++) {
  402.           $('#slckabkot').append('<option value="'+json[i].kd_kabkot+'">'+json[i].kota+'</option>');
  403.         }
  404.       }
  405.     });
  406.   });
  407.  
  408.     $('#btnfilter').click(function() {
  409.     var tahun = $('#slctahun').find(":selected").text();
  410.     var kd_prov = $('#slcprovinsi').find(":selected").val();
  411.     var kd_kabkot = $('#slckabkot').find(":selected").val();
  412.     getDataUsulan(tahun,kd_prov,kd_kabkot);
  413.   });
  414.  
  415.     function usulanLoad() {
  416.     $.ajax({
  417.       type : 'get',
  418.       url : '<?php echo base_url() ?>index.php/dashboard/detailUsulan/',
  419.       data : {tahun:tahun},
  420.       dataType : 'json',
  421.       success : function (json) {
  422.  
  423.       }
  424.     })
  425.   }
  426.  
  427.     getDataUsulan();
  428.   })
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top