highcharts bargarph

highcharts bargarph example

Highcharts is a JavaScript charting library based on SVG, with fallbacks to VML and canvas for old browsers. this a great example on bargrap

<!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>Dashboard
  </title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
  </script>
  <script src="http://202.65.133.69:8181/reports/scripts/highcharts/highcharts.js">
  </script>
  <script src="http://202.65.133.69:8181/reports/scripts/highcharts/exporting.js">
  </script>
  <style>
   .portfolio-item {
    margin: 0;
    padding: 0;
   }
   .btn {
    font-weight: 400;
   }
   .portfolio-item:hover .overlay {
    opacity: 1;
   }
   .portfolio-item .overlay {
    background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    text-align: center;
    top: 0;
    transition: opacity 300ms ease 0s;
    vertical-align: middle;
    width: 100%;
   }
   .portfolio-item .item-inner {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #eee;
    margin: 0 20px 20px 0;
    padding: 10px 10px 0;
    position: relative;
   }
   .portfolio-item .overlay .preview {
    display: inline-block;
    margin-top: -20px;
    position: relative;
    top: 50%;
   }
   .fixed-panel {
    min-height: 200px;
    max-height: 200px;
    overflow-y: scroll;
   }
   .amd-summary-report
   {
    border-radius: 4px;
    cursor: pointer;
    margin: 9px;
    min-width: 200px;
    max-width: 300px;
    min-height: 200px;
   }
   .amd-summary-report-news
   {
    border-radius: 4px;
    cursor: pointer;
    margin: 5px;
    min-width: 200px;
    max-width: 600px;
    min-height: 200px;
   }
   .amd-summary-report .amd-summary-text
   {
    color: #808080;
    padding-left: 5px;
   }
   .amd-summary-report .amd-summary-value
   {
    color: #808080;
    font-weight: bold;
    font-size: 20px;
    text-align: right;
   }
   h5{
    color:green;
   }
  </style>
 </head>
 <body>
  <div class="row">
   <div class="col-lg-8">
    <div class="panel panel-default">
     <div class="panel-heading">
      <div id="barChart">
      </div>
     </div>
    </div>
   </div>
   <script type="text/javascript">
    $(function () {
     $('#barChart').highcharts({
      chart: {
       type: 'bar'
      }
      ,
      title: {
       text: 'District-wise trained students'
      }
      ,
      xAxis: {
       categories: ['Srikakulam', 'Vizianagaram','Visakhapatnam','East godavari','West godavari','Krishna','Guntur','Prakasam','Nellore','Chittor','Kadapa','Anantapur','Kurnool'],
       title: {
        text: null
       }
      }
      ,
      yAxis: {
       min: 0,
       title: {
        text: '',
        align: 'high'
       }
       ,
       labels: {
        overflow: 'justify'
       }
      }
      ,
      tooltip: {
       valueSuffix: ''
      }
      ,
      plotOptions: {
       bar: {
        dataLabels: {
         enabled: true
        }
       }
      }
      ,
      legend: {
       layout: 'vertical',
       align: 'right',
       verticalAlign: 'top',
       x: -40,
       y: 80,
       floating: true,
       borderWidth: 1,
       backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
       shadow: true
      }
      ,
      credits: {
       enabled: false
      }
      ,
      series: [{
       name: 'Trained',
       data: [945,1518,1275,7183,2872,7862,12181,4523,1873,6572,5515,2679,3595]
      }
         ,]
     }
            );
    }
     );
    $(function() {
     $('marquee').mouseover(function() {
      $(this).attr('scrollamount',0);
     }
            ).mouseout(function() {
      $(this).attr('scrollamount',5);
     }
             );
    }
     );
   </script>
   </body>
  </html>