Multiple Hierarchical bar chart #4902

suntong · 2017-01-10T16:54:09Z

ECharts with multiple groupings

How to produce a chat with multiple groupings using ECharts?

Version & Environment [版本及环境]

ECharts version [ECharts 版本]: Current, from http://echarts.baidu.com/build/dist/echarts.js
Browser version [浏览器类型和版本]: IE10, latest version.
OS Version [操作系统类型和版本]: Windows 8

Expected behaviour [期望结果]

See a bar chat with multiple groupings using ECharts. Here is an example from excel of what I am attempting to create, subgrouped by Variety and Irrigation treatment:

Is that possible with ECharts?
If so, a demo chart is appreciated. You can use this csv data.
Chart Population1 & Population2 for each countries, and group them by Continent.

pissang · 2017-01-11T02:02:21Z

There are no direct ways, but you can use some tricky method to get that. This example maybe helpful http://gallery.echartsjs.com/editor.html?c=xryk_0DRml

Here is the code if you can't open it:

// 2x轴+假数据列
// 细粒度数据，必须根据主分类排序
var dummy = [
    ['2015 Winter','Jan',Math.random()*10,Math.random()*10],
    ['2015 Winter','Feb',Math.random()*20,Math.random()*20],
    ['2016 Spring','Mar',Math.random()*50,Math.random()*50],
    ['2016 Spring','Apr',Math.random()*100,Math.random()*100],
    ['2016 Spring','May',Math.random()*150,Math.random()*150],
    ['2016 Summer','Jun',Math.random()*200,Math.random()*200],
    ['2016 Summer','Jul',Math.random()*250,Math.random()*250],
    ['2016 Summer','Aug',Math.random()*200,Math.random()*200],
    ['2016 Summer','Sep',Math.random()*150,Math.random()*150],
    ['2016 Autumn','Oct',Math.random()*100,Math.random()*100],
    ['2016 Autumn','Nov',Math.random()*20,Math.random()*20],
    ['2016 Autumn','Dec',Math.random()*10,Math.random()*10]
];
// 元数据处理，e.g. metadata.init().xxx
var metadata = {
    flag: true,
    quarter: [],
    month: [],
    data1: [],
    data2: [],
    data3: [],
    x_major_offset: dummy[0][1].length,
    init: function() {
        // 首次初始化
        if (metadata.flag) {
            // 数据遍历
            for (var i = 0; i < dummy.length; i++) {
                //debugger;
                if (i === 0) {
                    metadata.quarter.push(dummy[i][0]);
                } else {
                    // 与子分类列匹配
                    metadata.quarter.push(dummy[i-1][0] === dummy[i][0] ? '' : dummy[i][0]);
                }
                metadata.month.push(dummy[i][1]);
                metadata.data1.push(dummy[i][2]);
                metadata.data2.push(dummy[i][3]);
                metadata.data3.push('');
                // 计算子分类字符长度（按汉字计算，*12号字体）
                metadata.x_major_offset = metadata.x_major_offset > dummy[i][1].length ? metadata.x_major_offset : dummy[i][1].length;
            }
            metadata.flag = false;
        }
        return metadata;
    }
};

option = {
    tooltip: {
        axisPointer: {
            type: 'shadow'
        },
        trigger: 'axis'
    },
    grid: {
        bottom: metadata.init().x_major_offset * 12 + 30
    },
    legend: {
        data:['蒸发量','降水量']
    },
    xAxis: [
        {
            type: 'category',
            axisLine: {show: false},
            axisTick: {show: false},
            axisLabel: {
                rotate: 90
            },
            splitArea: {show: false},
            data: metadata.init().month
        },
        {
            type: 'category',
            position: 'bottom',
            offset: metadata.init().x_major_offset * 12,
            axisLine: {show: false},
            axisTick: {
                length: metadata.init().x_major_offset * 12 + 20,
                lineStyle: {color: '#CCC'},
                interval: function (index, value) {
                    return value!=='';
                }
            },
            splitArea: {
                show: true,
                interval: function (index, value) {
                    return value!=='';
                }
            },
            data: metadata.init().quarter
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '水量',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
                formatter: '{value} ml'
            }
        }
    ],
    series: [
        {
            name:'蒸发量',
            type:'bar',
            z: 1,
             data: metadata.init().data1
        },
        {
            name:'降水量',
            type:'bar',
            z: 1,
            data: metadata.init().data2
        },
        {
            type:'line',
            xAxisIndex: 1,
            z: 0,
            data: metadata.init().data3
        }
    ]
};

suntong · 2017-01-12T18:09:50Z

Indeed I was having trouble opening it, but I finally see the result. Yep, That's exactly what I was asking for. Thanks.

suntong · 2017-01-13T17:55:40Z

I can't make it work, after porting to my own place. Here is how it looks:

