Geek asks and answers

Double x axis on the same line with Highcharts. Possible?

Is it possible to create several diagrams along the x axis, for example this , using Highcharts? If yes, can someone please provide some pointers?

Displays data for three years. those. 2010,2011, 2012

https://www.adr.com/DRDetails/CorporateActions?cusip=055622104

+3
source share
6 answers

Using highstocks (highcharts lesser known sibling), you can do something like what you are looking for. Check fiddle

$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function(data) {

    // split the data set into ohlc and volume
    var ohlc = [],
        volume = [],
        dataLength = data.length;

    for (i = 0; i < dataLength; i++) {
        ohlc.push([
            data[i][0], // the date
            data[i][1], // open
            data[i][2], // high
            data[i][3], // low
            data[i][4] // close
        ]);

        volume.push([
            data[i][0], // the date
            data[i][5] // the volume
        ])
    }

    // set the allowed units for data grouping
    var groupingUnits = [[
        'week',                         // unit name
        [1]                             // allowed multiples
    ], [
        'month',
        [1, 2, 3, 4, 6]
    ]];

    // create the chart
    $('#container').highcharts('StockChart', {

        rangeSelector: {
            selected: 1
        },

        title: {
            text: 'AAPL Historical'
        },

        yAxis: [{
            title: {
                text: 'OHLC'
            },
            height: 200,
            lineWidth: 2
        }, {
            title: {
                text: 'Volume'
            },
            top: 300,
            height: 100,
            offset: 0,
            lineWidth: 2
        }],

        series: [{
            type: 'area',
            name: 'AAPL',
            data: ohlc,
            dataGrouping: {
                units: groupingUnits
            }
        }, {
            type: 'area',
            name: 'Volume',
            data: volume,
            yAxis: 1,
            dataGrouping: {
                units: groupingUnits
            }
        }]
    });
});

});

+2
source

Older answers did not execute for me in JSFiddle. Here is a working example if it helps someone:

http://jsfiddle.net/kPqKW/

$(function () {
    $('#container').highcharts({

        chart: {
            renderTo: 'container'
        },
        xAxis: [{
            type: 'datetime'
        }, {
            type: 'datetime',
            opposite: true
        }],

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            pointStart: Date.UTC(2010, 0, 1),
            pointInterval: 24 * 3600 * 1000 // one day
        }, {
            data: [176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0],
            pointStart: Date.UTC(2010, 0, 10),
            pointInterval: 24 * 3600 * 1000, // one day
            xAxis: 1
        }]

    });
});
+2
source

, . , - . true, y. Highcharts

<div id="container" style="height: 400px; width: 500px"></div>

<script type="text/javascript">

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: [{
        type: 'datetime',
    },{
        type: 'datetime',
        opposite: true
    }],

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 24 * 3600 * 1000 // one day
    },{
        data: [176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0],
        pointStart: Date.UTC(2010, 0, 10),
        pointInterval: 24 * 3600 * 1000, // one day
        xAxis: 1
    }]
});

</script>

for a working example, look at jsfilddle

+1
source

You can simply use the plugins of the grouped categories of Highcharts, see: https://github.com/blacklabel/grouped_categories

0
source

you can go through this script https://jsfiddle.net/ajaytripathi10/z8mrwhxz/ . Hope this helps.

