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/global/js/demo_pages/charts/dimple/area/area_horizontal.js
+141
View File
@@ -0,0 +1,141 @@
/* ------------------------------------------------------------------------------
*
* # Dimple.js - horizontal area
*
* Demo of area chart. Data stored in .tsv file format
*
* ---------------------------------------------------------------------------- */
// Setup module
// ------------------------------
var DimpleAreaHorizontal = function() {
//
// Setup module components
//
// Chart
var _areaHorizontal = function() {
if (typeof dimple == 'undefined') {
console.warn('Warning - dimple.min.js is not loaded.');
return;
}
// Main variables
var element = document.getElementById('dimple-area-horizontal');
// Initialize chart only if element exsists in the DOM
if(element) {
// Construct chart
var svg = dimple.newSvg(element, "100%", 500);
// Chart setup
// ------------------------------
d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
// Filter data
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
// Create chart
// ------------------------------
// Define chart
var myChart = new dimple.chart(svg, data);
// Set bounds
myChart.setBounds(0, 0, "100%", "100%");
// Set margins
myChart.setMargins(55, 10, 10, 50);
// Create axes
// ------------------------------
// Horizontal
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
// Vertical
var y = myChart.addMeasureAxis("y", "Unit Sales");
// Construct layout
// ------------------------------
// Add area
var s = myChart
.addSeries(null, dimple.plot.area)
.interpolation = "basis";
// Add styles
// ------------------------------
// Font size
x.fontSize = "12";
y.fontSize = "12";
// Font family
x.fontFamily = "Roboto";
y.fontFamily = "Roboto";
//
// Draw chart
//
// Draw
myChart.draw();
// Remove axis titles
x.titleShape.remove();
// Resize chart
// ------------------------------
// Add a method to draw the chart on resize of the window
$(window).on('resize', resize);
$('.sidebar-control').on('click', resize);
// Resize function
function resize() {
// Redraw chart
myChart.draw(0, true);
// Remove axis titles
x.titleShape.remove();
}
});
}
};
//
// Return objects assigned to module
//
return {
init: function() {
_areaHorizontal();
}
}
}();
// Initialize module
// ------------------------------
document.addEventListener('DOMContentLoaded', function() {
DimpleAreaHorizontal.init();
});
assets/global/js/demo_pages/charts/dimple/area/area_horizontal_grouped.js
+141
View File
@@ -0,0 +1,141 @@
/* ------------------------------------------------------------------------------
*
* # Dimple.js - horizontal grouped area
*
* Demo of grouped area chart. Data stored in .tsv file format
*
* ---------------------------------------------------------------------------- */
// Setup module
// ------------------------------
var DimpleAreaHorizontalGrouped = function() {
//
// Setup module components
//
// Chart
var _areaHorizontalGrouped = function() {
if (typeof dimple == 'undefined') {
console.warn('Warning - dimple.min.js is not loaded.');
return;
}
// Main variables
var element = document.getElementById('dimple-area-horizontal-grouped');
// Initialize chart only if element exsists in the DOM
if(element) {
// Construct chart
var svg = dimple.newSvg(element, "100%", 500);
// Chart setup
// ------------------------------
d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
// Filter data
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
// Create chart
// ------------------------------
// Define chart
var myChart = new dimple.chart(svg, data);
// Set bounds
myChart.setBounds(0, 0, "100%", "100%");
// Set margins
myChart.setMargins(55, 10, 10, 45);
// Create axes
// ------------------------------
// Horizontal
var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
x.addGroupOrderRule("Date");
// Vertical
var y = myChart.addMeasureAxis("y", "Unit Sales");
// Construct layout
// ------------------------------
// Add area
var s = myChart
.addSeries("Owner", dimple.plot.area)
.interpolation = "basis";
// Line weight
s.lineWeight = 1;
// Area spacing
s.barGap = 0.05;
// Add styles
// ------------------------------
// Font size
x.fontSize = "12";
y.fontSize = "12";
// Font family
x.fontFamily = "Roboto";
y.fontFamily = "Roboto";
//
// Draw chart
//
// Draw
myChart.draw();
// Resize chart
// ------------------------------
// Add a method to draw the chart on resize of the window
$(window).on('resize', resize);
$('.sidebar-control').on('click', resize);
// Resize function
function resize() {
// Redraw chart
myChart.draw(0, true);
}
});
}
};
//
// Return objects assigned to module
//
return {
init: function() {
_areaHorizontalGrouped();
}
}
}();
// Initialize module
// ------------------------------
document.addEventListener('DOMContentLoaded', function() {
DimpleAreaHorizontalGrouped.init();
});
assets/global/js/demo_pages/charts/dimple/area/area_horizontal_stacked.js
+157
View File
@@ -0,0 +1,157 @@
/* ------------------------------------------------------------------------------
*
* # Dimple.js - horizontal stacked area
*
* Demo of stacked area chart. Data stored in .tsv file format
*
* ---------------------------------------------------------------------------- */
// Setup module
// ------------------------------
var DimpleAreaHorizontalStacked = function() {
//
// Setup module components
//
// Chart
var _areaHorizontalStacked = function() {
if (typeof dimple == 'undefined') {
console.warn('Warning - dimple.min.js is not loaded.');
return;
}
// Main variables
var element = document.getElementById('dimple-area-horizontal-stacked');
// Initialize chart only if element exsists in the DOM
if(element) {
// Construct chart
var svg = dimple.newSvg(element, "100%", 500);
// Chart setup
// ------------------------------
d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
// Filter data
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
// Create chart
// ------------------------------
// Define chart
var myChart = new dimple.chart(svg, data);
// Set bounds
myChart.setBounds(0, 0, "100%", "100%");
// Set margins
myChart.setMargins(55, 25, 10, 50);
// Create axes
// ------------------------------
// Horizontal
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
// Vertical
var y = myChart.addMeasureAxis("y", "Unit Sales");
// Construct layout
// ------------------------------
// Add area
var s = myChart
.addSeries("Channel", dimple.plot.area)
.interpolation = "basis";
// Add legend
// ------------------------------
var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
// Add styles
// ------------------------------
// Font size
x.fontSize = "12";
y.fontSize = "12";
// Font family
x.fontFamily = "Roboto";
y.fontFamily = "Roboto";
// Legend font style
myLegend.fontSize = "12";
myLegend.fontFamily = "Roboto";
//
// Draw chart
//
// Draw
myChart.draw();
// Position legend text
myLegend.shapes.selectAll("text").attr("dy", "1");
// Remove axis titles
x.titleShape.remove();
// Resize chart
// ------------------------------
// Add a method to draw the chart on resize of the window
$(window).on('resize', resize);
$('.sidebar-control').on('click', resize);
// Resize function
function resize() {
// Redraw chart
myChart.draw(0, true);
// Position legend text
myLegend.shapes.selectAll("text").attr("dy", "1");
// Remove axis titles
x.titleShape.remove();
}
});
}
};
//
// Return objects assigned to module
//
return {
init: function() {
_areaHorizontalStacked();
}
}
}();
// Initialize module
// ------------------------------
document.addEventListener('DOMContentLoaded', function() {
DimpleAreaHorizontalStacked.init();
});
assets/global/js/demo_pages/charts/dimple/area/area_horizontal_stacked_grouped.js
+157
View File
@@ -0,0 +1,157 @@
/* ------------------------------------------------------------------------------
*
* # Dimple.js - horizontal grouped stacked area
*
* Demo of grouped stacked area chart. Data stored in .tsv file format
*
* ---------------------------------------------------------------------------- */
// Setup module
// ------------------------------
var DimpleAreaHorizontalStackedGrouped = function() {
//
// Setup module components
//
// Chart
var _areaHorizontalStackedGrouped = function() {
if (typeof dimple == 'undefined') {
console.warn('Warning - dimple.min.js is not loaded.');
return;
}
// Main variables
var element = document.getElementById('dimple-area-horizontal-stacked-grouped');
// Initialize chart only if element exsists in the DOM
if(element) {
// Construct chart
var svg = dimple.newSvg(element, "100%", 500);
// Chart setup
// ------------------------------
d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
// Filter data
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
// Create chart
// ------------------------------
// Define chart
var myChart = new dimple.chart(svg, data);
// Set bounds
myChart.setBounds(0, 0, "100%", "100%");
// Set margins
myChart.setMargins(55, 10, 180, 45);
// Create axes
// ------------------------------
// Horizontal
var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
x.addGroupOrderRule("Date");
// Vertical
var y = myChart.addMeasureAxis("y", "Unit Sales");
// Construct layout
// ------------------------------
// Add area
var s = myChart
.addSeries("SKU", dimple.plot.area)
.interpolation = "basis";
// Line weight
s.lineWeight = 1;
// Area spacing
s.barGap = 0.05;
// Add legend
// ------------------------------
var myLegend = myChart.addLegend("100%", 0, 0, "100%", "right");
// Add styles
// ------------------------------
// Font size
x.fontSize = "12";
y.fontSize = "12";
// Font family
x.fontFamily = "Roboto";
y.fontFamily = "Roboto";
// Legend font style
myLegend.fontSize = "12";
myLegend.fontFamily = "Roboto";
//
// Draw chart
//
// Draw
myChart.draw();
// Position legend text
myLegend.shapes.selectAll("text").attr("dy", "1");
// Resize chart
// ------------------------------
// Add a method to draw the chart on resize of the window
$(window).on('resize', resize);
$('.sidebar-control').on('click', resize);
// Resize function
function resize() {
// Redraw chart
myChart.draw(0, true);
// Position legend text
myLegend.shapes.selectAll("text").attr("dy", "1");
}
});
}
};
//
// Return objects assigned to module
//
return {
init: function() {
_areaHorizontalStackedGrouped();
}
}
}();
// Initialize module
// ------------------------------
document.addEventListener('DOMContentLoaded', function() {
DimpleAreaHorizontalStackedGrouped.init();
});
assets/global/js/demo_pages/charts/dimple/area/area_horizontal_stacked_normalized.js
+157
View File
@@ -0,0 +1,157 @@
/* ------------------------------------------------------------------------------
*
* # Dimple.js - horizontal normalized stacked area
*
* Demo of normalized stacked area chart. Data stored in .tsv file format
*
* ---------------------------------------------------------------------------- */
// Setup module
// ------------------------------
var DimpleAreaHorizontalStackedNormalized = function() {
//
// Setup module components
//
// Chart
var _areaHorizontalStackedNormalized = function() {
if (typeof dimple == 'undefined') {
console.warn('Warning - dimple.min.js is not loaded.');
return;
}
// Main variables
var element = document.getElementById('dimple-area-horizontal-stacked-normalized');
// Initialize chart only if element exsists in the DOM
if(element) {
// Construct chart
var svg = dimple.newSvg(element, "100%", 500);
// Chart setup
// ------------------------------
d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
// Filter data
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
// Create chart
// ------------------------------
// Define chart
var myChart = new dimple.chart(svg, data);
// Set bounds
myChart.setBounds(0, 0, "100%", "100%");
// Set margins
myChart.setMargins(55, 25, 10, 50);
// Create axes
// ------------------------------
// Horizontal
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
// Vertical
var y = myChart.addPctAxis("y", "Unit Sales");
// Construct layout
// ------------------------------
// Add area
myChart
.addSeries("Channel", dimple.plot.area)
.interpolation = "basis";
// Add legend
// ------------------------------
var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
// Add styles
// ------------------------------
// Font size
x.fontSize = "12";
y.fontSize = "12";
// Font family
x.fontFamily = "Roboto";
y.fontFamily = "Roboto";
// Legend font style
myLegend.fontSize = "12";
myLegend.fontFamily = "Roboto";
//
// Draw chart
//
// Draw
myChart.draw();
// Position legend text
myLegend.shapes.selectAll("text").attr("dy", "1");
// Remove axis titles
x.titleShape.remove();
// Resize chart
// ------------------------------
// Add a method to draw the chart on resize of the window
$(window).on('resize', resize);
$('.sidebar-control').on('click', resize);
// Resize function
function resize() {
// Redraw chart
myChart.draw(0, true);
// Position legend text
myLegend.shapes.selectAll("text").attr("dy", "1");
// Remove axis titles
x.titleShape.remove();
}
})
}
};
//
// Return objects assigned to module
//
return {
init: function() {
_areaHorizontalStackedNormalized();
}
}
}();
// Initialize module
// ------------------------------
document.addEventListener('DOMContentLoaded', function() {
DimpleAreaHorizontalStackedNormalized.init();
});
assets/global/js/demo_pages/charts/dimple/area/area_vertical.js
+132
View File
@@ -0,0 +1,132 @@
/* ------------------------------------------------------------------------------
*
* # Dimple.js - vertical area
*
* Demo of area chart. Data stored in .tsv file format
*
* ---------------------------------------------------------------------------- */
// Setup module
// ------------------------------
var DimpleAreaVertical = function() {
//
// Setup module components
//
// Chart
var _areaVertical = function() {
if (typeof dimple == 'undefined') {
console.warn('Warning - dimple.min.js is not loaded.');
return;
}
// Main variables
var element = document.getElementById('dimple-area-vertical');
// Initialize chart only if element exsists in the DOM
if(element) {
// Construct chart
var svg = dimple.newSvg(element, "100%", 500);
d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
// Filter data
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
// Create chart
// ------------------------------
// Define chart
var myChart = new dimple.chart(svg, data);
// Set bounds
myChart.setBounds(0, 0, "100%", "100%");
// Set margins
myChart.setMargins(55, 5, 20, 40);
// Create axes
// ------------------------------
// Horizontal
var x = myChart.addMeasureAxis("x", "Unit Sales");
// Vertical
var y = myChart.addCategoryAxis("y", "Month");
y.addOrderRule("Date");
// Construct layout
// ------------------------------
// Add area
var s = myChart
.addSeries(null, dimple.plot.area)
.interpolation = "basis";
// Add styles
// ------------------------------
// Font size
x.fontSize = "12";
y.fontSize = "12";
// Font family
x.fontFamily = "Roboto";
y.fontFamily = "Roboto";
//
// Draw chart
//
// Draw
myChart.draw();
// Resize chart
// ------------------------------
// Add a method to draw the chart on resize of the window
$(window).on('resize', resize);
$('.sidebar-control').on('click', resize);
// Resize function
function resize() {
// Redraw chart
myChart.draw(0, true);
}
});
}
};
//
// Return objects assigned to module
//
return {
init: function() {
_areaVertical();
}
}
}();
// Initialize module
// ------------------------------
document.addEventListener('DOMContentLoaded', function() {
DimpleAreaVertical.init();
});
assets/global/js/demo_pages/charts/dimple/area/area_vertical_grouped.js
+141
View File
@@ -0,0 +1,141 @@
/* ------------------------------------------------------------------------------
*
* # Dimple.js - vertical grouped area
*
* Demo of grouped area chart. Data stored in .tsv file format
*
* ---------------------------------------------------------------------------- */
// Setup module
// ------------------------------
var DimpleAreaVerticalGrouped = function() {
//
// Setup module components
//
// Chart
var _areaVerticalGrouped = function() {
if (typeof dimple == 'undefined') {
console.warn('Warning - dimple.min.js is not loaded.');
return;
}
// Main variables
var element = document.getElementById('dimple-area-vertical-grouped');
// Initialize chart only if element exsists in the DOM
if(element) {
// Construct chart
var svg = dimple.newSvg(element, "100%", 500);
// Chart setup
// ------------------------------
d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
// Filter data
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
// Create chart
// ------------------------------
// Define chart
var myChart = new dimple.chart(svg, data);
// Set bounds
myChart.setBounds(0, 0, "100%", "100%");
// Set margins
myChart.setMargins(70, 5, 20, 45);
// Create axes
// ------------------------------
// Horizontal
var x = myChart.addMeasureAxis("x", "Unit Sales");
// Vertical
var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
y.addGroupOrderRule("Date");
// Construct layout
// ------------------------------
// Add area
var s = myChart
.addSeries("Owner", dimple.plot.area)
.interpolation = "basis";
// Line weight
s.lineWeight = 1;
// Area spacing
s.barGap = 0.05;
// Add styles
// ------------------------------
// Font size
x.fontSize = "12";
y.fontSize = "12";
// Font family
x.fontFamily = "Roboto";
y.fontFamily = "Roboto";
//
// Draw chart
//
// Draw
myChart.draw();
// Resize chart
// ------------------------------
// Add a method to draw the chart on resize of the window
$(window).on('resize', resize);
$('.sidebar-control').on('click', resize);
// Resize function
function resize() {
// Redraw chart
myChart.draw(0, true);
}
});
}
};
//
// Return objects assigned to module
//
return {
init: function() {
_areaVerticalGrouped();
}
}
}();
// Initialize module
// ------------------------------
document.addEventListener('DOMContentLoaded', function() {
DimpleAreaVerticalGrouped.init();
});
assets/global/js/demo_pages/charts/dimple/area/area_vertical_stacked.js
+151
View File
@@ -0,0 +1,151 @@
/* ------------------------------------------------------------------------------
*
* # Dimple.js - vertical stacked area
*
* Demo of stacked area chart. Data stored in .tsv file format
*
* ---------------------------------------------------------------------------- */
// Setup module
// ------------------------------
var DimpleAreaVerticalStacked = function() {
//
// Setup module components
//
// Chart
var _areaVerticalStacked = function() {
if (typeof dimple == 'undefined') {
console.warn('Warning - dimple.min.js is not loaded.');
return;
}
// Main variables
var element = document.getElementById('dimple-area-vertical-stacked');
// Initialize chart only if element exsists in the DOM
if(element) {
// Construct chart
var svg = dimple.newSvg(element, "100%", 500);
// Chart setup
// ------------------------------
d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
// Filter data
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
// Create chart
// ------------------------------
// Define chart
var myChart = new dimple.chart(svg, data);
// Set bounds
myChart.setBounds(0, 0, "100%", "100%");
// Set margins
myChart.setMargins(55, 25, 20, 40);
// Create axes
// ------------------------------
// Horizontal
var x = myChart.addMeasureAxis("x", "Unit Sales");
// Vertical
var y = myChart.addCategoryAxis("y", "Month");
y.addOrderRule("Date");
// Construct layout
// ------------------------------
// Add area
myChart
.addSeries("Channel", dimple.plot.area)
.interpolation = "basis";
// Add legend
// ------------------------------
var myLegend = myChart.addLegend(0, 5, "100%", 0, "left");
// Add styles
// ------------------------------
// Font size
x.fontSize = "12";
y.fontSize = "12";
// Font family
x.fontFamily = "Roboto";
y.fontFamily = "Roboto";
// Legend font style
myLegend.fontSize = "12";
myLegend.fontFamily = "Roboto";
//
// Draw chart
//
// Draw
myChart.draw();
// Position legend text
myLegend.shapes.selectAll("text").attr("dy", "1");
// Resize chart
// ------------------------------
// Add a method to draw the chart on resize of the window
$(window).on('resize', resize);
$('.sidebar-control').on('click', resize);
// Resize function
function resize() {
// Redraw chart
myChart.draw(0, true);
// Position legend text
myLegend.shapes.selectAll("text").attr("dy", "1");
}
});
}
};
//
// Return objects assigned to module
//
return {
init: function() {
_areaVerticalStacked();
}
}
}();
// Initialize module
// ------------------------------
document.addEventListener('DOMContentLoaded', function() {
DimpleAreaVerticalStacked.init();
});
assets/global/js/demo_pages/charts/dimple/area/area_vertical_stacked_grouped.js
+155
View File
@@ -0,0 +1,155 @@
/* ------------------------------------------------------------------------------
*
* # Dimple.js - vertical grouped stacked area
*
* Demo of grouped stacked area chart. Data stored in .tsv file format
*
* ---------------------------------------------------------------------------- */
// Setup module
// ------------------------------
var DimpleAreaVerticalStackedGrouped = function() {
//
// Setup module components
//
// Chart
var _areaVerticalStackedGrouped = function() {
if (typeof dimple == 'undefined') {
console.warn('Warning - dimple.min.js is not loaded.');
return;
}
// Main variables
var element = document.getElementById('dimple-area-vertical-stacked-grouped');
// Initialize chart only if element exsists in the DOM
if(element) {
// Construct chart
var svg = dimple.newSvg(element, "100%", 500);
// Chart setup
// ------------------------------
d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
// Filter data
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
// Create chart
// ------------------------------
// Define chart
var myChart = new dimple.chart(svg, data);
// Set bounds
myChart.setBounds(0, 0, "100%", "100%");
// Set margins
myChart.setMargins(70, 5, 180, 45);
// Create axes
// ------------------------------
// Horizontal
var x = myChart.addMeasureAxis("x", "Unit Sales");
// Vertical
var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
y.addGroupOrderRule("Date");
// Construct layout
// ------------------------------
// Add area
var s = myChart.addSeries("SKU", dimple.plot.area);
// Line weight
s.lineWeight = 1;
// Area spacing
s.barGap = 0.05;
// Add legend
// ------------------------------
var myLegend = myChart.addLegend("100%", 0, 0, "100%", "right");
// Add styles
// ------------------------------
// Font size
x.fontSize = "12";
y.fontSize = "12";
// Font family
x.fontFamily = "Roboto";
y.fontFamily = "Roboto";
// Legend font style
myLegend.fontSize = "12";
myLegend.fontFamily = "Roboto";
//
// Draw chart
//
// Draw
myChart.draw();
// Position legend text
myLegend.shapes.selectAll("text").attr("dy", "1");
// Resize chart
// ------------------------------
// Add a method to draw the chart on resize of the window
$(window).on('resize', resize);
$('.sidebar-control').on('click', resize);
// Resize function
function resize() {
// Redraw chart
myChart.draw(0, true);
// Position legend text
myLegend.shapes.selectAll("text").attr("dy", "1");
}
});
}
};
//
// Return objects assigned to module
//
return {
init: function() {
_areaVerticalStackedGrouped();
}
}
}();
// Initialize module
// ------------------------------
document.addEventListener('DOMContentLoaded', function() {
DimpleAreaVerticalStackedGrouped.init();
});
assets/global/js/demo_pages/charts/dimple/area/area_vertical_stacked_normalized.js
+151
View File
@@ -0,0 +1,151 @@
/* ------------------------------------------------------------------------------
*
* # Dimple.js - vertical normalized stacked area
*
* Demo of normalized stacked area chart. Data stored in .tsv file format
*
* ---------------------------------------------------------------------------- */
// Setup module
// ------------------------------
var DimpleAreaVerticalStackedNormalized = function() {
//
// Setup module components
//
// Chart
var _areaVerticalStackedNormalized = function() {
if (typeof dimple == 'undefined') {
console.warn('Warning - dimple.min.js is not loaded.');
return;
}
// Main variables
var element = document.getElementById('dimple-area-vertical-stacked-normalized');
// Initialize chart only if element exsists in the DOM
if(element) {
// Construct chart
var svg = dimple.newSvg(element, "100%", 500);
// Chart setup
// ------------------------------
d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
// Filter data
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
// Create chart
// ------------------------------
// Define chart
var myChart = new dimple.chart(svg, data);
// Set bounds
myChart.setBounds(0, 0, "100%", "100%");
// Set margins
myChart.setMargins(65, 25, 20, 40);
// Create axes
// ------------------------------
// Horizontal
var x = myChart.addPctAxis("x", "Unit Sales");
// Vertical
var y = myChart.addCategoryAxis("y", "Month");
y.addOrderRule("Date");
// Construct layout
// ------------------------------
// Add area
myChart
.addSeries("Channel", dimple.plot.area)
.interpolation = "basis";
// Add legend
// ------------------------------
var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
// Add styles
// ------------------------------
// Font size
x.fontSize = "12";
y.fontSize = "12";
// Font family
x.fontFamily = "Roboto";
y.fontFamily = "Roboto";
// Legend font style
myLegend.fontSize = "12";
myLegend.fontFamily = "Roboto";
//
// Draw chart
//
// Draw
myChart.draw();
// Position legend text
myLegend.shapes.selectAll("text").attr("dy", "1");
// Resize chart
// ------------------------------
// Add a method to draw the chart on resize of the window
$(window).on('resize', resize);
$('.sidebar-control').on('click', resize);
// Resize function
function resize() {
// Redraw chart
myChart.draw(0, true);
// Position legend text
myLegend.shapes.selectAll("text").attr("dy", "1");
}
});
}
};
//
// Return objects assigned to module
//
return {
init: function() {
_areaVerticalStackedNormalized();
}
}
}();
// Initialize module
// ------------------------------
document.addEventListener('DOMContentLoaded', function() {
DimpleAreaVerticalStackedNormalized.init();
});