Mini Shell
Mini Shell
| Direktori : /home/opti/workflow/src/public/app-assets/js/scripts/charts/echarts/pie-doughnut/ |
| Current File : /home/opti/workflow/src/public/app-assets/js/scripts/charts/echarts/pie-doughnut/timeline.js |
/*=========================================================================================
File Name: timeline.js
Description: echarts timeline chart
----------------------------------------------------------------------------------------
Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
Version: 1.0
Author: PIXINVENT
Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/
// Timeline chart
// ------------------------------
$(window).on("load", function(){
// Set paths
// ------------------------------
require.config({
paths: {
echarts: '../../../app-assets/vendors/js/charts/echarts'
}
});
// Configuration
// ------------------------------
require(
[
'echarts',
'echarts/chart/pie',
'echarts/chart/funnel'
],
// Charts setup
function (ec) {
// Initialize chart
// ------------------------------
var myChart = ec.init(document.getElementById('timeline'));
var idx = 1;
// Chart Options
// ------------------------------
chartOptions = {
// Add timeline
timeline: {
x: 10,
x2: 10,
data: [
'2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01', '2014-05-01',
{ name:'2014-06-01', symbol: 'emptyStar2', symbolSize: 8 },
'2014-07-01', '2014-08-01', '2014-09-01', '2014-10-01', '2014-11-01',
{ name:'2014-12-01', symbol: 'star2', symbolSize: 8 }
],
label: {
formatter: function(s) {
return s.slice(0, 7);
}
},
autoPlay: true,
playInterval: 3000
},
// Set options
options: [
{
// Add title
title: {
text: 'Browser statistics',
subtext: 'Based on shared research',
x: 'center'
},
// Add tooltip
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
// Add legend
legend: {
x: 'left',
orient: 'vertical',
data: ['Chrome','Firefox','Safari','IE9+','IE8-']
},
// Add custom colors
color: ['#00A5A8', '#626E82', '#FF7D4D','#FF4558', '#28D094'],
// Display toolbox
toolbox: {
show: true,
orient: 'vertical',
feature: {
mark: {
show: true,
title: {
mark: 'Markline switch',
markUndo: 'Undo markline',
markClear: 'Clear markline'
}
},
dataView: {
show: true,
readOnly: false,
title: 'View data',
lang: ['View chart data', 'Close', 'Update']
},
magicType: {
show: true,
title: {
pie: 'Switch to pies',
funnel: 'Switch to funnel',
},
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1700
}
}
},
restore: {
show: true,
title: 'Restore'
},
saveAsImage: {
show: true,
title: 'Same as image',
lang: ['Save']
}
}
},
// Add series
series: [{
name: 'Browser',
type: 'pie',
center: ['50%', '50%'],
radius: '60%',
data: [
{value: idx * 128 + 80, name: 'Chrome'},
{value: idx * 64 + 160, name: 'Firefox'},
{value: idx * 32 + 320, name: 'Safari'},
{value: idx * 16 + 640, name: 'IE9+'},
{value: idx++ * 8 + 1280, name: 'IE8-'}
]
}]
},
{
series: [{
name: 'Browser',
type: 'pie',
data: [
{value: idx * 128 + 80, name:'Chrome'},
{value: idx * 64 + 160, name:'Firefox'},
{value: idx * 32 + 320, name:'Safari'},
{value: idx * 16 + 640, name:'IE9+'},
{value: idx++ * 8 + 1280, name:'IE8-'}
]
}]
},
{
series: [{
name: 'Browser',
type: 'pie',
data: [
{value: idx * 128 + 80, name:'Chrome'},
{value: idx * 64 + 160, name:'Firefox'},
{value: idx * 32 + 320, name:'Safari'},
{value: idx * 16 + 640, name:'IE9+'},
{value: idx++ * 8 + 1280, name:'IE8-'}
]
}]
},
{
series: [{
name: 'Browser',
type: 'pie',
data: [
{value: idx * 128 + 80, name:'Chrome'},
{value: idx * 64 + 160, name:'Firefox'},
{value: idx * 32 + 320, name:'Safari'},
{value: idx * 16 + 640, name:'IE9+'},
{value: idx++ * 8 + 1280, name:'IE8-'}
]
}]
},
{
series: [{
name: 'Browser',
type: 'pie',
data: [
{value: idx * 128 + 80, name:'Chrome'},
{value: idx * 64 + 160, name:'Firefox'},
{value: idx * 32 + 320, name:'Safari'},
{value: idx * 16 + 640, name:'IE9+'},
{value: idx++ * 8 + 1280, name:'IE8-'}
]
}]
},
{
series: [{
name: 'Browser',
type: 'pie',
data: [
{value: idx * 128 + 80, name:'Chrome'},
{value: idx * 64 + 160, name:'Firefox'},
{value: idx * 32 + 320, name:'Safari'},
{value: idx * 16 + 640, name:'IE9+'},
{value: idx++ * 8 + 1280, name:'IE8-'}
]
}]
},
{
series: [{
name: 'Browser',
type: 'pie',
data: [
{value: idx * 128 + 80, name:'Chrome'},
{value: idx * 64 + 160, name:'Firefox'},
{value: idx * 32 + 320, name:'Safari'},
{value: idx * 16 + 640, name:'IE9+'},
{value: idx++ * 8 + 1280, name:'IE8-'}
]
}]
},
{
series: [{
name: 'Browser',
type: 'pie',
data: [
{value: idx * 128 + 80, name:'Chrome'},
{value: idx * 64 + 160, name:'Firefox'},
{value: idx * 32 + 320, name:'Safari'},
{value: idx * 16 + 640, name:'IE9+'},
{value: idx++ * 8 + 1280, name:'IE8-'}
]
}]
},
{
series: [{
name: 'Browser',
type: 'pie',
data: [
{value: idx * 128 + 80, name:'Chrome'},
{value: idx * 64 + 160, name:'Firefox'},
{value: idx * 32 + 320, name:'Safari'},
{value: idx * 16 + 640, name:'IE9+'},
{value: idx++ * 8 + 1280, name:'IE8-'}
]
}]
},
{
series: [{
name: 'Browser',
type: 'pie',
data: [
{value: idx * 128 + 80, name:'Chrome'},
{value: idx * 64 + 160, name:'Firefox'},
{value: idx * 32 + 320, name:'Safari'},
{value: idx * 16 + 640, name:'IE9+'},
{value: idx++ * 8 + 1280, name:'IE8-'}
]
}]
},
{
series: [{
name: 'Browser',
type: 'pie',
data: [
{value: idx * 128 + 80, name:'Chrome'},
{value: idx * 64 + 160, name:'Firefox'},
{value: idx * 32 + 320, name:'Safari'},
{value: idx * 16 + 640, name:'IE9+'},
{value: idx++ * 8 + 1280, name:'IE8-'}
]
}]
},
{
series: [{
name: 'Browser',
type: 'pie',
data: [
{value: idx * 128 + 80, name:'Chrome'},
{value: idx * 64 + 160, name:'Firefox'},
{value: idx * 32 + 320, name:'Safari'},
{value: idx * 16 + 640, name:'IE9+'},
{value: idx++ * 8 + 1280, name:'IE8-'}
]
}]
}
]
};
// Apply options
// ------------------------------
myChart.setOption(chartOptions);
// Resize chart
// ------------------------------
$(function () {
// Resize chart on menu width change and window resize
$(window).on('resize', resize);
$(".menu-toggle").on('click', resize);
// Resize function
function resize() {
setTimeout(function() {
// Resize chart
myChart.resize();
}, 200);
}
});
}
);
});