Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Ground Controller Lvl 1
Message 1 of 1

Graph Customization Issue (JS)

I have some issue realted to the graph customization on this page: https://besthostadvisor.com/ - here is the screenshot of the graph: http://prntscr.com/oah6nf


Here is the JS code of the graph:

// Graph
    if( $('#chart').length ) {
        if( $(window).width() > 1023 ) {
            var pointWidth = 56
            var tickPixelInterval = 50
        }

        if( $(window).width() > 767 && $(window).width() < 1024 ) {
            var pointWidth = 41
            var tickPixelInterval = 50
        }

        if( $(window).width() > 479 && $(window).width() < 768 ) {
            var pointWidth = 31
            var tickPixelInterval = 45
        }

        if( $(window).width() < 480 ) {
            var pointWidth = 18
            var tickPixelInterval = 30
        }

        Highcharts.chart('chart', {
            chart: {
                type: 'column',
                spacing:[10, 0, 10, 5]
            },
            colors: ['#F5762B'],
            title: {
                text: ''
            },
            xAxis: {
                type: 'category',
                lineColor: '#E7E7E7',
                tickColor: '#fff',
                labels: {
                    rotation: -45,
                    style: {
                        color: '#7F7F7F',
                        fontFamily: 'ProximaNova'
                    }
                }
            },
            yAxis: {
                min: 0,
                max: 2300000,
                tickPixelInterval: tickPixelInterval,
                lineColor: '#E7E7E7',
                title: {
                    text: ''
                },
                labels: {
                    format: '{value}',
                    formatter: function(value) {
                        var value = this.value

                        with (Math) {
                            var base = floor(log(abs(value))/log(1000));
                            var suffix = 'kmb'[base-1];
                            return suffix ? String(value/pow(1000,base)).substring(0,4)+suffix : ''+value;
                        }
                    },
                    style: {
                        color: '#7F7F7F',
                        fontFamily: 'ProximaNova'
                    }
                }
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                series: {
                    pointWidth: pointWidth
                }
            },
            tooltip: {
                useHTML: true,
                headerFormat: '<div class="name">{point.key}</div>',
                pointFormat: '<div class="val">{point.y}</div>',
                backgroundColor: '#fff',
                borderColor: '#ccc',
                borderRadius: 0,
                padding: 15,
                shadow: true,
                style:{
                    color: '#434343',
                    lineHeight: '18px',
                    fontFamily: 'ProximaNova'
                }
            },
            series: [{
                name: 'Hosts',
                data: [
                    ['A2 Hosting', 185343],
                    ['BlueHost', 2300950],
                ['Digital Ocean', 613786],
                    ['DreamHost', 1056670],
                    ['GreenGeeks', 99218],
                    ['HostGator', 2181645],
                    ['Hostinger', 328054],
                    ['InMotion', 497576],
                    ['iPage', 394252],
                    ['SiteGround', 748595]
                ]
            }]
        })
    }

Tell please how I could customize this graph in order to display two columns for each provider in the charts for current date and previus one? Will looks like this one: http://prntscr.com/oahb8o

 

The main goal is display the users how it growth.

 

Thanks