Old school D3 from simpler times

All examples By author By category About

snowshine09

Full window Github gist

Stacked Bar Chart

Simple Stacked Bar Chart

forked from arpitnarechania's block: Stacked Bar Chart

<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stacked Bar Chart</title>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>

<link href="style.css" rel="stylesheet" type="text/css">
<link href="d3-tip.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="main.js"></script>
</head>

<body>
    <div id="chart"></div>
</body>
<script>
    var inputData = [];
    for(var i =0; i<10; i++){
        var date = Date.now() + i*24*60*60*1000;
        inputData.push( {
            label : date,
            'Category 1': Math.random()*50,
            'Category 2': Math.random()*50,
            'Category 3': Math.random()*50
        });
    }

var colorScheme = ["#E57373","#BA68C8","#7986CB","#A1887F","#90A4AE","#AED581","#9575CD","#FF8A65","#4DB6AC","#FFF176","#64B5F6","#00E676"];
    renderStackedBarChart(inputData,"#chart",colorScheme);
</script>
</html>

xxxxxxxxxx
 
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stacked Bar Chart</title>
​
<!-- JavaScript Libraries //-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
​
<!-- CSS Style //-->
<link href="style.css" rel="stylesheet" type="text/css">
<link href="d3-tip.css" rel="stylesheet" type="text/css">
​
<script type="text/javascript" src="main.js"></script>
</head>
​
<body>
    <div id="chart"></div>
</body>
<script>
    var inputData = [];
    for(var i =0; i<10; i++){
        var date = Date.now() + i*24*60*60*1000;
        inputData.push( {
            label : date,
            'Category 1': Math.random()*50,
            'Category 2': Math.random()*50,
            'Category 3': Math.random()*50
        });
    }
​
    var colorScheme = ["#E57373","#BA68C8","#7986CB","#A1887F","#90A4AE","#AED581","#9575CD","#FF8A65","#4DB6AC","#FFF176","#64B5F6","#00E676"];
    renderStackedBarChart(inputData,"#chart",colorScheme);
</script>
</html>
    

Modified http://d3js.org/d3.v3.min.js to a secure url

https://code.jquery.com/jquery-3.1.1.min.js

https://d3js.org/d3.v3.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js