Dashboard - 29July

by Shankar

HTML

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Simple Sidebar - Start Bootstrap Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/simple-sidebar.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

    <link href="css/dashboard.css" rel="stylesheet">

    <link href="css/pieChart.css" rel="stylesheet">

    <style type="text/css">
    .panel-body {
        padding: 0px 0px;
    }
    .panel-transparent {
    background: none;
    }

    .panel-transparent .panel-heading{
    /*background: rgba(122, 130, 136, 0.2)!important;*/
    }

    .panel-transparent .panel-body{
    /*background: rgba(46, 51, 56, 0.2)!important;*/
    }

    .center {
    margin: auto;
    width: 70%;
    /*border:3px solid #8AC007;*/
    padding: 15px;
}
</style>

</head>

<body>
    <nav class="navbar navbar-default no-margin">
    <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header fixed-brand" style="background-color:#ccc">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"  id="menu-toggle">
                      <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
                    </button>
                    <a class="navbar-brand" href="#">PLACEHOLDER</a>        
                </div><!-- navbar-header-->

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <!-- <ul class="nav navbar-nav">
                                <li class="active" >
               ...

CSS

/* PieChart CSS starts here */
.chart {
  position: relative;
  display: inline-block;
  width: 110px;
  height: 110px;
  margin-top: 0px;
  margin-bottom: 0px;
  text-align: center;
}
.chart canvas {
  position: absolute;
  top: 0;
  left: 0;
}
.percent {
  display: inline-block;
  line-height: 110px;
  z-index: 2;
  font-size: 20px;
}
.percent:after {
  content: '%';
  margin-left: 0.1em;
  font-size: .8em;
}
/* PieChart CSS ends here */



/* Dashboard.css (Include with Latest desktop changes starts here */

 * {
        font-family: 'Roboto';
        font-weight: 100;
    }

.sideMenu {
	position: absolute;
    top: 0;
    width: 200px;
    margin: 0;
    /*padding-left: 3px;*/
    list-style: none;
    /*margin-top: 2px;*/
}

.sideIcons {
	padding:8px 0px;
}


/*SideBar Issues*/
.center-block {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

.input-group .icon-addon .form-control {
    border-radius: 0;
}

.icon-addon {
    position: relative;
    color: #555;
    display: block;
}

.icon-addon:after,
.icon-addon:before {
    display: table;
    content: " ";
}

.icon-addon:after {
    clear: both;
}

.icon-addon.addon-md .glyphicon,
.icon-addon .glyphicon, 
.icon-addon.addon-md .fa,
.icon-addon .fa {
    position: absolute;
    z-index: 2;
    left: 10px;
    font-size: 14px;
    width: 20px;
    margin-left: -2.5px;
    text-align: center;
    padding: 10px 0;
    top: 1px
}

.icon-addon.addon-lg .form-control {
    line-height: 1.33;
    height: 46px;
    font-size: 18px;
    padding: 10px 16px 10px 40px;
}

.icon-addon.addon-sm .form-control {
    height: 30px;
    padding: 5px 10px 5px 28px;
    font-size: 12px;
    line-height: 1.5;
}

.icon-addon.addon-lg .fa,
.icon-addon.addon-lg .glyphicon {
    font-size: 18px;
    margin-left: 0;
    left: 11px;
    top: 4px;
}

.icon-addon.addon-md .form-control,
.icon-addon .form-control {
    padding-left: 30px;
    float: left;
    font-weight: normal;
}

.icon-addon.addon-sm...

JavaScript

<!-- 
Includde JS files
Refer easy Pie chart (Put it in pieChart folder)
jquery.easing.min.js
jquery.easypiechart.min.js
jquery-2.0.3.min.js
-->
    
   <!-- BarChart.js Bubble chart changes code -->
       
  $(function () {
    $('#Bar2Container').highcharts({
        chart: {
            type: 'line',
            backgroundColor:'rgba(255, 255, 255, 0.7)'
        },
        title: {
            text: ''
            
        },
        subtitle: {
            text: ''
            
        },
        credits: {
            enabled:false
        },
        exporting: {
            enabled: false
        },
        xAxis: {
            categories: ['10:30', '11:35', '14:45'],
            labels:
            {
                enabled: false
            }
        },
        yAxis: {
            title: {
                text: ''
            },
            plotLines: [{
                value: 64,
                width: 4,
                color: '#cccccc',
                dashStyle: 'shortdash'
            }],
            labels:
            {
                enabled: false
            }
        },
        tooltip: {
            valueSuffix: '%'
        },
        legend: {
            enabled: false
        },
        series: [{
            name: '',
            type: 'line',
            data: [47, 76, 38],
            allowPointSelect: true,
            marker: {
                enabled: true,
                fillcolor: '#5dccea',
                lineWidth: 1,
                lineColor: '#5dccea',
                radius : 25,
                symbol: 'circle'
            }
        }]
    });
});