I.e., the main/sub groups are at the top & bottom, instead of all at bottom.
How to get it working?

Here is my code:

<!DOCTYPE html>
<!-- https://ecomfe.github.io/echarts/doc/start.html#main1 -->
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts图表
        var myChart = echarts.init(document.getElementById('main')); 
        
// 2x轴+假数据列
// 细粒度数据，必须根据主分类排序
var dummy = [
    ['2015冬','1月',Math.random()*10,Math.random()*10],
    ['2015冬','2月',Math.random()*20,Math.random()*20],
    ['2016春','3月',Math.random()*50,Math.random()*50],
    ['2016春','4月',Math.random()*100,Math.random()*100],
    ['2016春','5月',Math.random()*150,Math.random()*150],
    ['2016夏','6月',Math.random()*200,Math.random()*200],
    ['2016夏','7月',Math.random()*250,Math.random()*250],
    ['2016夏','8月',Math.random()*200,Math.random()*200],
    ['2016秋','9月',Math.random()*150,Math.random()*150],
    ['2016秋','10月',Math.random()*100,Math.random()*100],
    ['2016秋','11月',Math.random()*20,Math.random()*20],
    ['2016冬','十二月',Math.random()*10,Math.random()*10]
];
// 元数据处理，e.g. metadata.init().xxx
var metadata = {
    flag: true,
    quarter: [],
    month: [],
    data1: [],
    data2: [],
    data3: [],
    x_major_offset: dummy[0][1].length,
    init: function() {
        // 首次初始化
        if (metadata.flag) {
            // 数据遍历
            for (var i = 0; i < dummy.length; i++) {
                //debugger;
                if (i === 0) {
                    metadata.quarter.push(dummy[i][0]);
                } else {
                    // 与子分类列匹配
                    metadata.quarter.push(dummy[i-1][0] === dummy[i][0] ? '' : dummy[i][0]);
                }
                metadata.month.push(dummy[i][1]);
                metadata.data1.push(dummy[i][2]);
                metadata.data2.push(dummy[i][3]);
                metadata.data3.push('');
                // 计算子分类字符长度（按汉字计算，*12号字体）
                metadata.x_major_offset = metadata.x_major_offset > dummy[i][1].length ? metadata.x_major_offset : dummy[i][1].length;
            }
            metadata.flag = false;
        }
        return metadata;
    }
};

option = {
    tooltip: {
        axisPointer: {
            type: 'shadow'
        },
        trigger: 'axis'
    },
    grid: {
        bottom: metadata.init().x_major_offset * 12 + 30
    },
    legend: {
        data:['蒸发量','降水量']
    },
    xAxis: [
        {
            type: 'category',
            axisLine: {show: false},
            axisTick: {show: false},
            axisLabel: {
                rotate: 90
            },
            splitArea: {show: false},
            data: metadata.init().month
        },
        {
            type: 'category',
            position: 'bottom',
            offset: metadata.init().x_major_offset * 12,
            axisLine: {show: false},
            axisTick: {
                length: metadata.init().x_major_offset * 12 + 20,
                lineStyle: {color: '#CCC'},
                interval: function (index, value) {
                    return value!=='';
                }
            },
            splitArea: {
                show: true,
                interval: function (index, value) {
                    return value!=='';
                }
            },
            data: metadata.init().quarter
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '水量',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
                formatter: '{value} ml'
            }
        }
    ],
    series: [
        {
            name:'蒸发量',
            type:'bar',
            z: 1,
             data: metadata.init().data1
        },
        {
            name:'降水量',
            type:'bar',
            z: 1,
            data: metadata.init().data2
        },
        {
            type:'line',
            xAxisIndex: 1,
            z: 0,
            data: metadata.init().data3
        }
    ]
};

        // 为echarts对象加载数据 
        myChart.setOption(option); 
    </script>
</body>

Thanks

100pah · 2017-01-13T18:08:54Z

http://echarts.baidu.com/build/dist/echarts.js is echarts 2.x
Try echarts3.x please, which will make it work ~

suntong · 2017-01-13T18:11:30Z

Got it. Thx.

MashRoofa · 2020-12-17T09:14:53Z

Here is the proposed example translated to english, in case someone needs it.

