Custom Dashboard Charts

This is an example of customizable dashboard charts

by Shawn Wood

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="//cdn.jsdelivr.net/d3js/latest/d3.min.js"></script>
<script src="https://github.com/shawnbot/d3-bootstrap/blob/master/d3-bootstrap.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<div class="container">
    <div class="row">
        <div class="panel panel-primary">
            <div class="panel-heading">
                Metrics
                <div class="btn-group btn-group-sm pull-right">
                    <button id="currentChart" type="button" class="btn btn-primary">My Priority Load</button>
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu" id="chartMenu">
                        <li><a id="myPriority" href="#">My Priority Load</a></li>
                        <li><a id="myStatus" href="#">My Status Load</a></li>
                        <li><a id="myTime" href="#">My Average Time Spent</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a id="analystPriority" href="#">Priority Load by Analyst</a></li>
                       ...

CSS

circle,
path {
    cursor: pointer;
}

circle {
    fill: none;
    pointer-events: all;
}

#tooltip {
    background-color: white;
    padding: 3px 5px;
    border: 1px solid black;
    text-align: center;
}
.morris-chart{height:200px;}

JavaScript

var myPriority = {
    "name": "priority",
    "description": "Listing by Priority",
    "children": [{
        "name": "Last 7 Days",
        "description": "Listing by Priority",
        "children": [{
            "name": "Critical ",
            "description": "Listing by Priority",
            "size": 20
        }, {
            "name": "High",
            "description": "Listing by Priority",
            "size": 12
        }, {
            "name": "Medium",
            "description": "Listing by Priority",
            "size": 17
        }, {
            "name": "Low",
            "description": "Listing by Priority",
            "size": 6
        }]
    }, {
        "name": "Last 30 Days",
        "description": "cluster",
        "children": [{
            "name": "Critical",
            "description": "Listing by Priority",
            "size": 40
        }, {
            "name": "High",
            "description": "Listing by Priority",
            "size": 18
        }, {
            "name": "Medium",
            "description": "Listing by Priority",
            "size": 23
        }, {
            "name": "Low",
            "description": "Listing by Priority",
            "size": 12
        }]
    }]
};

var myStatus = {
    "name": "status",
    "description": "Listing by Status",
    "children": [{
        "name": "Last 7 Days",
        "description": "Listing by Status",
        "children": [{
            "name": "New ",
            "description": "Listing by Status",
            "size": 20
        }, {
            "name": "Working",
            "description": "Listing by Status",
            "size": 12
        }, {
            "name": "Pending Approval",
            "description": "Listing by Status",
            "size": 17
        }, {
            "name": "Approved",
            "description": "Listing by Status",
            "size": 16
        }, {
            "name": "Request SME Assessment",
            "description": "Listing by Status",
         ...