grafik

<style type="text/css">
  @import 'https://code.highcharts.com/css/highcharts.css';

#all_opd {
  height: 400px;
  max-width: 800px;
  margin: 0 auto;
}

/* Link the series colors to axis colors */

</style>

<section class="content-header">
<h1>
        Semua
        <small>Grafik</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Beranda</a></li>
        <li class="active">Grafik Semua OPD/Satker</li>
      </ol>
</section>
<section class="content">


     <!-- SELECT2 EXAMPLE -->
      <div class="box box-info">
        <div class="box-header with-border">
          <h3 class="box-title"></h3>

          <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
          </div>
        </div>
        <!-- /.box-header -->
        <div class="box-body">


          <div class="container">
      <script src="<?php echo base_url();?>assets/opd/highcharts.js">
      </script>
      <script src="<?php echo base_url();?>assets/opd/series-label.js">
      </script>
      <script src="https://code.highcharts.com/modules/exporting.js">
      </script>

      <div class="table-responsive">
        <div class="row">
        <div class="col-sm-12">
        <div class="container">
            <div id="grafik"></div>

              <script type="text/javascript">
                var dataChart = <?= $opd['data'] ?>;
                var satuanopd = <?= $opd['singkatan'] ?>;
                Highcharts.chart('grafik', {
                  chart: {
                    type: 'column'
                  }
                  ,
                  title: {
                    text: 'Persentasi Tingkat Kepuasan Layanan OPD/Satker'
                  }
                  ,
                  subtitle: {
                    text: 'Source: '
                  }
                  ,
                  xAxis: {
                    categories:  satuanopd,
                    crosshair: true
                  }
                  ,
                  yAxis: {
                    min: 0,
                    title: {
                      text: 'Persen'
                    }
                  }
                  ,
                  colors: ['#158c08','#ddb437','#FF002A'],


                  series: dataChart
                }
                                );
              </script>
          </div>
        </div>
      </div>
    </div>
  </div>

 </section>