/* ------------------------------------------------------------------------------
*
* # Echarts - Column and Waterfall charts
*
* Demo JS code for echarts_columns_waterfalls.html page
*
* ---------------------------------------------------------------------------- */
// Setup module
// ------------------------------
var EchartsColumnsWaterfalls = function() {
//
// Setup module components
//
// Column and waterfall charts
var _columnsWaterfallsExamples = function() {
if (typeof echarts == 'undefined') {
console.warn('Warning - echarts.min.js is not loaded.');
return;
}
// Define elements
var columns_basic_element = document.getElementById('columns_basic');
var columns_stacked_element = document.getElementById('columns_stacked');
var columns_thermometer_element = document.getElementById('columns_thermometer');
var columns_clustered_element = document.getElementById('columns_clustered');
var columns_compositive_waterfall_element = document.getElementById('columns_compositive_waterfall');
var columns_change_waterfall_element = document.getElementById('columns_change_waterfall');
var columns_timeline_element = document.getElementById('columns_timeline');
//
// Charts configuration
//
// Basic columns chart
if (columns_basic_element) {
// Initialize chart
var columns_basic = echarts.init(columns_basic_element);
//
// Chart config
//
// Options
columns_basic.setOption({
// Define colors
color: ['#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80'],
// Global text styles
textStyle: {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
},
// Chart animation duration
animationDuration: 750,
// Setup grid
grid: {
left: 0,
right: 40,
top: 35,
bottom: 0,
containLabel: true
},
// Add legend
legend: {
data: ['Evaporation', 'Precipitation'],
itemHeight: 8,
itemGap: 20,
textStyle: {
padding: [0, 5]
}
},
// Add tooltip
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(0,0,0,0.75)',
padding: [10, 15],
textStyle: {
fontSize: 13,
fontFamily: 'Roboto, sans-serif'
}
},
// Horizontal axis
xAxis: [{
type: 'category',
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
axisLabel: {
color: '#333'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#eee',
type: 'dashed'
}
}
}],
// Vertical axis
yAxis: [{
type: 'value',
axisLabel: {
color: '#333'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
lineStyle: {
color: ['#eee']
}
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.01)']
}
}
}],
// Add series
series: [
{
name: 'Evaporation',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
fontWeight: 500
}
}
}
},
markLine: {
data: [{type: 'average', name: 'Average'}]
}
},
{
name: 'Precipitation',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 58.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
fontWeight: 500
}
}
}
},
markLine: {
data: [{type: 'average', name: 'Average'}]
}
}
]
});
}
// Stacked columns
if (columns_stacked_element) {
// Initialize chart
var columns_stacked = echarts.init(columns_stacked_element);
//
// Chart config
//
// Options
columns_stacked.setOption({
// Define colors
color: ['#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80'],
// Global text styles
textStyle: {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
},
// Chart animation duration
animationDuration: 750,
// Setup grid
grid: {
left: 0,
right: 10,
top: 35,
bottom: 0,
containLabel: true
},
// Add legend
legend: {
data: ['Direct', 'Email', 'Prints', 'Videos', 'Television', 'Yahoo', 'Google', 'Bing', 'Other'],
itemHeight: 8,
itemGap: 20
},
// Add tooltip
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(0,0,0,0.75)',
padding: [10, 15],
textStyle: {
fontSize: 13,
fontFamily: 'Roboto, sans-serif'
},
axisPointer: {
type: 'shadow',
shadowStyle: {
color: 'rgba(0,0,0,0.025)'
}
}
},
// Horizontal axis
xAxis: [{
type: 'category',
data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
axisLabel: {
color: '#333'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#eee',
type: 'dashed'
}
}
}],
// Vertical axis
yAxis: [{
type: 'value',
axisLabel: {
color: '#333'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
lineStyle: {
color: '#eee'
}
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.01)']
}
}
}],
// Add series
series: [
{
name: 'Direct',
type: 'bar',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Email',
type: 'bar',
stack: 'Advertising',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Prints',
type: 'bar',
stack: 'Advertising',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Videos',
type: 'bar',
stack: 'Advertising',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Television',
type: 'bar',
stack: 'Advertising',
data: [862, 1018, 964, 1026, 1679, 1600, 1570]
},
{
name: 'Yahoo',
type: 'bar',
barWidth: 10,
stack: 'Television',
data: [620, 732, 701, 734, 1090, 1130, 1120]
},
{
name: 'Google',
type: 'bar',
stack: 'Television',
data: [120, 132, 101, 134, 290, 230, 220]
},
{
name: 'Bing',
type: 'bar',
stack: 'Television',
data: [60, 72, 71, 74, 190, 130, 110]
},
{
name: 'Other',
type: 'bar',
stack: 'Television',
data: [62, 82, 91, 84, 109, 110, 120]
}
]
});
}
// Thermometer
if (columns_thermometer_element) {
// Initialize chart
var columns_thermometer = echarts.init(columns_thermometer_element);
//
// Chart config
//
// Options
var columns_thermometer_options = {
// Global text styles
textStyle: {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
},
// Chart animation duration
animationDuration: 750,
// Setup grid
grid: {
left: 10,
right: 10,
top: 35,
bottom: 0,
containLabel: true
},
// Add legend
legend: {
data: ['Actual', 'Forecast'],
itemHeight: 8,
itemGap: 20,
selectedMode: false
},
// Add tooltip
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(0,0,0,0.75)',
padding: [10, 15],
textStyle: {
fontSize: 13,
fontFamily: 'Roboto, sans-serif'
},
axisPointer: {
type: 'shadow',
shadowStyle: {
color: 'rgba(0,0,0,0.025)'
}
},
formatter: function (params) {
return params[0].name + '
'
+ params[0].seriesName + ': ' + params[0].value + '
'
+ params[1].seriesName + ': ' + (params[1].value + params[0].value);
}
},
// Horizontal axis
xAxis: [{
type: 'category',
data: ['Cosco', 'CMA', 'APL', 'OOCL', 'Wanhai', 'Zim', 'Maersk', 'Hanjin', 'Nyk'],
axisLabel: {
color: '#333'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#eee',
type: 'dashed'
}
}
}],
// Vertical axis
yAxis: [{
type: 'value',
boundaryGap: [0, 0.1],
axisLabel: {
color: '#333'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
lineStyle: {
color: '#eee'
}
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.015)']
}
}
}],
// Add series
series: [
{
name: 'Actual',
type: 'bar',
stack: 'sum',
barCategoryGap: '50%',
itemStyle: {
normal: {
color: '#FF7043',
barBorderColor: '#FF7043',
barBorderWidth: 6,
label: {
show: true,
position: 'insideTop'
}
}
},
data: [260, 200, 220, 120, 100, 80, 130, 230, 90]
},
{
name: 'Forecast',
type: 'bar',
stack: 'sum',
itemStyle: {
normal: {
color: '#f5f5f5',
barBorderColor: '#FF7043',
barBorderWidth: 6,
label: {
show: true,
position: 'top',
formatter: function (params) {
for (var i = 0, l = columns_thermometer_options.xAxis[0].data.length; i < l; i++) {
if (columns_thermometer_options.xAxis[0].data[i] == params.name) {
return columns_thermometer_options.series[0].data[i] + params.value;
}
}
},
textStyle: {
color: '#FF7043'
}
}
}
},
data: [40, 80, 50, 80,80, 70, 60, 90, 120]
}
]
};
// Set options
columns_thermometer.setOption(columns_thermometer_options);
}
// Stacked clustered columns
if (columns_clustered_element) {
// Initialize chart
var columns_clustered = echarts.init(columns_clustered_element);
//
// Chart config
//
// Options
columns_clustered.setOption({
// Define colors
color: ['#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80'],
// Global text styles
textStyle: {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
},
// Chart animation duration
animationDuration: 750,
// Setup grid
grid: {
left: 0,
right: 5,
top: 55,
bottom: 0,
containLabel: true
},
// Add legend
legend: {
data: [
'Version 1.7 - 2k data','Version 1.7 - 2w data','Version 1.7 - 20w data','',
'Version 2.0 - 2k data','Version 2.0 - 2w data','Version 2.0 - 20w data'
],
itemHeight: 2,
itemGap: 8,
textStyle: {
padding: [0, 10]
}
},
// Add tooltip
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(0,0,0,0.75)',
padding: [10, 15],
textStyle: {
fontSize: 13,
fontFamily: 'Roboto, sans-serif'
}
},
// Horizontal axis
xAxis: [
{
type: 'category',
data: ['Line','Bar','Scatter','Pies','Map'],
axisLabel: {
color: '#333'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#eee',
type: 'dashed'
}
}
},
{
type: 'category',
axisLine: {show:false},
axisTick: {show:false},
axisLabel: {show:false},
splitArea: {show:false},
splitLine: {show:false},
data: ['Line','Bar','Scatter','Pies','Map']
}
],
// Vertical axis
yAxis: [{
type: 'value',
axisLabel: {
color: '#333',
formatter: '{value} ms'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
lineStyle: {
color: ['#eee']
}
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.01)']
}
}
}],
// Add series
series: [
{
name: 'Version 2.0 - 2k data',
type: 'bar',
z: 2,
itemStyle: {
normal: {
color: '#F44336',
label: {
show: true,
padding: 5,
position: 'top',
textStyle: {
color: '#fff',
fontSize: 12
}
}
}
},
data: [247, 187, 95, 175, 270]
},
{
name: 'Version 2.0 - 2w data',
type: 'bar',
z: 2,
itemStyle: {
normal: {
color: '#4CAF50',
label: {
show: true,
padding: 5,
position: 'top',
textStyle: {
color: '#fff',
fontSize: 12
}
}
}
},
data: [488, 415, 405, 340, 328]
},
{
name: 'Version 2.0 - 20w data',
type: 'bar',
z: 2,
itemStyle: {
normal: {
color: '#2196F3',
label: {
show: true,
padding: 5,
position: 'top',
textStyle: {
color:'#fff',
fontSize: 12
}
}
}
},
data: [906, 911, 908, 778, 550]
},
{
name: 'Version 1.7 - 2k data',
type: 'bar',
z: 1,
xAxisIndex: 1,
itemStyle: {
normal: {
color: '#E57373',
label: {
show: true,
padding: 5,
position: 'top'
}
}
},
data: [680, 819, 564, 724, 890]
},
{
name: 'Version 1.7 - 2w data',
type: 'bar',
z: 1,
xAxisIndex: 1,
itemStyle: {
normal: {
color: '#81C784',
label: {
show: true,
padding: 5,
position: 'top'
}
}
},
data: [1212, 2035, 1620, 955, 1300]
},
{
name: 'Version 1.7 - 20w data',
type: 'bar',
z: 1,
xAxisIndex: 1,
itemStyle: {
normal: {
color: '#64B5F6',
label: {
show: true,
padding: 5,
position: 'top'
}
}
},
data: [2200, 3000, 2500, 3000, 2000]
}
]
});
}
// Multiple areas
if (columns_compositive_waterfall_element) {
// Initialize chart
var columns_compositive_waterfall = echarts.init(columns_compositive_waterfall_element);
//
// Chart config
//
// Options
columns_compositive_waterfall.setOption({
// Define colors
color: ['#f17a52', '#03A9F4'],
// Global text styles
textStyle: {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
},
// Chart animation duration
animationDuration: 750,
// Setup grid
grid: {
left: 10,
right: 10,
top: 35,
bottom: 0,
containLabel: true
},
// Tooltip
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(0,0,0,0.75)',
padding: [10, 15],
textStyle: {
fontSize: 13,
fontFamily: 'Roboto, sans-serif'
},
axisPointer: {
type: 'shadow',
shadowStyle: {
color: 'rgba(0,0,0,0.025)'
}
},
formatter: function (params) {
var tar = params[0];
return tar.name + '
' + tar.seriesName + ': ' + tar.value;
}
},
// Horizontal axis
xAxis: [{
type: 'category',
data: ['Total cost', 'Rent', 'Utilities', 'Transport', 'Meals', 'Commodity', 'Taxes', 'Travel'],
axisLabel: {
color: '#333'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#eee',
type: 'dashed'
}
}
}],
// Vertical axis
yAxis: [{
type: 'value',
axisLabel: {
color: '#333'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
lineStyle: {
color: '#eee'
}
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.015)']
}
}
}],
// Add series
series: [
{
name: 'Aid',
type: 'bar',
stack: 'Total',
itemStyle: {
normal: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
},
emphasis: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
}
},
data:[0, 3500, 3000, 2300, 1700, 900, 400, 0]
},
{
name: 'Cost of living',
type: 'bar',
stack: 'Total',
itemStyle: {
normal: {
barBorderRadius: 3,
color: '#42A5F5',
label: {
show: true,
position: 'inside'
}
},
emphasis: {
color: '#42A5F5',
}
},
data: [4500, 1000, 500, 700, 600, 800, 500, 400]
}
]
});
}
// Change waterfall
if (columns_change_waterfall_element) {
// Initialize chart
var columns_change_waterfall = echarts.init(columns_change_waterfall_element);
//
// Chart config
//
// Options
columns_change_waterfall.setOption({
// Define colors
color: ['#f17a52', '#03A9F4'],
// Global text styles
textStyle: {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
},
// Chart animation duration
animationDuration: 750,
// Setup grid
grid: {
left: 10,
right: 10,
top: 35,
bottom: 0,
containLabel: true
},
// Add legend
legend: {
data: ['Expenses', 'Income'],
itemHeight: 8,
itemGap: 20,
textStyle: {
padding: [0, 5]
}
},
// Tooltip
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(0,0,0,0.75)',
padding: [10, 15],
textStyle: {
fontSize: 13,
fontFamily: 'Roboto, sans-serif'
},
axisPointer: {
type: 'shadow',
shadowStyle: {
color: 'rgba(0,0,0,0.025)'
}
},
formatter: function (params) {
var tar;
if (params[1].value != '-') {
tar = params[1];
}
else {
tar = params[0];
}
return tar.name + '
' + tar.seriesName + ': ' + tar.value;
}
},
// Horizontal axis
xAxis: [{
type: 'category',
data: ['January','February','March','April','May','June','July','August','September','October','November','December'],
axisLabel: {
color: '#333'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#eee',
type: 'dashed'
}
}
}],
// Vertical axis
yAxis: [{
type: 'value',
axisLabel: {
color: '#333'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
lineStyle: {
color: '#eee'
}
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.015)']
}
}
}],
// Add series
series: [
{
name: 'Aid',
type: 'bar',
stack: 'Total',
itemStyle: {
normal: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
},
emphasis: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
}
},
data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292, 992]
},
{
name: 'Income',
type: 'bar',
stack: 'Total',
itemStyle: {
normal: {
barBorderRadius: 3,
label: {
show: true,
position: 'top'
}
}
},
data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-']
},
{
name: 'Expenses',
type: 'bar',
stack: 'Total',
itemStyle: {
normal: {
barBorderRadius: 3,
label: {
show: true,
position: 'bottom'
}
}
},
data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203,300]
}
]
});
}
// Columns timeline
if (columns_timeline_element) {
// Initialize chart
var columns_timeline = echarts.init(columns_timeline_element);
//
// Chart config
//
// Demo data
var dataMap = {};
dataMap.dataGDP = ({
2014:[16251.93,11307.28,24515.76,11237.55,14359.88,22226.7,10568.83,12582,19195.69,49110.27],
2013:[14113.58,9224.46,20394.26,9200.86,11672,18457.27,8667.58,10368.6,17165.98,41425.48],
2012:[12153.03,7521.85,17235.48,7358.31,9740.25,15212.49,7278.75,8587,15046.45,34457.3],
2011:[11115,6719.01,16011.97,7315.4,8496.2,13668.58,6426.1,8314.37,14069.87,30981.98],
2010:[9846.81,5252.76,13607.32,6024.45,6423.18,11164.3,5284.69,7104,12494.01,26018.48]
});
dataMap.dataEstate = ({
2014:[1074.93,411.46,918.02,224.91,384.76,876.12,238.61,492.1,1019.68,2747.89],
2013:[1006.52,377.59,697.79,192,309.25,733.37,212.32,391.89,1002.5,2600.95],
2012:[1062.47,308.73,612.4,173.31,286.65,605.27,200.14,301.18,1237.56,2025.39],
2011:[844.59,227.88,513.81,166.04,273.3,500.81,182.7,244.47,939.34,1626.13],
2010:[821.5,183.44,467.97,134.12,191.01,410.43,153.03,225.81,958.06,1365.71]
});
dataMap.dataFinancial = ({
2014:[2215.41,756.5,746.01,519.32,447.46,755.57,207.65,370.78,2277.4,2600.11],
2013:[1863.61,572.99,615.42,448.3,346.44,639.27,190.12,304.59,1950.96,2105.92],
2012:[1603.63,461.2,525.67,361.64,291.1,560.2,180.83,227.54,1804.28,1596.98],
2011:[1519.19,368.1,420.74,290.91,219.09,455.07,147.24,177.43,1414.21,1298.48],
2010:[1302.77,288.17,347.65,218.73,148.3,386.34,126.03,155.48,1209.08,1054.25]
});
// Options
columns_timeline.setOption({
// Setup timeline
timeline: {
axisType: 'category',
data: ['2010-01-01', '2011-01-01', '2012-01-01', '2013-01-01', '2014-01-01'],
left: 0,
right: 0,
bottom: 0,
label: {
normal: {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 11
}
},
autoPlay: true,
playInterval: 3000
},
// Config
options: [
{
// Global text styles
textStyle: {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
},
// Chart animation duration
animationDuration: 750,
// Setup grid
grid: {
left: 10,
right: 10,
top: 35,
bottom: 60,
containLabel: true
},
// Add legend
legend: {
data: ['GDP','Financial','Real Estate'],
itemHeight: 8,
itemGap: 20
},
// Tooltip
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(0,0,0,0.75)',
padding: [10, 15],
textStyle: {
fontSize: 13,
fontFamily: 'Roboto, sans-serif'
},
axisPointer: {
type: 'shadow',
shadowStyle: {
color: 'rgba(0,0,0,0.025)'
}
}
},
// Horizontal axis
xAxis: [{
type: 'category',
data: ['Paris','Budapest','Prague','Madrid','Amsterdam','Berlin','Bratislava','Munich','Hague','Rome'],
axisLabel: {
color: '#333'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#eee',
type: 'dashed'
}
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.015)']
}
}
}],
// Vertical axis
yAxis: [
{
type: 'value',
name: 'GDP（million)',
max: 53500,
axisLabel: {
color: '#333'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#eee'
}
}
},
{
type: 'value',
name: 'Other（million)',
axisLabel: {
color: '#333'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#f5f5f5'
}
}
}
],
// Add series
series: [
{
name: 'GDP',
type: 'bar',
markLine: {
symbol: ['arrow','none'],
symbolSize: [4, 2],
itemStyle: {
normal: {
lineStyle: {color: 'orange'},
barBorderColor: 'orange',
label: {
position: 'left',
formatter: function(params) {
return Math.round(params.value);
},
textStyle: {color: 'orange'}
}
}
},
data: [{type: 'average', name: 'Average'}]
},
data: dataMap.dataGDP['2010']
},
{
name: 'Financial',
yAxisIndex: 1,
type: 'bar',
data: dataMap.dataFinancial['2010']
},
{
name: 'Real Estate',
yAxisIndex: 1,
type: 'bar',
data: dataMap.dataEstate['2010']
}
]
},
// 2011 data
{
series: [
{data: dataMap.dataGDP['2011']},
{data: dataMap.dataFinancial['2011']},
{data: dataMap.dataEstate['2011']}
]
},
// 2012 data
{
series: [
{data: dataMap.dataGDP['2012']},
{data: dataMap.dataFinancial['2012']},
{data: dataMap.dataEstate['2012']}
]
},
// 2013 data
{
series: [
{data: dataMap.dataGDP['2013']},
{data: dataMap.dataFinancial['2013']},
{data: dataMap.dataEstate['2013']}
]
},
// 2014 data
{
series: [
{data: dataMap.dataGDP['2014']},
{data: dataMap.dataFinancial['2014']},
{data: dataMap.dataEstate['2014']}
]
}
]
});
}
//
// Resize charts
//
// Resize function
var triggerChartResize = function() {
columns_basic_element && columns_basic.resize();
columns_stacked_element && columns_stacked.resize();
columns_thermometer_element && columns_thermometer.resize();
columns_clustered_element && columns_clustered.resize();
columns_compositive_waterfall_element && columns_compositive_waterfall.resize();
columns_change_waterfall_element && columns_change_waterfall.resize();
columns_timeline_element && columns_timeline.resize();
};
// On sidebar width change
$(document).on('click', '.sidebar-control', function() {
setTimeout(function () {
triggerChartResize();
}, 0);
});
// On window resize
var resizeCharts;
window.onresize = function () {
clearTimeout(resizeCharts);
resizeCharts = setTimeout(function () {
triggerChartResize();
}, 200);
};
};
//
// Return objects assigned to module
//
return {
init: function() {
_columnsWaterfallsExamples();
}
}
}();
// Initialize module
// ------------------------------
document.addEventListener('DOMContentLoaded', function() {
EchartsColumnsWaterfalls.init();
});