$(function () {
$('#container').highcharts({
    title: {
        text: 'Shared tooltip chart'
    },
    xAxis: [{
        type: 'datetime',
        id: 'x1'
    }, {
        type: 'datetime',
        id: 'x2',
        opposite: true
    }],
    yAxis: {
        min: 0
    },
    tooltip: {
        shared: true,
        useHTML: true,
        formatter: function () {
            var tooltip = '';
            var i, len;
            tooltip += '<small>Apple</small>';
            tooltip += '<table>';
            for (i = 0, len = 4; i < len; i++) {
                    if(this.points[i] != undefined){
            if(this.points[i].series.name.indexOf('Apple') >= 0){
                tooltip += '<tr>';
                tooltip += '<td style="color: ' + this.points[i].series.color + '">\u25CF</td>';
                tooltip += '<td>' + Highcharts.dateFormat('%Y-%m-%d', this.points[i].x) + ':</td>';
                tooltip += '<td style="text-align: right"><b>' + this.points[i].y + '</b></td>';
                tooltip += '</tr>';
                }
                }
            }
            tooltip += '</table>';
            tooltip += '<small>Mango</small>';
            tooltip += '<table>';
            for (i = 0, len = 4; i < len; i++) {
                    if(this.points[i] != undefined){
            if(this.points[i].series.name.indexOf('Mango') >= 0){
                tooltip += '<tr>';
                tooltip += '<td style="color: ' + this.points[i].series.color + '">\u25CF</td>';
                tooltip += '<td>' + Highcharts.dateFormat('%Y-%m-%d', this.points[i].x) + ':</td>';
                tooltip += '<td style="text-align: right"><b>' + this.points[i].y + '</b></td>';
                tooltip += '</tr>';
                }
                }
            }
            tooltip += '</table>';
            return tooltip;
        }
    },
    series: [{
        name: 'Apple',
        id: 'series1',
        xAxis: 'x1',
        color: 'rgba(255, 0, 0, 1.0)',
        data: [5, 3, 4, 7, 6, 1, 0],
        pointInterval: 1000 * 60 * 60 * 24,
        pointStart: Date.UTC(2015, 2, 10)
    }, {
        name: 'Apple New',
        id: 'series2',
        //linkedTo: 'series1',
        xAxis: 'x2',
        color: 'rgba(255, 180, 180, 1.0)',
        data: [4, 5, 5, 6, 1, 3, 4],
        pointInterval: 1000 * 60 * 60 * 24,
        pointStart: Date.UTC(2015, 2, 17)
    },{
        name: 'Mango',
        id: 'series3',
        xAxis: 'x1',
        color: 'rgba(255, 0, 0, 1.0)',
        data: [15, 13, 14, 17, 16, 11, 10],
        pointInterval: 1000 * 60 * 60 * 24,
        pointStart: Date.UTC(2015, 2, 10)
    }, {
        name: 'Mango New',
        id: 'series4',
        //linkedTo: 'series1',
        xAxis: 'x2',
        color: 'rgba(255, 180, 180, 1.0)',
        data: [14, 15, 15, 16, 11, 13, 14],
        pointInterval: 1000 * 60 * 60 * 24,
        pointStart: Date.UTC(2015, 2, 17)
    }]
});

});

0
source

Complete code for creating horizontal and vertical rows in a column, piechart graphical charts

    <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


</head>
<body>
<div id="container" class="col-md-4" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div class="col-md-8">
<div id="container2" class="col-md-6" style="min-width: 310px; height: 400px; margin: 0 auto" class="col-md-6"></div><div id="container3" class="col-md-6" style="min-width: 310px; height: 400px; margin: 0 auto" class="col-md-6" class="col-md-6">dddd</div>
</div>
<script>
Highcharts.chart('container', {
    chart: {
        type: 'column',

    },
    title: {
        text: 'sample charts for both horizontal and vertical line'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
    gridLineWidth: 1,
        minPadding: 2,
        maxPadding: 2,
        maxZoom: 6 ,
        categories: ['Jan', 'Feb', 'Apr', 'May', 'Jun',
             'Dec']
    },
    yAxis: {

        title: {
            text: 'Temperature'
        },

        labels: {
            formatter: function () {
                return  '$'+this.value;
            }
        },

    },
    tooltip: {
        crosshairs: true,
        shared: true
    },
    plotOptions: {
        spline: {
            marker: {
                radius: 4,
                lineColor: '#666666',
                lineWidth: 1
            }
        }
    },
    series: [{
       // name: '',

        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]

    }]
});

Highcharts.chart('container2', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Browser market shares in January, 2018'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    series: [{
        name: 'Brands',
        colorByPoint: true,
        data: [{
            name: 'Chrome',
            y: 61.41,
            sliced: true,
            selected: true
        }, {
            name: 'Internet Explorer',
            y: 11.84
        }, {
            name: 'Firefox',
            y: 10.85
        }, {
            name: 'Edge',
            y: 4.67
        }, {
            name: 'Safari',
            y: 4.18
        }, {
            name: 'Sogou Explorer',
            y: 1.64
        }, {
            name: 'Opera',
            y: 1.6
        }, {
            name: 'QQ',
            y: 1.2
        }, {
            name: 'Other',
            y: 2.61
        }]
    }]
});

Highcharts.chart('container3', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Browser market shares in January, 2018'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    series: [{
        name: 'Brands',
        colorByPoint: true,
        data: [{
            name: 'Chrome',
            y: 61.41,
            sliced: true,
            selected: true
        }, {
            name: 'Internet Explorer',
            y: 11.84
        }, {
            name: 'Firefox',
            y: 10.85
        }, {
            name: 'Edge',
            y: 4.67
        }, {
            name: 'Safari',
            y: 4.18
        }, {
            name: 'Sogou Explorer',
            y: 1.64
        }, {
            name: 'Opera',
            y: 1.6
        }, {
            name: 'QQ',
            y: 1.2
        }, {
            name: 'Other',
            y: 2.61
        }]
    }]
});
</script>
</body>
</html>
0
source

More articles:


All Articles