Data-Visualization/submit.html at master · bhadresh74/Data-Visualization · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<meta charset="utf-8">
<style>

    path {  stroke: #fff; }
    path:hover {  opacity:0.9; }
    rect:hover {  fill:blue; }
    .axis {  font: 10px sans-serif; }
    .legend tr{    border-bottom:1px solid grey; }
    .legend tr:first-child{    border-top:1px solid grey; }

    .axis path,
    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }

    .x.axis path {  display: none; }
    .legend{
        margin-bottom:76px;
        display:inline-block;
        border-collapse: collapse;
        border-spacing: 0px;
    }
    .legend td{
        padding:4px 5px;
        vertical-align:bottom;
    }
    .legendFreq, .legendPerc{
        align:right;
        width:50px;
    }

</style>
<body>
<div id='dashboard'>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="dashboard.js"></script>

<script>
    var serv1=[
        {State:'Select',freq:{true:1394, false:26}}
        ,{State:'Insert',freq:{true:1101, false:412}}
        ,{State:'Declare',freq:{true:15, false:4}}
        ,{State:'Execute',freq:{true:5, false:7}}
    ];

    var serv5=[
        {State:'Backup',freq:{true:24, false:0}}
        ,{State:'Declare',freq:{true:16, false:0}}
        ,{State:'Execute',freq:{true:27, false:0}}
    ];
    var serv3=[
        {State:'Insert',freq:{true:19, false:0}}
        ,{State:'Delete',freq:{true:5, false:0}}

    ];
    var serv4=[
        {State:'Select',freq:{true:39, false:5}}
        ,{State:'Use',freq:{true:1, false:0}}
        ,{State:'Declare',freq:{true:1, false:0}}
        ,{State:'Execute',freq:{true:8, false:1}}
    ];

    dashboard('#dashboard',serv1);
</script>