var schema = [
{
name: "Date",
type: "date",
format: "%-d/%-m/%Y"
},
{
name: "#Working Hours per day",
type: "number"
}
];
var data = [
["1/1/2019", 8.2],
["2/1/2019", 7.58],
["3/1/2019", 9.55],
["4/1/2019", 9.88],
["7/1/2019", 9.13],
["8/1/2019", 8.35],
["9/1/2019", 8.87],
["10/1/2019", 6.88],
["11/1/2019", 6.73],
["14/1/2019", 8.9],
["15/1/2019", 9.66],
["16/1/2019", 9.83],
["17/1/2019", 8.58],
["18/1/2019", 8.98],
["21/1/2019", 6.54],
["22/1/2019", 8.09],
["23/1/2019", 9.08],
["24/1/2019", 9.11],
["25/1/2019", 8.54],
["28/1/2019", 9.24],
["29/1/2019", 6.21],
["30/1/2019", 8.97],
["31/1/2019", 9.34],
["1/2/2019", 7.11],
["4/2/2019", 6.21],
["5/2/2019", 9.05],
["6/2/2019", 7.22],
["7/2/2019", 6.83],
["8/2/2019", 9.37],
["11/2/2019", 7.38],
["12/2/2019", 6.08],
["13/2/2019", 9.5],
["14/2/2019", 7.68],
["15/2/2019", 6.95],
["18/2/2019", 7.56],
["19/2/2019", 9.76],
["20/2/2019", 9.11],
["21/2/2019", 9.56],
["22/2/2019", 9.03],
["25/2/2019", 6.88],
["26/2/2019", 7.34],
["27/2/2019", 9.14],
["28/2/2019", 9.67],
["1/3/2019", 6.07],
["4/3/2019", 8.82],
["5/3/2019", 7.99],
["6/3/2019", 8.99],
["7/3/2019", 8.19],
["8/3/2019", 7.59],
["11/3/2019", 9.43],
["12/3/2019", 8.49],
["13/3/2019", 8.43],
["14/3/2019", 6.27],
["15/3/2019", 8.15],
["18/3/2019", 8.45],
["19/3/2019", 9.9],
["20/3/2019", 7.14],
["21/3/2019", 9.97],
["22/3/2019", 9.71],
["25/3/2019", 7.4],
["26/3/2019", 9.32],
["27/3/2019", 9.81],
["28/3/2019", 8.2],
["29/3/2019", 9.52],
["1/4/2019", 7.77],
["2/4/2019", 9.68],
["3/4/2019", 6.49],
["4/4/2019", 7.06],
["5/4/2019", 8.19],
["8/4/2019", 9.73],
["9/4/2019", 8.85],
["10/4/2019", 6.09],
["11/4/2019", 7.01],
["12/4/2019", 9.89],
["15/4/2019", 7.99],
["16/4/2019", 8.68],
["17/4/2019", 7.06],
["18/4/2019", 7.62],
["19/4/2019", 9.21],
["22/4/2019", 9.66],
["23/4/2019", 6.35],
["24/4/2019", 8.18],
["25/4/2019", 7.27],
["26/4/2019", 8.39],
["29/4/2019", 9.56],
["30/4/2019", 9.48],
["1/5/2019", 6.33],
["2/5/2019", 9.8],
["3/5/2019", 6.39],
["6/5/2019", 9.76],
["7/5/2019", 7.06],
["8/5/2019", 6.61],
["9/5/2019", 7.46],
["10/5/2019", 8.16],
["13/5/2019", 8.29],
["14/5/2019", 6.73],
["15/5/2019", 8.89],
["16/5/2019", 8.93],
["17/5/2019", 8.46],
["20/5/2019", 7.88],
["21/5/2019", 6.46],
["22/5/2019", 6.6],
["23/5/2019", 8.2],
["24/5/2019", 8.27],
["27/5/2019", 6.21],
["28/5/2019", 9.14],
["29/5/2019", 9.47],
["30/5/2019", 6.31],
["31/5/2019", 8.73],
["3/6/2019", 6.35],
["4/6/2019", 6.4],
["5/6/2019", 8.58],
["6/6/2019", 6.26],
["7/6/2019", 8.21],
["10/6/2019", 6.83],
["11/6/2019", 8.93],
["12/6/2019", 7.29],
["13/6/2019", 7.77],
["14/6/2019", 6.32],
["17/6/2019", 7.37],
["18/6/2019", 8.71],
["19/6/2019", 9.74],
["20/6/2019", 7.31],
["21/6/2019", 7.14],
["24/6/2019", 7.24],
["25/6/2019", 9.89],
["26/6/2019", 6.81],
["27/6/2019", 6.89],
["28/6/2019", 9.07],
["1/7/2019", 9.44],
["2/7/2019", 9.57],
["3/7/2019", 6.92],
["4/7/2019", 6.49],
["5/7/2019", 6.24],
["8/7/2019", 6.74],
["9/7/2019", 6.81],
["10/7/2019", 7.78],
["11/7/2019", 8.12],
["12/7/2019", 6.26],
["15/7/2019", 9.51],
["16/7/2019", 8.08],
["17/7/2019", 8.27],
["18/7/2019", 9.06],
["19/7/2019", 8.85],
["22/7/2019", 8.75],
["23/7/2019", 8.03],
["24/7/2019", 8.96],
["25/7/2019", 6.66],
["26/7/2019", 6.16],
["29/7/2019", 9.63],
["30/7/2019", 9.76],
["31/7/2019", 9.76],
["1/8/2019", 6.5],
["2/8/2019", 9.32],
["5/8/2019", 9.54],
["6/8/2019", 8.01],
["7/8/2019", 8.0],
["8/8/2019", 7.55],
["9/8/2019", 7.35],
["12/8/2019", 6.32],
["13/8/2019", 10.0],
["14/8/2019", 8.55],
["15/8/2019", 8.87],
["16/8/2019", 9.66],
["19/8/2019", 8.14],
["20/8/2019", 8.83],
["21/8/2019", 9.32],
["22/8/2019", 8.37],
["23/8/2019", 9.52],
["26/8/2019", 6.78],
["27/8/2019", 9.36],
["28/8/2019", 7.49],
["29/8/2019", 6.39],
["30/8/2019", 9.59],
["2/9/2019", 8.76],
["3/9/2019", 8.33],
["4/9/2019", 6.6],
["5/9/2019", 8.72],
["6/9/2019", 7.41],
["9/9/2019", 9.93],
["10/9/2019", 6.84],
["11/9/2019", 6.93],
["12/9/2019", 9.41],
["13/9/2019", 8.74],
["16/9/2019", 8.43],
["17/9/2019", 7.18],
["18/9/2019", 6.94],
["19/9/2019", 6.61],
["20/9/2019", 7.25],
["23/9/2019", 8.83],
["24/9/2019", 9.69],
["25/9/2019", 9.85],
["26/9/2019", 9.75],
["27/9/2019", 7.49],
["30/9/2019", 6.27],
["1/10/2019", 7.44],
["2/10/2019", 8.11],
["3/10/2019", 9.9],
["4/10/2019", 6.39],
["7/10/2019", 6.99],
["8/10/2019", 6.1],
["9/10/2019", 8.68],
["10/10/2019", 9.35],
["11/10/2019", 7.46],
["14/10/2019", 6.32],
["15/10/2019", 7.23],
["16/10/2019", 9.86],
["17/10/2019", 7.66],
["18/10/2019", 7.18],
["21/10/2019", 7.49],
["22/10/2019", 9.3],
["23/10/2019", 8.84],
["24/10/2019", 6.3],
["25/10/2019", 8.96],
["28/10/2019", 7.37],
["29/10/2019", 7.66],
["30/10/2019", 9.54],
["31/10/2019", 7.68],
["1/11/2019", 7.71],
["4/11/2019", 7.57],
["5/11/2019", 6.72],
["6/11/2019", 6.16],
["7/11/2019", 8.07],
["8/11/2019", 6.55],
["11/11/2019", 9.07],
["12/11/2019", 8.32],
["13/11/2019", 6.61],
["14/11/2019", 9.87],
["15/11/2019", 8.19],
["18/11/2019", 9.31],
["19/11/2019", 6.44],
["20/11/2019", 8.03],
["21/11/2019", 8.75],
["22/11/2019", 7.61],
["25/11/2019", 7.0],
["26/11/2019", 6.75],
["27/11/2019", 7.2],
["28/11/2019", 7.26],
["29/11/2019", 6.6],
["2/12/2019", 8.86],
["3/12/2019", 9.1],
["4/12/2019", 6.46],
["5/12/2019", 7.47],
["6/12/2019", 7.05],
["9/12/2019", 9.4],
["10/12/2019", 7.45],
["11/12/2019", 8.52],
["12/12/2019", 9.66],
["13/12/2019", 7.01],
["16/12/2019", 6.2],
["17/12/2019", 9.14],
["18/12/2019", 9.3],
["19/12/2019", 8.25],
["20/12/2019", 8.01],
["23/12/2019", 9.95],
["24/12/2019", 6.09],
["25/12/2019", 7.22],
["26/12/2019", 9.66],
["27/12/2019", 7.98],
["30/12/2019", 9.63],
["31/12/2019", 7.35]
];
var dataStore = new FusionCharts.DataStore(data, schema);
var dsNonClipped = {
caption: {
text: "An Employee record of working time - 2019"
},
subcaption: {
text: "Daily working hours of an employee"
},
yAxis: [
{
columnName: "Daily Visitors",
plotType: "column",
title: "Daily Visitors"
}
],
xAxis: {
initialInterval: {
from: "1/1/2019",
to: "30/6/2019"
}
},
data: dataStore.getDataTable()
};
var dsClipped = {
caption: {
text: "An Employee record of working time - 2019"
},
subcaption: {
text: "Daily working hours of an employee - weekends clipped"
},
yAxis: [
{
columnName: "Daily Visitors",
plotType: "column",
title: "Daily Visitors"
}
],
xAxis: {
initialInterval: {
from: "1/1/2019",
to: "30/6/2019"
},
showClippingCue: 1,
clip: [
{
from: "2019 Jan 05",
to: "2019 Jan 06",
format: "%Y %b %d",
repeat: {
unit: "day",
multiplier: "7"
}
}
]
},
data: dataStore.getDataTable()
};
new FusionCharts({
type: "timeseries",
renderAt: "chart-container",
id: "axis-clipping-demo-chart",
width: "100%",
height: "100%",
dataSource: dsNonClipped
}).render();
var enabledBtn = document.getElementById("enabled-btn");
var disabledBtn = document.getElementById("disabled-btn");
enabledBtn.addEventListener("click", function() {
enabledBtn.classList.remove("btn-outline-primary");
disabledBtn.classList.remove("btn-primary-grad");
disabledBtn.classList.add("btn-outline-primary");
enabledBtn.classList.add("btn-primary-grad");
FusionCharts.items["axis-clipping-demo-chart"].setJSONData(dsClipped);
});
disabledBtn.addEventListener("click", function() {
disabledBtn.classList.remove("btn-outline-primary");
enabledBtn.classList.remove("btn-primary-grad");
enabledBtn.classList.add("btn-outline-primary");
disabledBtn.classList.add("btn-primary-grad");
FusionCharts.items["axis-clipping-demo-chart"].setJSONData(dsNonClipped);
});
