highchart
Showing posts with label highchart. Show all posts
Showing posts with label highchart. 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.

Subscribe to: Posts (Atom)