column-graphs with product sales data

Example of a graph created with column-graphs by using product sales data and changing some configuration values so it works and looks better.

by Markus Tuominen

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<body style="background-color:#FFFFFF;">
<div id="cg-main">
</div>
</body>

CSS

.clickable {
  cursor: pointer;
}
    
.cg-title {
  margin-left: 50px;
}

JavaScript

// Settings
var dataCount = true;
var valueAs = ['absolute', 'd', ' pcs']; // Change used value to absolute (instead of the default which is percentage), also change d3 format to 'd' and add ' pcs' at the end of text on y axis
var marginAuto = true; // Automatically change margins to fit axis texts
var graphSelectEnabled = false;
var width = 700;
var titleText = 'Stacked bars with absolute values';
var titleClass = 'cg-title';

// Source code for column-graphs.min.js
var columnGraphsJsContent = `
!function(t,e){"function"==typeof define&&define.amd?define(["d3"],function(n){return t.cg=e(n)}):"object"==typeof module&&module.exports?module.exports=t.cg=e(require("d3")):t.cg=e(t.d3)}(this,function(t){var e,n,a,r,o,l,c,s={addResizeFunc:function(t){J.add(t)},addTitle:function(t,e){!function(t,e){var n=document.getElementById(u.mainDiv);try{if(!n)throw"Div '"+u.mainDiv+"' not found"}catch(t){return void console.log("addTitle(): "+t)}var a=document.createElement("h1");a.innerHTML=t,e=e||"cg-title",a.classList.add(e),n.insertBefore(a,n.firstChild)}(t,e)},drawCompareCategories:function(t){B(!1,t)},drawStackedBars:function(t){k(t)},getArrayMax:function(t){V(t)},getArrayMin:function(t){var e;e=t,Math.min.apply(null,e)},getAxisTextWidths:function(t,e,n,a){q(t,e,n)},getConf:function(t){return u[t]},getTextColor:function(t){K(t)},getTextWidth:function(t,e,n){G(t,e,n)},initData:function(t,e,n){C(t,e,n)},initMetadata:function(t,e,n){var a,r,o;a=t,o=n,r=(r=e)||"Choices",o=o||"Groups",v=a[r]||{All:u.all},x=a[o]||{None:{none:u.none}},0===Object.keys(x).length&&x.constructor===Object&&(x={None:{none:u.none}})},initSvg:function(t,e,n){A(t,e,n)},removeResizeFunc:function(t){J.remove(t)},roundOneDec:function(t){_(t)},roundTwoDec:function(t){var...