// 2x Axis + Fake Data Column
// Fine-grained data must be sorted according to the main category
var dummy = [
    ['2015 Winter', '1', Math.random() * 10, Math.random() * 10],
    ['2015 Winter', '2', Math.random() * 20, Math.random() * 20],
    ['2016 Spring', '3', Math.random() * 50, Math.random() * 50],
    ['2016 Spring', '4', Math.random() * 100, Math.random() * 100],
    ['2016 Spring', '5', Math.random() * 150, Math.random() * 150],
    ['2016 Summer', '6', Math.random() * 200, Math.random() * 200],
    ['2016 Summer', '7', Math.random() * 250, Math.random() * 250],
    ['2016 Summer', '8', Math.random() * 200, Math.random() * 200],
    ['2016 autumn', '9', Math.random() * 150, Math.random() * 150],
    ['2016 autumn', '10', Math.random() * 100, Math.random() * 100],
    ['2016 autumn', '11', Math.random() * 20, Math.random() * 20],
    ['2016 winter', '12', Math.random() * 10, Math.random() * 10]
];
// Metadata processing，e.g. metadata.init().xxx
var metadata = {
    flag: true,
    quarter: [],
    month: [],
    data1: [],
    data2: [],
    data3: [],
    x_major_offset: dummy[0][1].length,
    init: function() {
        // Initial initialization
        if (metadata.flag) {
            // Data traveral
            for (var i = 0; i < dummy.length; i++) {
                //debugger;
                if (i === 0) {
                    metadata.quarter.push(dummy[i][0]);
                } else {
                    // Match subcategory column
                    metadata.quarter.push(dummy[i - 1][0] === dummy[i][0] ? '' : dummy[i][0]);
                }
                metadata.month.push(dummy[i][1]);
                metadata.data1.push(dummy[i][2]);
                metadata.data2.push(dummy[i][3]);
                metadata.data3.push('');
                // Calculate the length of sub-category characters (calculated according to Chinese characters, *12 font)
                metadata.x_major_offset = metadata.x_major_offset > dummy[i][1].length ? metadata.x_major_offset : dummy[i][1].length;
            }
            metadata.flag = false;
        }
        return metadata;
    }
};

option = {
    tooltip: {
        axisPointer: {
            type: 'shadow'
        },
        trigger: 'axis'
    },
    grid: {
        bottom: metadata.init().x_major_offset * 12 + 30
    },
    legend: {
        data: ['Evaporation', 'Precipitation']
    },
    xAxis: [{
            type: 'category',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                rotate: 90
            },
            splitArea: {
                show: false
            },
            data: metadata.init().month
        },
        {
            type: 'category',
            position: 'bottom',
            offset: metadata.init().x_major_offset * 12,
            axisLine: {
                show: false
            },
            axisTick: {
                length: metadata.init().x_major_offset * 12 + 20,
                lineStyle: {
                    color: '#CCC'
                },
                interval: function(index, value) {
                    return value !== '';
                }
            },
            splitArea: {
                show: true,
                interval: function(index, value) {
                    return value !== '';
                }
            },
            data: metadata.init().quarter
        }
    ],
    yAxis: [{
        type: 'value',
        name: 'Water volume',
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
            formatter: '{value} ml'
        }
    }],
    series: [{
            name: 'Evaporation',
            type: 'bar',
            z: 1,
            data: metadata.init().data1
        },
        {
            name: 'Precipitation',
            type: 'bar',
            z: 1,
            data: metadata.init().data2
        },
        {
            type: 'line',
            xAxisIndex: 1,
            z: 0,
            data: metadata.init().data3
        }
    ]
};

suntong closed this as completed Jan 12, 2017

suntong reopened this Jan 13, 2017

suntong closed this as completed Jan 13, 2017

MashRoofa mentioned this issue Dec 18, 2020

Is there a better way of handling data groupings (Hierarchical Data) and centering their category labels on xAxis #13839

Open

ysk3a mentioned this issue Dec 27, 2023

[Feature] grouped column labels or grouped categories or data groupings (Hierarchical Data) #19441

Open

AidMen mentioned this issue Jul 11, 2024

[Discussion] Apache ECharts 6.0 Feature Discussion #19959

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Multiple Hierarchical bar chart #4902

Multiple Hierarchical bar chart #4902

suntong commented Jan 10, 2017 •

edited

Loading

pissang commented Jan 11, 2017 •

edited

Loading

suntong commented Jan 12, 2017

suntong commented Jan 13, 2017 •

edited

Loading

100pah commented Jan 13, 2017

suntong commented Jan 13, 2017 •

edited

Loading

MashRoofa commented Dec 17, 2020

Multiple Hierarchical bar chart #4902

Multiple Hierarchical bar chart #4902

Comments

suntong commented Jan 10, 2017 • edited Loading

ECharts with multiple groupings

Version & Environment [版本及环境]

Expected behaviour [期望结果]

pissang commented Jan 11, 2017 • edited Loading

suntong commented Jan 12, 2017

suntong commented Jan 13, 2017 • edited Loading

100pah commented Jan 13, 2017

suntong commented Jan 13, 2017 • edited Loading

MashRoofa commented Dec 17, 2020

suntong commented Jan 10, 2017 •

edited

Loading

pissang commented Jan 11, 2017 •

edited

Loading

suntong commented Jan 13, 2017 •

edited

Loading

suntong commented Jan 13, 2017 •

edited

Loading