chart
Showing posts with label chart. Show all posts
Showing posts with label chart. Show all posts

Bagaimana Cara Menampilkan Multi tootips di Highcharts?

Add Comment
highcharts




Di bawah ini adalah cara untuk menampilkan multi tootips di Highcharts.

Contoh 1:
tooltip: {
        formatter: function() {
            var s = [];

            $.each(this.points, function(i, point) {
                s.push('<span style="color:#D31B22;font-weight:bold;">'+ point.series.name +' : '+
                    point.y +'<span>');
            });

            return s.join(' and ');
        },
        shared: true
    }


Contoh 2:
tooltip: {
    shared: false,
    formatter: function() {
        var text = '';
        if(this.series.name == 'MSFT') {
            text = this.x + ': ' + this.series.name +
                   '<br> $' + Highcharts.numberFormat(this.y, 0);
        } else {
            text = 'In ' + this.x + ' the median value was' + this.median +
                   'and the total $' + Highcharts.numberFormat(this.y, 0);
        }
        return text;
    }
}




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

Cara Membuat Line Chart Menggunakan Highchart Versi 2

Add Comment
highchart



Dari pada ribet, saya contohkan bagaimana membuat line chart dengan highchart-nya.

//CSS
<link href="jquery-ui.min.css" rel="stylesheet">

//VIEW
<div id="chart"></div>

//JQUERY & JAVASCRIPT
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript" src="exporting.js"></script>

