Modifikasi Chart di Highchart - Contohnya Credits

highchart


Modif chart in highchart:

- Hidden credits:

            credits: {
                enabled: false
            }

Set globalnya seperti berikut:

     Highcharts.theme = {
         credits: {
             enabled: true,
             text : "GRMS",
             href: "http://grms.jatengprov.go.id"
         }
     };
     Highcharts.setOptions(Highcharts.theme);


- Hidden title

            title: {
                text: 'Rencana Pendapatan dan Belanja Daerah',
                style: {
                    display: 'none'
                }
            }


- Modif tooltips:

            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f} %</b>'
            },


- Legend:
legend: {
                enabled: true,
                layout: 'vertical',
                align: 'right',
                width: 220,
                x: 0,
                y: 100,
                verticalAlign: 'top',
                borderWidth: 0,
                useHTML: true,
                labelFormatter: function () {
                    return '<div style="width:200px"><span style="float:left; font-weight: bold;">' + this.name + '</span><span style="float:right">' + this.y + '%</span></div>';
                },
                title: {
                    text: 'KETERANGAN',
                    style: {
                        fontWeight: 'bold'
                    }
                }
            }


- Serries:

            series: [{
                    type: 'pie',
                    name: 'Besar',
                    cursor: 'pointer',
                    data: [
                        {name: 'Pendapatan',
                            color: '#90ed7d',
                            y: 60,
                            events: {
                                click: function (event, i) {
                                    $.ajax({
                                        type: "POST",
                                        cache: false,
                                        url: "<?php echo base_url('skpd/dashboard/detail_keuangan/sesuai') ?>",
                                        data: $(this).serializeArray(),
                                        success: function (data) {
                                            $.fancybox(data, {
                                                openEffect: 'fade',
                                                closeEffect: 'elastic',
                                                maxWidth: "90%"
                                            });
                                        }
                                    });
                                }
                            }
                        },
                        {name: 'Belanja Langsung',
                            color: '#f45b5b',
                            y: 15,
                            events: {
                                click: function (event, i) {
                                    $.ajax({
                                        type: "POST",
                                        cache: false,
                                        url: "<?php echo base_url('skpd/dashboard/detail_keuangan/sesuai') ?>",
                                        data: $(this).serializeArray(),
                                        success: function (data) {
                                            $.fancybox(data, {
                                                openEffect: 'fade',
                                                closeEffect: 'elastic',
                                                maxWidth: "90%"
                                            });
                                        }
                                    });
                                }
                            }
                        }
                    ]
                }]


- Gradient:
{
  chart: {
     backgroundColor: '#FCFFC5',
     polar: true,
     type: 'line'
  }
}

ganti ke


{

  chart: {

    backgroundColor: {

       linearGradient: [0, 0, 500, 500],

       stops: [

         [0, 'rgb(255, 255, 255)'],

         [1, 'rgb(200, 200, 255)']

       ]

     },

     polar: true,

     type: 'line'

  }

}

- Url:
series: [{
                    name: 'Batch',
                    URLs: ['www.google.com', null, 'www.yahoo.com'], // pass in array of URLs
                    data: [25.50, 45, 29.50],
                    color: '#b8ecce',
                    point: {
                        events: {
                            click: function () {
                                var someURL = this.series.userOptions.URLs[this.x]; // onclick get the x index and use it to find the URL
                                if (someURL)
                                    window.open('http://' + someURL);
                            }
                        }
                    }
                }]




Sekian, terimakasih atas kunjungannya.
Salam,
PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.


EmoticonEmoticon