Float/FloatBackOfffice
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
This commit is contained in:
dev-chiefworks
2022-05-31 16:21:53 -04:00
commit f76abffdcd
5978 changed files with 1078901 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/charts/echarts/bars_tornados.js
+966
View File
@@ -0,0 +1,966 @@
/* ------------------------------------------------------------------------------
*
* # Echarts - bars and tornados
*
* Bars and tornados chart configurations
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function () {
// Set paths
// ------------------------------
require.config({
paths: {
echarts: 'assets/js/plugins/visualization/echarts'
}
});
// Configuration
// ------------------------------
require(
[
'echarts',
'echarts/theme/limitless',
'echarts/chart/bar',
'echarts/chart/line'
],
// Charts setup
function (ec, limitless) {
// Initialize charts
// ------------------------------
var basic_bars = ec.init(document.getElementById('basic_bars'), limitless);
var stacked_bars = ec.init(document.getElementById('stacked_bars'), limitless);
var stacked_clustered_bars = ec.init(document.getElementById('stacked_clustered_bars'), limitless);
var floating_bars = ec.init(document.getElementById('floating_bars'), limitless);
var irregular_bars = ec.init(document.getElementById('irregular_bars'), limitless);
var tornado_bars_negative = ec.init(document.getElementById('tornado_bars_negative'), limitless);
var tornado_bars_staggered = ec.init(document.getElementById('tornado_bars_staggered'), limitless);
// Charts setup
// ------------------------------
//
// Basic bars options
//
basic_bars_options = {
// Setup grid
grid: {
x: 75,
x2: 35,
y: 35,
y2: 25
},
// Add tooltip
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
// Add legend
legend: {
data: ['Year 2013', 'Year 2014']
},
// Enable drag recalculate
calculable: true,
// Horizontal axis
xAxis: [{
type: 'value',
boundaryGap: [0, 0.01]
}],
// Vertical axis
yAxis: [{
type: 'category',
data: ['Germany','France','Spain','Netherlands','Belgium']
}],
// Add series
series: [
{
name: 'Year 2013',
type: 'bar',
itemStyle: {
normal: {
color: '#EF5350'
}
},
data: [38203, 73489, 129034, 204970, 331744]
},
{
name: 'Year 2014',
type: 'bar',
itemStyle: {
normal: {
color: '#66BB6A'
}
},
data: [39325, 83438, 131000, 221594, 334141]
}
]
};
//
// Stacked bars options
//
stacked_bars_options = {
// Setup grid
grid: {
x: 75,
x2: 25,
y: 35,
y2: 25
},
// Add tooltip
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
// Add legend
legend: {
data:['Internet Explorer','Opera','Safari','Firefox','Chrome']
},
// Enable drag recalculate
calculable: true,
// Horizontal axis
xAxis: [{
type: 'value'
}],
// Vertical axis
yAxis: [{
type: 'category',
data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
}],
// Add series
series: [
{
name: 'Internet Explorer',
type: 'bar',
stack: 'Total',
itemStyle: {
normal: {
color: '#42A5F5',
label: {
show: true,
position: 'insideRight'
}
},
emphasis: {
color: '#42A5F5',
label: {
show: true
}
}
},
data:[320, 302, 301, 334, 390, 330, 320]
},
{
name: 'Opera',
type: 'bar',
stack: 'Total',
itemStyle: {
normal: {
color: '#ef5350',
label: {
show: true,
position: 'insideRight'
}
},
emphasis: {
color: '#ef5350',
label: {
show: true
}
}
},
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Safari',
type: 'bar',
stack: 'Total',
itemStyle: {
normal: {
color: '#66bb6a',
label: {
show: true,
position: 'insideRight'
}
},
emphasis: {
color: '#66bb6a',
label: {
show: true
}
}
},
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Firefox',
type: 'bar',
stack: 'Total',
itemStyle: {
normal: {
color: '#ff7043',
label: {
show: true,
position: 'insideRight'
}
},
emphasis: {
color: '#ff7043',
label: {
show: true
}
}
},
data:[150, 212, 201, 154, 190, 330, 410]
},
{
name: 'Chrome',
type: 'bar',
stack: 'Total',
itemStyle: {
normal: {
color: '#26a69a',
label: {
show: true,
position: 'insideRight'
}
},
emphasis: {
color: '#26a69a',
label: {
show: true
}
}
},
data:[820, 832, 901, 934, 1290, 1330, 1320]
}
]
};
//
// Stacked clustered bars options
//
stacked_clustered_bars_options = {
// Setup grid
grid: {
x: 45,
x2: 45,
y: 65,
y2: 25
},
// Add tooltip
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
// Add legends
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'
]
},
// Enable drag recalculate
calculable: true,
// Vertical axis
yAxis: [
{
type: 'category',
data: ['Line','Bar','Scatter','Pies']
},
{
type: 'category',
axisLine: {show: false},
axisTick: {show: false},
axisLabel: {show: false},
splitArea: {show: false},
splitLine: {show: false},
data: ['Line','Bar','Scatter','Pies']
}
],
// Horizontal axis
xAxis: [{
type: 'value',
axisLabel: {formatter: '{value} ms'}
}],
// Add series
series: [
{
name: 'Version 2.0 - 2k data',
type: 'bar',
yAxisIndex: 1,
itemStyle: {
normal: {
color: '#F44336',
label: {
show: true,
textStyle:{
color: '#fff'
}
}
},
emphasis: {
color: '#F44336',
label: {
show: true
}
}
},
data: [247, 187, 95, 175]
},
{
name: 'Version 2.0 - 2w data',
type: 'bar',
yAxisIndex: 1,
itemStyle: {
normal: {
color: '#4CAF50',
label: {
show: true,
textStyle: {
color: '#fff'
}
}
},
emphasis: {
color: '#4CAF50',
label: {
show: true
}
}
},
data: [488, 415, 405, 340]
},
{
name: 'Version 2.0 - 20w data',
type: 'bar',
yAxisIndex: 1,
itemStyle: {
normal: {
color: '#2196F3',
label: {
show: true,
textStyle: {
color: '#fff'
}
}
},
emphasis: {
color: '#2196F3',
label: {
show: true
}
}
},
data: [906, 911, 908, 778]
},
{
name: 'Version 1.7 - 2k data',
type: 'bar',
itemStyle: {
normal: {
color: '#E57373',
label: {
show: true
}
},
emphasis: {
color: '#E57373',
label: {
show: true
}
}
},
data: [680, 819, 564, 724]
},
{
name: 'Version 1.7 - 2w data',
type: 'bar',
itemStyle: {
normal: {
color: '#81C784',
label: {
show: true
}
},
emphasis: {
color: '#81C784',
label: {
show: true
}
}
},
data: [1212, 2035, 1620, 955]
},
{
name: 'Version 1.7 - 20w data',
type: 'bar',
itemStyle: {
normal: {
color: '#64B5F6',
label: {
show: true,
formatter: function(p) {return p.value > 0 ? (p.value +'+'):'';}
}
},
emphasis: {
color: '#64B5F6',
label: {
show: false
}
}
},
data: [2200, 3000, 2500, 3000]
}
]
};
//
// Floating bars options
//
var placeHoledStyle = {
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)'
}
};
var dataStyle = {
normal: {
label: {
show: true,
position: 'insideLeft',
formatter: '{c}%'
}
},
emphasis: {
label: {
show: true
}
}
};
floating_bars_options = {
// Setup grid
grid: {
x: 75,
x2: 10,
y: 35,
y2: 10
},
// Add tooltip
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: '{b}<br/>{a0}: {c0}%<br/>{a2}: {c2}%<br/>{a4}: {c4}%<br/>{a6}: {c6}%'
},
// Add legend
legend: {
itemGap: document.getElementById('floating_bars').offsetWidth / 8,
data: ['GML', 'PYP','WTC', 'ZTW']
},
// Horizontal axis
xAxis: [{
type: 'value',
position: 'top',
splitLine: {show: false},
axisLabel: {show: false}
}],
// Vertical axis
yAxis: [{
type: 'category',
data: ['Paris', 'Berlin', 'Amsterdam', 'Madrid']
}],
// Add series
series: [
{
name: 'GML',
type: 'bar',
stack: 'Total',
itemStyle: dataStyle,
data: [38, 50, 33, 72]
},
{
name: 'GML',
type: 'bar',
stack: 'Total',
itemStyle: placeHoledStyle,
data: [62, 50, 67, 28]
},
{
name: 'PYP',
type: 'bar',
stack: 'Total',
itemStyle: dataStyle,
data: [61, 41, 42, 30]
},
{
name: 'PYP',
type: 'bar',
stack: 'Total',
itemStyle: placeHoledStyle,
data: [39, 59, 58, 70]
},
{
name: 'WTC',
type: 'bar',
stack: 'Total',
itemStyle: dataStyle,
data: [37, 35, 44, 60]
},
{
name: 'WTC',
type: 'bar',
stack: 'Total',
itemStyle: placeHoledStyle,
data: [63, 65, 56, 40]
},
{
name: 'ZTW',
type: 'bar',
stack: 'Total',
itemStyle: dataStyle,
data: [71, 50, 31, 39]
},
{
name: 'ZTW',
type: 'bar',
stack: 'Total',
itemStyle: placeHoledStyle,
data: [29, 50, 69, 61]
}
]
};
//
// Irregular bars options
//
irregular_bars_options = {
// Setup grid
grid: {
x: 25,
x2: 70,
y: 35,
y2: 25
},
// Add tooltip
tooltip: {
trigger: 'axis',
axisPointer: {
show: true,
type: 'cross',
lineStyle: {
type: 'dashed',
width: 1
}
},
formatter: function (params) {
return params.seriesName + ': [ '
+ params.value[0] + ', '
+ params.value[1] + ' ]';
}
},
// Add legend
legend: {
data: ['Data set 1','Data set 2']
},
// Add toolbox
toolbox: {
show: true,
x: 'right',
y: 'center',
orient: 'vertical',
feature: {
mark: {
show: true,
title: {
mark: 'Markline switch',
markUndo: 'Undo markline',
markClear: 'Clear markline'
}
},
dataZoom: {
show: true,
title: {
dataZoom: 'Data zoom',
dataZoomReset: 'Reset zoom'
}
},
dataView: {
show: true,
readOnly: false,
title: 'View data',
lang: ['View chart data', 'Close', 'Update']
},
magicType: {
show: true,
title: {
line: 'Switch to line chart',
bar: 'Switch to bar chart',
},
type: ['line', 'bar']
},
restore: {
show: true,
title: 'Restore'
},
saveAsImage: {
show: true,
title: 'Same as image',
lang: ['Save']
}
}
},
// Enable drag recalculate
calculable: true,
// Horizontal axis
xAxis: [{
type: 'value'
}],
// Vertical axis
yAxis: [{
type: 'value'
}],
// Add series
series: [
{
name: 'Data set 1',
type: 'bar',
itemStyle: {
normal: {
color: '#29B6F6'
}
},
data: [
[1.5, 10], [5, 7], [8, 8], [12, 6], [11, 12], [16, 9], [14, 6], [17, 4], [19, 9]
],
markPoint: {
data: [
// Default vertical axis
{type: 'max', name: 'Maximum', symbol: 'emptyCircle', itemStyle: {normal: {color: '#FF7043',label: {position: 'top'}}}},
{type: 'min', name: 'Minimum', symbol: 'emptyCircle', itemStyle: {normal: {color: '#FF7043',label: {position: 'top'}}}},
// Horizontal axis
{type: 'max', name: 'Maximum', valueIndex: 0, symbol: 'emptyCircle', itemStyle: {normal: {color: '#29B6F6',label: {position: 'right'}}}},
{type: 'min', name: 'Minimum', valueIndex: 0, symbol: 'emptyCircle', itemStyle: {normal: {color: '#29B6F6',label: {position: 'left'}}}}
]
},
markLine: {
data: [
// Default vertical axis
{type: 'max', name: 'Maximum', itemStyle: {normal: {color: '#FF7043'}}},
{type: 'min', name: 'Minimum', itemStyle: {normal: {color: '#FF7043'}}},
{type: 'average', name: 'Average', itemStyle: {normal: {color: '#FF7043'}}},
// Horizontal axis
{type: 'max', name: 'Maximum', valueIndex: 0, itemStyle: {normal: {color: '#29B6F6'}}},
{type: 'min', name: 'Minimum', valueIndex: 0, itemStyle: {normal: {color: '#29B6F6'}}},
{type: 'average', name: 'Average', valueIndex: 0, itemStyle: {normal: {color: '#29B6F6'}}}
]
}
},
{
name: 'Data set 2',
type: 'bar',
itemStyle: {
normal: {
color: '#FF7043'
}
},
barHeight: 10,
data: [
[1, 2], [2, 3], [4, 4], [7, 5], [11, 11], [18, 15]
]
}
]
};
//
// Tornado with negative stacks options
//
tornado_bars_negative_options = {
// Setup grid
grid: {
x: 75,
x2: 25,
y: 35,
y2: 25
},
// Add tooltip
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
// Add legend
legend: {
data: ['Profit', 'Expenses', 'Income']
},
// Enable drag recalculate
calculable: true,
// Horizontal axis
xAxis: [{
type: 'value'
}],
// Vertical axis
yAxis: [{
type: 'category',
axisTick: {
show: false
},
data: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']
}],
// Add series
series: [
{
name: 'Profit',
type: 'bar',
itemStyle: {
normal: {
label: {
show: true,
position: 'inside'
}
}
},
data: [200, 170, 240, 244, 200, 220, 210]
},
{
name: 'Income',
type: 'bar',
stack: 'Total',
barWidth: 5,
itemStyle: {
normal: {
label: {
show: true
}
}
},
data: [320, 302, 341, 374, 390, 450, 420]
},
{
name: 'Expenses',
type: 'bar',
stack: 'Total',
itemStyle: {
normal: {
label: {
show: true,
position: 'left'
}
}
},
data: [-120, -132, -101, -134, -190, -230, -210]
}
]
};
//
// Tornado with staggered labels options
//
var labelRight = {
normal: {
color: '#FF7043',
label: {
position: 'right'
}
}
};
tornado_bars_staggered_options = {
// Setup grid
grid: {
x: 25,
x2: 25,
y: 25,
y2: 10
},
// Add tooltip
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function(params) {
return params[0].seriesName + ': ' + params[0].value + ' €';
}
},
// Horizontal axis
xAxis: [{
type: 'value',
position: 'top',
splitLine: {
lineStyle: {
type: 'dashed'
}
},
}],
// Vertical axis
yAxis: [{
type: 'category',
axisLine: {show: false},
axisLabel: {show: false},
axisTick: {show: false},
splitLine: {show: false},
data: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
}],
// Add series
series: [
{
name: 'Cost of living',
type: 'bar',
stack: 'Total',
itemStyle: {
normal: {
color: '#66BB6A',
barBorderRadius: 3,
label: {
show: true,
position: 'left',
formatter: '{b}'
}
},
emphasis: {
barBorderRadius: 3
}
},
data: [
{value: -680, itemStyle: labelRight},
{value: -300, itemStyle: labelRight},
690,
900,
{value: -390, itemStyle: labelRight},
600,
{value: -120, itemStyle: labelRight},
700,
{value: -120, itemStyle: labelRight},
900,
580,
{value: -720, itemStyle: labelRight}
]
}
]
};
// Apply options
// ------------------------------
basic_bars.setOption(basic_bars_options);
stacked_bars.setOption(stacked_bars_options);
stacked_clustered_bars.setOption(stacked_clustered_bars_options);
floating_bars.setOption(floating_bars_options);
irregular_bars.setOption(irregular_bars_options);
tornado_bars_negative.setOption(tornado_bars_negative_options);
tornado_bars_staggered.setOption(tornado_bars_staggered_options);
// Resize charts
// ------------------------------
window.onresize = function () {
setTimeout(function (){
basic_bars.resize();
stacked_bars.resize();
stacked_clustered_bars.resize();
floating_bars.resize();
irregular_bars.resize();
tornado_bars_negative.resize();
tornado_bars_staggered.resize();
}, 200);
}
}
);
});
assets/js/charts/echarts/candlesticks_others.js
+1073
View File
File diff suppressed because it is too large Load Diff
assets/js/charts/echarts/columns_waterfalls.js
+1017
View File
File diff suppressed because it is too large Load Diff
assets/js/charts/echarts/combinations.js
+905
View File
@@ -0,0 +1,905 @@
/* ------------------------------------------------------------------------------
*
* # Echarts - chart combinations
*
* Chart combination configurations
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function () {
// Set paths
// ------------------------------
require.config({
paths: {
echarts: 'assets/js/plugins/visualization/echarts'
}
});
// Configuration
// ------------------------------
require(
// Add necessary charts
[
'echarts',
'echarts/theme/limitless',
'echarts/chart/line',
'echarts/chart/bar',
'echarts/chart/pie',
'echarts/chart/scatter',
'echarts/chart/k',
'echarts/chart/radar',
'echarts/chart/gauge'
],
// Charts setup
function (ec, limitless) {
// Initialize charts
// ------------------------------
var line_bar = ec.init(document.getElementById('line_bar'), limitless);
var column_pie = ec.init(document.getElementById('column_pie'), limitless);
var scatter_pie = ec.init(document.getElementById('scatter_pie'), limitless);
var scatter_line = ec.init(document.getElementById('scatter_line'), limitless);
var connect_pie = ec.init(document.getElementById('connect_pie'), limitless);
var connect_column = ec.init(document.getElementById('connect_column'), limitless);
var candlestick_scatter = ec.init(document.getElementById('candlestick_scatter'), limitless);
// Charts options
// ------------------------------
//
// Line and bar combination
//
line_bar_options = {
// Setup grid
grid: {
x: 55,
x2: 45,
y: 35,
y2: 25
},
// Add tooltip
tooltip: {
trigger: 'axis'
},
// Enable drag recalculate
calculable: true,
// Add legend
legend: {
data: ['Evaporation','Precipitation','Temperature']
},
// Horizontal axis
xAxis: [{
type: 'category',
data: ['January','February','March','April','May','June','July','August','September','October','November','December']
}],
// Vertical axis
yAxis: [
{
type: 'value',
name: 'Water',
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: 'Temp',
axisLabel: {
formatter: '{value} °C'
}
}
],
// 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]
},
{
name: 'Precipitation',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name: 'Temperature',
type: 'line',
yAxisIndex: 1,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
//
// Column and pie combination
//
column_pie_options = {
// Setup grid
grid: {
x: 10,
x2: 45,
y: 35,
y2: 25
},
// Add tooltip
tooltip: {
trigger: 'axis'
},
// Enable drag recalculate
calculable: true,
// Add legend
legend: {
data: ['Direct','Email','Print','Video','Search engine','Google','Bing','Yahoo','Other']
},
// Horizontal axis
xAxis: [{
type: 'category',
splitLine: {show: false},
data: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']
}],
// Vertical axis
yAxis: [{
type: 'value',
position: 'right'
}],
// Add series
series: [
{
name: 'Direct',
type: 'bar',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Email',
type: 'bar',
tooltip: {trigger: 'item'},
stack: 'Advertisement',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Print',
type: 'bar',
tooltip: {trigger: 'item'},
stack: 'Advertisement',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video',
type: 'bar',
tooltip: {trigger: 'item'},
stack: 'Advertisement',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Search engine',
type: 'line',
data: [862, 1018, 964, 1026, 1679, 1600, 1570]
},
// Pie
{
name: 'Search engine',
type: 'pie',
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
center: [150, 130],
radius: [0, 50],
itemStyle:　{
normal: {
labelLine: {
length: 20
}
}
},
data: [
{value: 1048, name: 'Google'},
{value: 251, name: 'Bing'},
{value: 147, name: 'Yahoo'},
{value: 102, name: 'Other'}
]
}
]
};
//
// Scatter and pie combination
//
// Data set 1
var sData1 = (function () {
var d = [];
var len = 40;
var value;
while (len--) {
d.push([
Math.round(Math.random()*10) * (Math.round(Math.random()*10) > 5 ? 1: -1),
Math.round(Math.random()*10) * (Math.round(Math.random()*10) > 5 ? 1: -1),
Math.round(Math.random()*20)
]);
}
return d;
})();
// Data set 2
var sData2 = (function () {
var d = [];
var len = sData1.length;
for (var i = 0; i < len; i++) {
d.push([
sData1[i][0],
sData1[i][1],
Math.round(Math.random()*15)
]);
}
return d;
})();
// Setup
scatter_pie_options = {
// Setup grid
grid: {
x: 35,
x2: 35,
y: 35,
y2: 35
},
// Set custo, colors
color: ['rgba(255, 69, 0, 0.5)', 'rgba(30, 144, 255, 0.5)'],
// Add tooltip
tooltip: {
trigger: 'item',
formatter: "{b}: {c} ({d}%)"
},
// Horizontal axis
xAxis: [{
type: 'value',
splitNumber: 2
}],
// Vertical axis
yAxis: [{
type: 'value',
splitNumber: 2
}],
//animation: false,
// Add series
series: [
{
type: 'scatter',
symbol: 'none',
data: sData1
},
{
type: 'scatter',
symbol: 'none',
data: sData2
}
]
};
// Generate pie series
function buildPieSeries() {
var xAxis = scatter_pie.component.xAxis.getAxis(0);
var yAxis = scatter_pie.component.yAxis.getAxis(0);
var len = sData1.length;
scatter_pie_options.series = scatter_pie_options.series.slice(0,2);
scatter_pie_options.legend = {
data: ['Summer', 'Winter']
};
while (len--) {
scatter_pie_options.series.push({
type: 'pie',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
radius: sData1[len][2] + sData2[len][2],
center: [
xAxis.getCoord(sData1[len][0]),
yAxis.getCoord(sData1[len][1])
],
data: [
{name: 'Summer', value: sData1[len][2]},
{name: 'Winter', value: sData2[len][2]}
]
})
}
scatter_pie_options.animation = true;
scatter_pie.setOption(scatter_pie_options, true);
}
// Build pie charts instead of the original scatter
setTimeout(buildPieSeries, 100);
//
// Scatter and line combination
//
scatter_line_options = {
// Setup grid
grid: {
x: 35,
x2: 35,
y: 35,
y2: 25
},
// Add tooltip
tooltip: {
trigger: 'axis'
},
// Add data range
dataRange: {
min: 0,
max: 100,
orient: 'horizontal',
y: 'top',
x: 'center',
color: ['#FF8A65','#FBE9E7'],
splitNumber: 5
},
// Horizontal axis
xAxis: [
{
type: 'category',
boundaryGap: false,
data: function () {
var list = [];
for (var i = 1; i <= 15; i++) {
list.push('2013-03-' + i);
}
return list;
}()
},
{
type: 'value',
scale: true,
splitNumber: 15,
axisLabel: {show: false},
splitLine: {show: false}
}
],
// Vertical axis
yAxis: [
{
type: 'value'
},
{
type: 'value'
}
],
// Add series
series: [
{
name: 'Scatter value',
type: 'scatter',
tooltip: {
trigger: 'item',
formatter: function (params) {
return '2013-03-' + params.value[0] + '<br/>'
+ params.seriesName + ': '
+ params.value[1] + ', '
+ params.value[2];
}
},
yAxisIndex: 1,
xAxisIndex: 1,
symbol: 'circle',
symbolSize: function (value){
return Math.round(value[2]/10);
},
data: (function () {
var d = [];
var len = 200;
var value;
while (len--) {
d.push([
Math.round(Math.random()*29) + 1,
(Math.random()*30).toFixed(2) - 0,
(Math.random()*100).toFixed(2) - 0
]);
}
return d;
})()
},
{
name: 'Line value',
type: 'line',
data: function (){
var list = [];
for (var i = 1; i <= 30; i++) {
list.push(Math.round(Math.random()* 30));
}
return list;
}()
}
]
};
//
// Column and pie connection
//
// Pie options
connect_pie_options = {
// Add title
title: {
text: 'Browser popularity',
subtext: 'Open source data',
x: 'center'
},
// Add tooltip
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
// Add legend
legend: {
orient: 'vertical',
x: 'left',
data: ['Internet Explorer','Opera','Safari','Firefox','Chrome']
},
// Enable drag recalculate
calculable: true,
// Add series
series: [{
name: 'Browser',
type: 'pie',
radius: '75%',
center: ['50%', '57.5%'],
data: [
{value: 335, name: 'Internet Explorer'},
{value: 310, name: 'Opera'},
{value: 234, name: 'Safari'},
{value: 135, name: 'Firefox'},
{value: 1548, name: 'Chrome'}
]
}]
};
// Column options
connect_column_options = {
// Setup grid
grid: {
x: 40,
x2: 47,
y: 35,
y2: 25
},
// Add tooltip
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
// Add legend
legend: {
data: ['Internet Explorer','Opera','Safari','Firefox','Chrome']
},
// Add toolbox
toolbox: {
show: true,
orient: 'vertical',
x: 'right',
y: 35,
feature: {
mark: {
show: true,
title: {
mark: 'Markline switch',
markUndo: 'Undo markline',
markClear: 'Clear markline'
}
},
magicType: {
show: true,
title: {
line: 'Switch to line chart',
bar: 'Switch to bar chart',
stack: 'Switch to stack',
tiled: 'Switch to tiled'
},
type: ['line', 'bar', 'stack', 'tiled']
},
restore: {
show: true,
title: 'Restore'
},
saveAsImage: {
show: true,
title: 'Same as image',
lang: ['Save']
}
}
},
// Enable drag recalculate
calculable: true,
// Horizontal axis
xAxis: [{
type: 'category',
data: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']
}],
// Vertical axis
yAxis: [{
type: 'value',
splitArea: {show: true}
}],
// Add series
series: [
{
name: 'Internet Explorer',
type: 'bar',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Opera',
type: 'bar',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Safari',
type: 'bar',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Firefox',
type: 'bar',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Chrome',
type: 'bar',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
// Connect charts
connect_pie.connect(connect_column);
connect_column.connect(connect_pie);
//
// Dynamic data (scatter and candlestick combination)
//
candlestick_scatter_options = {
// Setup grid
grid: {
x: 45,
x2: 45,
y: 60,
y2: 90
},
// Add tooltip
tooltip: {
trigger: 'axis'
},
// Add legend
legend: {
data:['Composite index', 'Turnover (million)']
},
// Display data zoom
dataZoom: {
show: true,
realtime: true,
start: 50,
end: 100,
height: 40
},
// Horizontal axis
xAxis: [
{
type: 'category',
boundaryGap: true,
data: [
"2013/1/24", "2013/1/25", "2013/1/28", "2013/1/29", "2013/1/30",
"2013/1/31", "2013/2/1", "2013/2/4", "2013/2/5", "2013/2/6",
"2013/2/7", "2013/2/8", "2013/2/18", "2013/2/19", "2013/2/20",
"2013/2/21", "2013/2/22", "2013/2/25", "2013/2/26", "2013/2/27",
"2013/2/28", "2013/3/1", "2013/3/4", "2013/3/5", "2013/3/6",
"2013/3/7", "2013/3/8", "2013/3/11", "2013/3/12", "2013/3/13",
"2013/3/14", "2013/3/15", "2013/3/18", "2013/3/19", "2013/3/20",
"2013/3/21", "2013/3/22", "2013/3/25", "2013/3/26", "2013/3/27",
"2013/3/28", "2013/3/29", "2013/4/1", "2013/4/2", "2013/4/3",
"2013/4/8", "2013/4/9", "2013/4/10", "2013/4/11", "2013/4/12",
"2013/4/15", "2013/4/16", "2013/4/17", "2013/4/18", "2013/4/19",
"2013/4/22", "2013/4/23", "2013/4/24", "2013/4/25", "2013/4/26",
"2013/5/2", "2013/5/3", "2013/5/6", "2013/5/7", "2013/5/8",
"2013/5/9", "2013/5/10", "2013/5/13", "2013/5/14", "2013/5/15",
"2013/5/16", "2013/5/17", "2013/5/20", "2013/5/21", "2013/5/22",
"2013/5/23", "2013/5/24", "2013/5/27", "2013/5/28", "2013/5/29",
"2013/5/30", "2013/5/31", "2013/6/3", "2013/6/4", "2013/6/5",
"2013/6/6", "2013/6/7", "2013/6/13"
]
},
{
type: 'value',
max: 100,
scale: true
}
],
// Vertical axis
yAxis: [
{
type: 'value',
scale: true,
splitNumber: 5,
boundaryGap: [0.05, 0.05]
},
{
type: 'value',
splitNumber: 5,
scale: true
}
],
// Add series
series: [
{
name: 'Composite index',
type: 'k',
data: [
[2320.26,2302.6,2287.3,2362.94],
[2300,2291.3,2288.26,2308.38],
[2295.35,2346.5,2295.35,2346.92],
[2347.22,2358.98,2337.35,2363.8],
[2360.75,2382.48,2347.89,2383.76],
[2383.43,2385.42,2371.23,2391.82],
[2377.41,2419.02,2369.57,2421.15],
[2425.92,2428.15,2417.58,2440.38],
[2411,2433.13,2403.3,2437.42],
[2432.68,2434.48,2427.7,2441.73],
[2430.69,2418.53,2394.22,2433.89],
[2416.62,2432.4,2414.4,2443.03],
[2441.91,2421.56,2415.43,2444.8],
[2420.26,2382.91,2373.53,2427.07],
[2383.49,2397.18,2370.61,2397.94],
[2378.82,2325.95,2309.17,2378.82],
[2322.94,2314.16,2308.76,2330.88],
[2320.62,2325.82,2315.01,2338.78],
[2313.74,2293.34,2289.89,2340.71],
[2297.77,2313.22,2292.03,2324.63],
[2322.32,2365.59,2308.92,2366.16],
[2364.54,2359.51,2330.86,2369.65],
[2332.08,2273.4,2259.25,2333.54],
[2274.81,2326.31,2270.1,2328.14],
[2333.61,2347.18,2321.6,2351.44],
[2340.44,2324.29,2304.27,2352.02],
[2326.42,2318.61,2314.59,2333.67],
[2314.68,2310.59,2296.58,2320.96],
[2309.16,2286.6,2264.83,2333.29],
[2282.17,2263.97,2253.25,2286.33],
[2255.77,2270.28,2253.31,2276.22],
[2269.31,2278.4,2250,2312.08],
[2267.29,2240.02,2239.21,2276.05],
[2244.26,2257.43,2232.02,2261.31],
[2257.74,2317.37,2257.42,2317.86],
[2318.21,2324.24,2311.6,2330.81],
[2321.4,2328.28,2314.97,2332],
[2334.74,2326.72,2319.91,2344.89],
[2318.58,2297.67,2281.12,2319.99],
[2299.38,2301.26,2289,2323.48],
[2273.55,2236.3,2232.91,2273.55],
[2238.49,2236.62,2228.81,2246.87],
[2229.46,2234.4,2227.31,2243.95],
[2234.9,2227.74,2220.44,2253.42],
[2232.69,2225.29,2217.25,2241.34],
[2196.24,2211.59,2180.67,2212.59],
[2215.47,2225.77,2215.47,2234.73],
[2224.93,2226.13,2212.56,2233.04],
[2236.98,2219.55,2217.26,2242.48],
[2218.09,2206.78,2204.44,2226.26],
[2199.91,2181.94,2177.39,2204.99],
[2169.63,2194.85,2165.78,2196.43],
[2195.03,2193.8,2178.47,2197.51],
[2181.82,2197.6,2175.44,2206.03],
[2201.12,2244.64,2200.58,2250.11],
[2236.4,2242.17,2232.26,2245.12],
[2242.62,2184.54,2182.81,2242.62],
[2187.35,2218.32,2184.11,2226.12],
[2213.19,2199.31,2191.85,2224.63],
[2203.89,2177.91,2173.86,2210.58],
[2170.78,2174.12,2161.14,2179.65],
[2179.05,2205.5,2179.05,2222.81],
[2212.5,2231.17,2212.5,2236.07],
[2227.86,2235.57,2219.44,2240.26],
[2242.39,2246.3,2235.42,2255.21],
[2246.96,2232.97,2221.38,2247.86],
[2228.82,2246.83,2225.81,2247.67],
[2247.68,2241.92,2231.36,2250.85],
[2238.9,2217.01,2205.87,2239.93],
[2217.09,2224.8,2213.58,2225.19],
[2221.34,2251.81,2210.77,2252.87],
[2249.81,2282.87,2248.41,2288.09],
[2286.33,2299.99,2281.9,2309.39],
[2297.11,2305.11,2290.12,2305.3],
[2303.75,2302.4,2292.43,2314.18],
[2293.81,2275.67,2274.1,2304.95],
[2281.45,2288.53,2270.25,2292.59],
[2286.66,2293.08,2283.94,2301.7],
[2293.4,2321.32,2281.47,2322.1],
[2323.54,2324.02,2321.17,2334.33],
[2316.25,2317.75,2310.49,2325.72],
[2320.74,2300.59,2299.37,2325.53],
[2300.21,2299.25,2294.11,2313.43],
[2297.1,2272.42,2264.76,2297.1],
[2270.71,2270.93,2260.87,2276.86],
[2264.43,2242.11,2240.07,2266.69],
[2242.26,2210.9,2205.07,2250.63],
[2190.1,2148.35,2126.22,2190.1]
]
},
{
name: 'Turnover (million)',
type: 'scatter',
xAxisIndex: 1,
yAxisIndex: 1,
symbolSize: function (value) {
return Math.round(value[2] / 4);
},
data: (function () {
var d = [];
var len = 100;
while (len--) {
d.push([
(Math.random()*100).toFixed(2) - 0,
(Math.random()*100).toFixed(2) - 0,
(Math.random()*100).toFixed(2) - 0
]);
}
return d;
})()
}
]
};
var lastIndex = 0;
var len = candlestick_scatter_options.series[0].data.length;
clearInterval(random_data);
var random_data = setInterval(function (){
lastIndex += 1;
candlestick_scatter.addData([
[
0,
candlestick_scatter_options.series[0].data[lastIndex%len],
false,
false,
candlestick_scatter_options.xAxis[0].data[lastIndex%len]
],
[
1,
[
(Math.random()*100).toFixed(2) - 0,
(Math.random()*100).toFixed(2) - 0,
(Math.random()*100).toFixed(2) - 0
],
false,
false
]
]);
}, 2000);
// Apply options
// ------------------------------
line_bar.setOption(line_bar_options);
column_pie.setOption(column_pie_options);
scatter_pie.setOption(scatter_pie_options);
scatter_line.setOption(scatter_line_options);
candlestick_scatter.setOption(candlestick_scatter_options);
connect_pie.setOption(connect_pie_options);
connect_column.setOption(connect_column_options);
// Resize charts
// ------------------------------
window.onresize = function () {
setTimeout(function (){
line_bar.resize();
column_pie.resize();
scatter_pie.resize();
buildPieSeries();
scatter_line.resize();
candlestick_scatter.resize();
connect_pie.resize();
connect_column.resize();
}, 200);
}
}
);
});
assets/js/charts/echarts/funnels_chords.js
+1106
View File
File diff suppressed because it is too large Load Diff
assets/js/charts/echarts/lines_areas.js
+686
View File
@@ -0,0 +1,686 @@
/* ------------------------------------------------------------------------------
*
* # Echarts - lines and areas
*
* Lines and areas chart configurations
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function() {
// Set paths
// ------------------------------
require.config({
paths: {
echarts: 'assets/js/plugins/visualization/echarts'
}
});
// Configuration
// ------------------------------
require(
[
'echarts',
'echarts/theme/limitless',
'echarts/chart/bar',
'echarts/chart/line'
],
// Charts setup
function (ec, limitless) {
// Initialize charts
// ------------------------------
var basic_lines = ec.init(document.getElementById('basic_lines'), limitless);
var stacked_lines = ec.init(document.getElementById('stacked_lines'), limitless);
var inverted_axes = ec.init(document.getElementById('inverted_axes'), limitless);
var line_point = ec.init(document.getElementById('line_point'), limitless);
var basic_area = ec.init(document.getElementById('basic_area'), limitless);
var stacked_area = ec.init(document.getElementById('stacked_area'), limitless);
var reversed_value = ec.init(document.getElementById('reversed_value'), limitless);
// Charts setup
// ------------------------------
//
// Basic lines options
//
basic_lines_options = {
// Setup grid
grid: {
x: 40,
x2: 40,
y: 35,
y2: 25
},
// Add tooltip
tooltip: {
trigger: 'axis'
},
// Add legend
legend: {
data: ['Maximum', 'Minimum']
},
// Add custom colors
color: ['#EF5350', '#66BB6A'],
// Enable drag recalculate
calculable: true,
// Horizontal axis
xAxis: [{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}],
// Vertical axis
yAxis: [{
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
}],
// Add series
series: [
{
name: 'Maximum',
type: 'line',
data: [11, 11, 15, 13, 12, 13, 10],
markLine: {
data: [{
type: 'average',
name: 'Average'
}]
}
},
{
name: 'Minimum',
type: 'line',
data: [1, -2, 2, 5, 3, 2, 0],
markLine: {
data: [{
type: 'average',
name: 'Average'
}]
}
}
]
};
//
// Stacked lines options
//
stacked_lines_options = {
// Setup grid
grid: {
x: 40,
x2: 20,
y: 35,
y2: 25
},
// Add tooltip
tooltip: {
trigger: 'axis'
},
// Add legend
legend: {
data: ['Internet Explorer', 'Opera', 'Safari', 'Firefox', 'Chrome']
},
// Enable drag recalculate
calculable: true,
// Hirozontal axis
xAxis: [{
type: 'category',
boundaryGap: false,
data: [
'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
]
}],
// Vertical axis
yAxis: [{
type: 'value'
}],
// Add series
series: [
{
name: 'Internet Explorer',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Opera',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Safari',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Firefox',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Chrome',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
//
// Inverted axes options
//
inverted_axes_options = {
// Setup grid
grid: {
x: 40,
x2: 20,
y: 35,
y2: 25
},
// Add legend
legend: {
data: ['Altitude(km) and temperature(°C)']
},
// Enable drag recalculate
calculable: true,
// Add tooltip
tooltip: {
trigger: 'axis',
formatter: 'Temperature: <br/>{b}km: {c}°C'
},
// Horizontal axis
xAxis: [{
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
}],
// Vertical axis
yAxis: [{
type: 'category',
axisLine: {
onZero: false
},
axisLabel: {
formatter: '{value} km'
},
boundaryGap: false,
data: [
0, 10, 20, 30, 40, 50, 60, 70, 80
]
}],
// Add series
series: [
{
name: 'Altitude(km) and temperature(°C)',
type: 'line',
smooth: true,
itemStyle: {
normal: {
lineStyle: {
shadowColor: 'rgba(0,0,0,0.4)'
}
}
},
data: [
15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5
]
}
]
};
//
// Line and point options
//
line_point_options = {
// Setup grid
grid: {
x: 35,
x2: 35,
y: 60,
y2: 25
},
// Add tooltip
tooltip: {
trigger: 'axis',
axisPointer: {
show: true,
type: 'cross',
lineStyle: {
type: 'dashed',
width: 1
}
},
formatter: function (params) {
return params.seriesName + ': [ '
+ params.value[0] + ', '
+ params.value[1] + ' ]';
}
},
// Add legend
legend: {
x: 'left',
data: ['Data set 1', 'Data set 2']
},
// Display toolbox
toolbox: {
show: true,
feature: {
mark: {
show: true,
title: {
mark: 'Markline switch',
markUndo: 'Undo markline',
markClear: 'Clear markline'
}
},
dataZoom: {
show: true,
title: {
dataZoom: 'Data zoom',
dataZoomReset: 'Reset zoom'
}
},
dataView: {
show: true,
readOnly: false,
title: 'View data',
lang: ['View chart data', 'Close', 'Update']
},
magicType: {
show: true,
title: {
line: 'Switch to line chart',
bar: 'Switch to bar chart',
},
type: ['line', 'bar']
},
restore: {
show: true,
title: 'Restore'
},
saveAsImage: {
show: true,
title: 'Same as image',
lang: ['Save']
}
}
},
// Enable drag recalculate
calculable: true,
// Horizontal axis
xAxis: [{
type: 'value'
}],
// Vertical axis
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#dc143c'
}
}
}
],
// Add series
series: [
{
name: 'Data set 1',
type: 'line',
data: [
[1.5, 10], [5, 7], [8, 8], [12, 6], [11, 12], [16, 9], [14, 6], [17, 4], [19, 9]
],
markPoint: {
data: [
// Vertical
{type: 'max', name: 'Maximum',symbol: 'emptyCircle', itemStyle: {normal: {color: '#EF5350',label: {position: 'top'}}}},
{type: 'min', name: 'Minimum',symbol: 'emptyCircle', itemStyle: {normal: {color: '#EF5350',label: {position: 'bottom'}}}},
// Horizontal
{type: 'max', name: 'Maximum', valueIndex: 0, symbol: 'emptyCircle', itemStyle: {normal: {color: '#42A5F5',label: {position: 'right'}}}},
{type: 'min', name: 'Minimum', valueIndex: 0, symbol: 'emptyCircle', itemStyle: {normal: {color: '#42A5F5',label: {position: 'left'}}}}
]
},
markLine: {
data: [
// Vertical
{type: 'max', name: 'Maximum', itemStyle: {normal: {color: '#EF5350'}}},
{type: 'min', name: 'Minimum', itemStyle: {normal: {color: '#EF5350'}}},
{type: 'average', name: 'Average', itemStyle: {normal: {color: '#EF5350'}}},
// Horizontal
{type: 'max', name: 'Maximum', valueIndex: 0, itemStyle: {normal: {color: '#42A5F5'}}},
{type: 'min', name: 'Minimum', valueIndex: 0, itemStyle: {normal: {color: '#42A5F5'}}},
{type: 'average', name: 'Average', valueIndex: 0, itemStyle: {normal: {color: '#42A5F5'}}}
]
}
},
{
name: 'Data set 2',
type: 'line',
data: [
[1, 2], [2, 3], [4, 2], [7, 5], [11, 2], [18, 3]
]
}
]
};
//
// Basic area options
//
basic_area_options = {
// Setup grid
grid: {
x: 40,
x2: 20,
y: 35,
y2: 25
},
// Add tooltip
tooltip: {
trigger: 'axis'
},
// Add legend
legend: {
data: ['New orders', 'In progress', 'Closed deals']
},
// Enable drag recalculate
calculable: true,
// Horizontal axis
xAxis: [{
type: 'category',
boundaryGap: false,
data: [
'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
]
}],
// Vertical axis
yAxis: [{
type: 'value'
}],
// Add series
series: [
{
name: 'Closed deals',
type: 'line',
smooth: true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: [10, 12, 21, 54, 260, 830, 710]
},
{
name: 'In progress',
type: 'line',
smooth: true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: [30, 182, 434, 791, 390, 30, 10]
},
{
name: 'New orders',
type: 'line',
smooth: true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: [1320, 1132, 601, 234, 120, 90, 20]
}
]
};
//
// Stacked area options
//
stacked_area_options = {
// Setup grid
grid: {
x: 40,
x2: 20,
y: 35,
y2: 25
},
// Add tooltip
tooltip: {
trigger: 'axis'
},
// Add legend
legend: {
data: ['Internet Explorer', 'Safari', 'Firefox', 'Chrome']
},
// Enable drag recalculate
calculable: true,
// Add horizontal axis
xAxis: [{
type: 'category',
boundaryGap: false,
data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
}],
// Add vertical axis
yAxis: [{
type: 'value'
}],
// Add series
series: [
{
name: 'Internet Explorer',
type: 'line',
stack: 'Total',
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: [120, 132, 101, 134, 490, 230, 210]
},
{
name: 'Safari',
type: 'line',
stack: 'Total',
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: [150, 1232, 901, 154, 190, 330, 810]
},
{
name: 'Firefox',
type: 'line',
stack: 'Total',
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: [320, 1332, 1801, 1334, 590, 830, 1220]
},
{
name: 'Chrome',
type: 'line',
stack: 'Total',
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: [820, 1632, 1901, 2234, 1290, 1330, 1320]
}
]
};
//
// Reversed value axis options
//
reversed_value_options = {
// Setup grid
grid: {
x: 40,
x2: 40,
y: 35,
y2: 25
},
// Add tooltip
tooltip: {
trigger: 'axis',
formatter: function(params) {
return params[0].name + '<br/>'
+ params[0].seriesName + ': ' + params[0].value + ' (m^3/s)<br/>'
+ params[1].seriesName + ': ' + -params[1].value + ' (mm)';
}
},
// Add legend
legend: {
data: ['Flow', 'Rainfall']
},
// Add horizontal axis
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
onZero: false
},
data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
}],
// Add vertical axis
yAxis: [
{
name: 'Flow(m^3/s)',
type: 'value',
max: 500
},
{
name: 'Rainfall(mm)',
type: 'value',
axisLabel: {
formatter: function(v) {
return - v;
}
}
}
],
// Add series
series: [
{
name: 'Flow',
type: 'line',
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[100, 200, 240, 180, 90, 200, 130]
},
{
name: 'Rainfall',
type: 'line',
yAxisIndex: 1,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: (function() {
var oriData = [
1, 2, 1.5, 7.4, 3.1, 4, 2
];
var len = oriData.length;
while(len--) {
oriData[len] *= -1;
}
return oriData;
})()
}
]
};
// Apply options
// ------------------------------
basic_lines.setOption(basic_lines_options);
stacked_lines.setOption(stacked_lines_options);
inverted_axes.setOption(inverted_axes_options);
line_point.setOption(line_point_options);
basic_area.setOption(basic_area_options);
stacked_area.setOption(stacked_area_options);
reversed_value.setOption(reversed_value_options);
// Resize charts
// ------------------------------
window.onresize = function () {
setTimeout(function () {
basic_lines.resize();
stacked_lines.resize();
inverted_axes.resize();
line_point.resize();
basic_area.resize();
stacked_area.resize();
reversed_value.resize();
}, 200);
}
}
);
});
assets/js/charts/echarts/pies_donuts.js
+1280
View File
File diff suppressed because it is too large Load Diff
assets/js/charts/echarts/scatter.js
+1021
View File
File diff suppressed because it is too large Load Diff
assets/js/charts/echarts/timeline_option.js
+96
View File
@@ -0,0 +1,96 @@
/* ------------------------------------------------------------------------------
*
* # Echarts - timeline
*
* Timeline chart addition
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
var dataMap = {};
function dataFormatter(obj) {
var pList = ['Paris','Budapest','Prague','Madrid','Amsterdam','Berlin','Bratislava','Munich','Hague','Rome','Milan'];
var temp;
var max = 0;
for (var year = 2010; year <= 2014; year++) {
temp = obj[year];
for (var i = 0, l = temp.length; i < l; i++) {
max = Math.max(max, temp[i]);
obj[year][i] = {
name : pList[i],
value : temp[i]
}
}
obj[year+'max'] = Math.floor(max/100) * 100;
}
return obj;
}
function dataMix(list) {
var mixData = {};
for (var i = 0, l = list.length; i < l; i++) {
for (var key in list[i]) {
if (list[i][key] instanceof Array) {
mixData[key] = mixData[key] || [];
for (var j = 0, k = list[i][key].length; j < k; j++) {
mixData[key][j] = mixData[key][j]
|| {name : list[i][key][j].name, value : []};
mixData[key][j].value.push(list[i][key][j].value);
}
}
}
}
return mixData;
}
dataMap.dataGDP = dataFormatter({
2014:[16251.93,11307.28,24515.76,11237.55,14359.88,22226.7,10568.83,12582,19195.69,49110.27,32318.85],
2013:[14113.58,9224.46,20394.26,9200.86,11672,18457.27,8667.58,10368.6,17165.98,41425.48,27722.31],
2012:[12153.03,7521.85,17235.48,7358.31,9740.25,15212.49,7278.75,8587,15046.45,34457.3,22990.35],
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,18753.73],
});
dataMap.dataPI = dataFormatter({
2014:[136.27,159.72,2905.73,641.42,1306.3,1915.57,1277.44,1701.5,124.94,3064.78,1583.04],
2013:[124.36,145.58,2562.81,554.48,1095.28,1631.08,1050.15,1302.9,114.15,2540.1,1360.56],
2012:[118.29,128.85,2207.34,477.59,929.6,1414.9,980.57,1154.33,113.82,2261.86,1163.08],
2011:[112.83,122.58,2034.59,313.58,907.95,1302.02,916.72,1088.94,111.8,2100.11,1095.96],
2010:[101.26,110.19,1804.72,311.97,762.1,1133.42,783.8,915.38,101.84,1816.31,986.02],
});
dataMap.dataSI = dataFormatter({
2014:[3752.48,5928.32,13126.86,6635.26,8037.69,12152.15,5611.48,5962.41,7927.89,25203.28,16555.58],
2013:[3388.38,4840.23,10707.68,5234,6367.69,9976.82,4506.31,5025.15,7218.32,21753.93,14297.93],
2012:[2855.55,3987.84,8959.83,3993.8,5114,7906.34,3541.92,4060.72,6001.78,18566.37,11908.49],
2011:[2626.41,3709.78,8701.34,4242.36,4376.19,7158.84,3097.12,4319.75,6085.84,16993.34,11567.42],
2010:[2509.4,2892.53,7201.88,3454.49,3193.67,5544.14,2475.45,3695.58,5571.06,14471.26,10154.25],
});
dataMap.dataTI = dataFormatter({
2014:[12363.18,5219.24,8483.17,3960.87,5015.89,8158.98,3679.91,4918.09,11142.86,20842.21,14180.23],
2013:[10600.84,4238.65,7123.77,3412.38,4209.03,6849.37,3111.12,4040.55,9833.51,17131.45,12063.82],
2012:[9179.19,3405.16,6068.31,2886.92,3696.65,5891.25,2756.26,3371.95,8930.85,13629.07,9918.78],
2011:[8375.76,2886.65,5276.04,2759.46,3212.06,5207.72,2412.26,2905.68,7872.23,11888.53,8799.31],
2010:[7236.15,2250.04,4600.72,2257.99,2467.41,4486.74,2025.44,2493.04,6821.11,9730.91,7613.46],
});
dataMap.dataEstate = dataFormatter({
2014:[1074.93,411.46,918.02,224.91,384.76,876.12,238.61,492.1,1019.68,2747.89,1677.13],
2013:[1006.52,377.59,697.79,192,309.25,733.37,212.32,391.89,1002.5,2600.95,1618.17],
2012:[1062.47,308.73,612.4,173.31,286.65,605.27,200.14,301.18,1237.56,2025.39,1316.84],
2011:[844.59,227.88,513.81,166.04,273.3,500.81,182.7,244.47,939.34,1626.13,1052.03],
2010:[821.5,183.44,467.97,134.12,191.01,410.43,153.03,225.81,958.06,1365.71,981.42],
});
dataMap.dataFinancial = dataFormatter({
2014:[2215.41,756.5,746.01,519.32,447.46,755.57,207.65,370.78,2277.4,2600.11,2730.29],
2013:[1863.61,572.99,615.42,448.3,346.44,639.27,190.12,304.59,1950.96,2105.92,2326.58],
2012:[1603.63,461.2,525.67,361.64,291.1,560.2,180.83,227.54,1804.28,1596.98,1899.33],
2011:[1519.19,368.1,420.74,290.91,219.09,455.07,147.24,177.43,1414.21,1298.48,1653.45],
2010:[1302.77,288.17,347.65,218.73,148.3,386.34,126.03,155.48,1209.08,1054.25,1251.43],
});
dataMap.dataGDP_Estate = dataMix([dataMap.dataEstate, dataMap.dataGDP]);