<script type="text/javascript">
//progres fisik dan keuangan theme
                                $(function () {
                                    Highcharts.createElement('link', {
                                        href: '//fonts.googleapis.com/css?family=Unica+One',
                                        rel: 'stylesheet',
                                        type: 'text/css'
                                    }, null, document.getElementsByTagName('head')[0]);

                                    Highcharts.theme = {
                                        colors: ["#2b908f", "#90ee7e"],
                                        chart: {
                                            type: 'areaspline',
                                            backgroundColor: {
                                                linearGradient: {x1: 0, y1: 0, x2: 1, y2: 1},
                                                stops: [
                                                    [0, '#395168']
                                                ]
                                            },
                                            plotBorderColor: '#606063'
                                        },
                                        title: {
                                            style: {
                                                color: '#E0E0E3',
                                                textTransform: 'uppercase',
                                                fontSize: '20px'
                                            }
                                        },
                                        subtitle: {
                                            style: {
                                                color: '#E0E0E3',
                                                textTransform: 'uppercase'
                                            }
                                        },
                                        xAxis: {
                                            gridLineColor: '#707073',
                                            labels: {
                                                style: {
                                                    color: '#E0E0E3'
                                                }
                                            },
                                            lineColor: '#707073',
                                            minorGridLineColor: '#505053',
                                            tickColor: '#707073',
                                            title: {
                                                style: {
                                                    color: '#A0A0A3'

                                                }
                                            }
                                        },
                                        yAxis: {
                                            gridLineColor: '#707073',
                                            labels: {
                                                style: {
                                                    color: '#E0E0E3'
                                                }
                                            },
                                            lineColor: '#707073',
                                            minorGridLineColor: '#505053',
                                            tickColor: '#707073',
                                            tickWidth: 1,
                                            title: {
                                                style: {
                                                    color: '#A0A0A3'
                                                }
                                            }
                                        },
                                        tooltip: {
                                            valueSuffix: ' %',
                                            backgroundColor: 'rgba(0, 0, 0, 0.85)',
                                            style: {
                                                color: '#F0F0F0'
                                            }
                                        },
                                        plotOptions: {
                                            series: {
                                                dataLabels: {
                                                    color: '#B0B0B3'
                                                },
                                                marker: {
                                                    lineColor: '#333'
                                                }
                                            },
                                            boxplot: {
                                                fillColor: '#505053'
                                            },
                                            candlestick: {
                                                lineColor: 'white'
                                            },
                                            errorbar: {
                                                color: 'white'
                                            },
                                            areaspline: {
                                                fillOpacity: 0.3
                                            }
                                        },
                                        legend: {
                                            itemStyle: {
                                                color: '#E0E0E3'
                                            },
                                            itemHoverStyle: {
                                                color: '#FFF'
                                            },
                                            itemHiddenStyle: {
                                                color: '#606063'
                                            }
                                        },
                                        credits: {
                                            enabled: false
                                        },
                                        title: {
                                            text: '',
                                            style: {
                                                display: 'none'
                                            }
                                        },
                                        // special colors for some of the
                                        legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
                                        background2: '#505053',
                                        dataLabelsColor: '#B0B0B3',
                                        textColor: '#C0C0C0',
                                        contrastTextColor: '#F0F0F3',
                                        maskColor: 'rgba(255,255,255,0.3)'
                                    };
                                    Highcharts.setOptions(Highcharts.theme);

                                    //progres fisik
                                    var chart = new Highcharts.Chart({
                                        chart: {
                                            renderTo: 'chart_progres_realisasi_fisik'
                                        },
                                        legend: {
                                            layout: 'vertical',
                                            align: 'left',
                                            verticalAlign: 'top',
                                            x: 150,
                                            y: 100,
                                            floating: true,
                                            borderWidth: 1,
                                            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
                                        },
                                        xAxis: {
                                            categories: [
                                                'Jan',
                                                'Feb',
                                                'Mar',
                                                'Apr',
                                                'Mei',
                                                'Jun',
                                                'Jul',
                                                'Agt',
                                                'Sep',
                                                'Okt',
                                                'Nov',
                                                'Des'
                                            ]
                                        },
                                        yAxis: {
                                            title: {
                                                text: 'Progres (%)'
                                            }
                                        },
                                        series: [{
                                                name: 'Target',
                                                data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 100, 100]
                                            }, {
                                                name: 'Realisasi',
                                                data: [15, 15, 25, 50, 50, 55, 60, 70, 80, 100, 100, 100]
                                            }]
                                    });
</script>


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

Highcharts :Uncaught TypeError: $(...).highcharts is not a function

Add Comment
highchart



Jika terjadi error "Uncaught TypeError: $(…).highcharts is not a function", maka fungsi javascriptnya perlu dirubah. Lihat contoh di bawah ini!

$('#container').highcharts({
        colors: ["#7cb5ec", "#f7a35c"],
        chart: {
            type: 'column'
        },
        /* ... */

ganti menjadi seperti ini,

var chart = new Highcharts.Chart({
                colors: ["#7cb5ec", "#f7a35c"],
                chart: {
                    type: 'column',
                    renderTo: 'container'
                },
                /* ... */



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

Cara Membuat Line Chart Menggunakan Highchart

Add Comment
highchart



Dari pada ribet, saya contohkan bagaimana membuat line chart dengan highchart-nya.

//CSS
<link href="jquery-ui.min.css" rel="stylesheet">

//VIEW
<div id="chart"></div>

//JQUERY & JAVASCRIPT
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript" src="highcharts-3d.js"></script>
<script type="text/javascript" src="exporting.js"></script>

<script type="text/javascript">
    $(function () {
        $('#chart').highcharts({

            credits: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            colors: ["#2b908f", "#90ee7e"],
            chart: {
                backgroundColor: {
                    linearGradient: {x1: 0, y1: 0, x2: 1, y2: 1},
                    stops: [
                        [0, '#395168']
                    ]
                },
                plotBorderColor: '#606063'
            },
            title: {
                text: 'Realisasi Fisik',
                style: {
                    fontWeight: 'normal',
                    color: '#E0E0E3',
//                    textTransform: 'uppercase'
                }
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                gridLineColor: '#707073',
                labels: {
                    style: {
                        color: '#E0E0E3'
                    }
                },
                lineColor: '#707073',
                minorGridLineColor: '#505053',
                tickColor: '#707073',
                title: {
                    style: {
                        color: '#A0A0A3'

                    }
                }
            },
            yAxis: {
                gridLineColor: '#707073',
                labels: {
                    style: {
                        color: '#E0E0E3'
                    }
                },
                lineColor: '#707073',
                minorGridLineColor: '#505053',
                tickColor: '#707073',
                tickWidth: 1,
                title: {
                    text: 'Progres (%)',
                    style: {
                        color: '#A0A0A3'
                    }
                }
            },
            legend: {
                itemStyle: {
                    font: '9pt Trebuchet MS, Verdana, sans-serif',
                    color: '#A0A0A0'
                },
                itemHoverStyle: {
                    color: '#FFF'
                },
                itemHiddenStyle: {
                    color: '#444'
                },
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom',
                borderWidth: 0
            },
            tooltip: {
                backgroundColor: 'rgba(0, 0, 0, 0.85)',
                style: {
                    color: '#F0F0F0'
                }
            },
            plotOptions: {
                series: {
                    dataLabels: {
                        color: '#B0B0B3'
                    },
                    marker: {
                        lineColor: '#333'
                    }
                },
                boxplot: {
                    fillColor: '#505053'
                },
                candlestick: {
                    lineColor: 'white'
                },
                errorbar: {
                    color: 'white'
                }
            },
            labels: {
                style: {
                    color: '#707073'
                }
            },
            drilldown: {
                activeAxisLabelStyle: {
                    color: '#F0F0F3'
                },
                activeDataLabelStyle: {
                    color: '#F0F0F3'
                }
            },
            series: [{
                    name: 'Target (%)',
                    data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 100, 100]
                }, {
                    name: 'Realisasi (%)',
                    data: [15, 15, 25, 50, 50, 55, 60, 70, 80, 100, 100, 100]
                }]
        });
    });
</script>


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

Cara Membuat Pie Chart Menggunakan Highchart

Add Comment
highchart




Dari pada ribet, saya contohkan bagaimana membuat pie chart dengan highchart disertai link atau URL-nya.

//CSS
<link href="jquery-ui.min.css" rel="stylesheet">

//VIEW
<div id="chart"></div>

//JQUERY & JAVASCRIPT
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript" src="highcharts-3d.js"></script>
<script type="text/javascript" src="exporting.js"></script>

<script type="text/javascript">
    $(function () {
        $('#chart').highcharts({
            credits: {
                enabled: false
            },
            title: {
                text: '',
                style: {
                    display: 'none'
                }
            },
//            title: {
//                style: {
//                    display: 'none'
//                },
//                text: 'REKAPITULASI LAPORAN PROGRES KEUANGAN',
//                style: {
//                    fontWeight: 'bold',
//                    color: '#E0E0E3',
//                    textTransform: 'uppercase'
//                }
//            },
            tooltip: {
                valueSuffix: ',-'
            },
            chart: {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 45
                },
                backgroundColor: {
                    linearGradient: {x1: 0, y1: 0, x2: 1, y2: 1},
                    stops: [
                        [0, '#395168']
                    ]
                },
                plotBorderColor: '#606063'
            },
            plotOptions: {
                pie: {
                    innerSize: 100,
                    depth: 45
                },
                dataLabels: {
                    color: '#B0B0B3'
                },
                marker: {
                    lineColor: '#333'
                },
                boxplot: {
                    fillColor: '#505053'
                },
                candlestick: {
                    lineColor: 'white'
                },
                errorbar: {
                    color: 'white'
                }
            },
            exporting: {
                enabled: false
            },
            series: [{
                    type: 'pie',
                    name: 'Rp',
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function (e) {
                                location.href = e.point.url;
                                e.preventDefault();
                            }
                        }
                    },
                    data: [
                        {name: 'Pendapatan',
                            color: '#31C0BE',
                            y: 10000000,
                            url: 'http://phpaku.blogspot.com/#pendapatan'
                        },
                        {name: 'Belanja Langsung',
                            color: '#D58665',
                            y: 6000000,
                            url: 'http://phpaku.blogspot.com/#pendapatan'
                        },
                        {name: 'Belanja Tidak Langsung',
                            color: '#37619d',
                            y: 2500000,
                            url: 'http://phpaku.blogspot.com/#pendapatan'
                        }
                    ]
                }]
        });
    });
</script>


Sumber: highcharts[dot]com
Sekian, terimakasih atas kunjungannya.
Salam,
PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.
Subscribe to: Posts (Atom)