Skip to content
←

Settings and activity

1 result found

  1. Drill down charts that can handle more than one series at the drill down level

    16 votes
    Vote

    We're glad you're here

    Please sign in to leave feedback
    Signed in as (Sign out)
    Close
    Close
    You have left! (?) (thinking…)
    3 comments  ·  Highcharts Javascript API  ·  Admin →
    How important is this to you?

    We're glad you're here

    Please sign in to leave feedback
    Signed in as (Sign out)
    Close
    Close
    An error occurred while saving the comment
    Varun Kumar commented  · 

    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://github.highcharts.com/highcharts.js"></script>
    <script src="http://github.highcharts.com/modules/drilldown.js"></script>

    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    <script>
    $(function () {

    // Create the chart
    // type to line for line chart
    $('#container').highcharts({
    chart: {
    type: 'column'
    },
    title: {
    text: 'Basic drilldown'
    },
    xAxis: {
    type: 'category'
    },

    legend: {
    enabled: true
    },

    plotOptions: {
    series: {
    borderWidth: 0,
    dataLabels: {
    enabled: true,
    style: {
    color: 'white',
    textShadow: '0 0 2px black, 0 0 2px black'
    }
    },
    stacking: 'normal'
    }
    },

    series: [{
    name: 'Things',
    data: [{

    name: 'Animals',
    y: 5,
    drilldown: 'animals'
    }, {
    name: 'Fruits',
    y: 2,
    drilldown: 'fruits'
    }, {
    name: 'Cars',
    y: 4,
    drilldown: 'cars'
    }]
    }, {
    name: 'Things3',
    stack: 1,
    type: 'line',
    data: [{
    name: 'Animals',
    y: 8,
    drilldown: 'animals3'
    }, {
    name: 'Fruits',
    y: 7,
    drilldown: 'fruits3'
    }, {
    name: 'Cars',
    y: 10,
    drilldown: 'cars3'
    }]
    }],
    drilldown: {
    activeDataLabelStyle: {
    color: 'white',
    textShadow: '0 0 2px black, 0 0 2px black'
    },
    series: [{
    id: 'animals',
    name: 'Animals',
    data: [
    ['Cats', 4],
    ['Dogs', 2],
    ['Cows', 1],
    ['Sheep', 2],
    ['Pigs', 1]
    ]
    }, {
    id: 'fruits',
    name: 'Fruits',
    data: [
    ['Apples', 4],
    ['Oranges', 2]
    ]
    }, {
    id: 'cars',
    name: 'Cars',
    data: [
    ['Toyota', 4],
    ['Opel', 2],
    ['Volkswagen', 2]
    ]
    },{
    id: 'animals3',
    name: 'Animals3',
    type: 'line',
    stack: 1,
    data: [
    ['Cats', 2],
    ['Dogs', 3],
    ['Cows', 1],
    ['Sheep', 1],
    ['Pigs', 1]
    ]
    }, {
    id: 'fruits3',
    name: 'Fruits3',
    type: 'line',
    stack: 1,
    data: [
    ['Apples', 4],
    ['Oranges', 3]
    ]
    }, {
    id: 'cars3',
    name: 'Cars3',
    type: 'line',
    stack: 1,
    data: [
    ['Toyota', 4],
    ['Opel', 3],
    ['Volkswagen', 3]
    ]
    }]
    }
    })
    });
    </script>