Created
September 14, 2019 23:42
-
-
Save onewoorks/be0022e065ed1378154b41ea9f880a90 to your computer and use it in GitHub Desktop.
chartjs tab navigation way around (dirty solution)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>Entrance & Exit Survey</title> | |
| <!-- Tell the browser to be responsive to screen width --> | |
| <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> | |
| <!--import head--> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> | |
| </head> | |
| <body class="hold-transition skin-blue sidebar-mini" style="padding:20px;"> | |
| <div class="container wrapper"> | |
| <!-- Content Wrapper. Contains page content --> | |
| <div class="content-wrapper"> | |
| <!-- Main content --> | |
| <section class="content"> | |
| <!--row--> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <!-- BOX --> | |
| <div class="box box-info"> | |
| <div class="box-header with-border"> | |
| <h3 class="box-title">Analisis Entrance & Exit Survey</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> | |
| <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> | |
| </div> | |
| </div> | |
| <div class="box-body"> | |
| <center> | |
| <h3>Course Entrance And Exit Survey - Sistem Pengurusan Pangkalan Data Dan Aplikasi Web</h3> | |
| <h3>Bahagian Pendidikan Teknik Dan Vokasional</h3> | |
| </center><br> | |
| <!-- Custom Tabs --> | |
| <div class="nav-tabs-custom"> | |
| <ul class="nav nav-tabs"> | |
| <li class="active"><a href="#tab_1" data-toggle="tab">tab</a></li> | |
| <li><a href="#tab_2" data-toggle="tab">tab 2</a></li> | |
| <li><a href="#tab_3" data-toggle="tab">tab 3</a></li> | |
| <li><a href="#tab_4" data-toggle="tab">tab 4</a></li> | |
| <li><a href="#tab_5" data-toggle="tab">tab 5</a></li> | |
| <li class="pull-right"><a href="detailcourse.php" class="text-muted"><i class="fa fa-gear"></i></a></li> | |
| </ul> | |
| <div class="tab-content"> | |
| <div class="tab-pane active" id="tab_1"> | |
| <h4>kod kursus - nama kursus</h4> | |
| </div> | |
| <!-- /.tab-pane --> | |
| <div class="tab-pane" id="tab_2"> | |
| <h4>Kod Kursus 2 - Nama Kursus 2</h4> | |
| </div> | |
| <!-- /.tab-pane --> | |
| <div class="tab-pane" id="tab_3"> | |
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. | |
| Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, | |
| when an unknown printer took a galley of type and scrambled it to make a type specimen book. | |
| It has survived not only five centuries, but also the leap into electronic typesetting, | |
| remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset | |
| sheets containing Lorem Ipsum passages, and more recently with desktop publishing software | |
| like Aldus PageMaker including versions of Lorem Ipsum. | |
| </div> | |
| <!-- /.tab-pane --> | |
| </div> | |
| <!-- /.tab-content --> | |
| </div> | |
| <!-- nav-tabs-custom --> | |
| </div> | |
| <!--end col md--> | |
| </div> | |
| <!-- end row--> | |
| </section> | |
| <!-- /.content --> | |
| </div> | |
| <!-- /.content-wrapper --> | |
| <div class='tab_info_1'> | |
| <canvas id="barChart" ></canvas> | |
| <div style="display:none"> | |
| tab 1 : Lorem Ipsum is simply dummy text of the printing and typesetting industry. | |
| Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, | |
| when an unknown printer took a galley of type and scrambled it to make a type specimen book. | |
| It has survived not only five centuries, but also the leap into electronic typesetting, | |
| remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset | |
| sheets containing Lorem Ipsum passages, and more recently with desktop publishing software | |
| like Aldus PageMaker including versions of Lorem Ipsum. | |
| </div> | |
| </div> | |
| <div class='tab_info_2'> | |
| <canvas id="barChart2" ></canvas> | |
| <div style="display:none"> | |
| tab 2 : Lorem Ipsum is simply dummy text of the printing and typesetting industry. | |
| Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, | |
| when an unknown printer took a galley of type and scrambled it to make a type specimen book. | |
| It has survived not only five centuries, but also the leap into electronic typesetting, | |
| remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset | |
| sheets containing Lorem Ipsum passages, and more recently with desktop publishing software | |
| like Aldus PageMaker including versions of Lorem Ipsum. | |
| </div> | |
| </div> | |
| <footer class="main-footer" style='margin-top:30px;'> | |
| <div class="pull-right hidden-xs"> | |
| <b>Version</b> 2 | |
| </div> | |
| <strong>Projek Tahun Akhir ini dikemukakan kepada Kolej Vokasional Datuk Seri Abu Zahar Isnin</strong> Editor @afiqsyafiq36. | |
| </footer> | |
| </div> | |
| <!-- ./wrapper --> | |
| <script | |
| src="https://code.jquery.com/jquery-3.4.1.min.js" | |
| integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" | |
| crossorigin="anonymous"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script> | |
| <script> | |
| $(function () { | |
| /* ChartJS | |
| * ------- | |
| * Here we will create a few charts using ChartJS | |
| */ | |
| //chart 1 | |
| //Papar grafdka4213 | |
| var yg1 = "15"; | |
| var yg2 = "25"; | |
| var yg3 = "35"; | |
| var yg4 = "45"; | |
| var yg5 = "55"; | |
| var yg6 = "65"; | |
| var areaChartData = { | |
| labels : ["CLO1","CLO2","CLO3"], | |
| datasets: [ | |
| { | |
| label : 'Entrance Survey', | |
| fillColor : '#ef553a', | |
| strokeColor : '#ef553a', | |
| pointColor : 'rgba(210, 214, 222, 1)', | |
| pointStrokeColor : '#c1c7d1', | |
| pointHighlightFill : '#fff', | |
| pointHighlightStroke: 'rgba(220,220,220,1)', | |
| data : [yg1,yg2,yg3] | |
| }, | |
| { | |
| label : 'Exit Survey', | |
| fillColor : "#030ffc", | |
| strokeColor : "#030ffc", | |
| pointColor : 'rgba(210, 214, 222, 1)', | |
| pointStrokeColor : '#c1c7d1', | |
| pointHighlightFill : '#fff', | |
| pointHighlightStroke: 'rgba(220,220,220,1)', | |
| data : [yg4,yg5,yg6] | |
| } | |
| ] | |
| } | |
| //------------- | |
| //- BAR CHART - | |
| //------------- | |
| var barChartCanvas = $('#barChart').get(0).getContext('2d') | |
| var barChart = new Chart(barChartCanvas) | |
| var barChartData = areaChartData | |
| barChartData.datasets[1].fillColor = '#030ffc' | |
| barChartData.datasets[1].strokeColor = '#030ffc' | |
| barChartData.datasets[1].pointColor = '#030ffc' | |
| var barChartOptions = { | |
| //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value | |
| scaleBeginAtZero : true, | |
| //Boolean - Whether grid lines are shown across the chart | |
| scaleShowGridLines : true, | |
| //String - Colour of the grid lines | |
| scaleGridLineColor : 'rgba(0,0,0,.05)', | |
| //Number - Width of the grid lines | |
| scaleGridLineWidth : 1, | |
| //Boolean - Whether to show horizontal lines (except X axis) | |
| scaleShowHorizontalLines: true, | |
| //Boolean - Whether to show vertical lines (except Y axis) | |
| scaleShowVerticalLines : true, | |
| //Boolean - If there is a stroke on each bar | |
| barShowStroke : true, | |
| //Number - Pixel width of the bar stroke | |
| barStrokeWidth : 2, | |
| //Number - Spacing between each of the X value sets | |
| barValueSpacing : 5, | |
| //Number - Spacing between data sets within X values | |
| barDatasetSpacing : 1, | |
| //String - A legend template | |
| legendTemplate : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>', | |
| //Boolean - whether to make the chart responsive | |
| responsive : true, | |
| maintainAspectRatio : true | |
| } | |
| barChartOptions.datasetFill = false | |
| barChart.Bar(barChartData, barChartOptions) | |
| //chart 2 | |
| //Papar grafdka4223 | |
| var sg1 = "10"; | |
| var sg2 = "20"; | |
| var sg3 = "30"; | |
| var sg4 = "40"; | |
| var sg5 = "50"; | |
| var sg6 = "60"; | |
| var areaChartData2 = { | |
| labels : ["CLO1","CLO2","CLO3"], | |
| datasets: [ | |
| { | |
| label : 'Entrance Survey', | |
| fillColor : '#ef553a', | |
| strokeColor : '#ef553a', | |
| pointColor : 'rgba(210, 214, 222, 1)', | |
| pointStrokeColor : '#c1c7d1', | |
| pointHighlightFill : '#fff', | |
| pointHighlightStroke: 'rgba(220,220,220,1)', | |
| data : [sg1,sg2,sg3] | |
| }, | |
| { | |
| label : 'Exit Survey', | |
| fillColor : "#030ffc", | |
| strokeColor : "#030ffc", | |
| pointColor : 'rgba(210, 214, 222, 1)', | |
| pointStrokeColor : '#c1c7d1', | |
| pointHighlightFill : '#fff', | |
| pointHighlightStroke: 'rgba(220,220,220,1)', | |
| data : [sg4,sg5,sg6] | |
| } | |
| ] | |
| } | |
| //------------- | |
| //- BAR CHART - | |
| //------------- | |
| var barChartCanvas = $('#barChart2').get(0).getContext('2d') | |
| var barChart = new Chart(barChartCanvas) | |
| var barChartData = areaChartData2 | |
| barChartData.datasets[1].fillColor = '#00a65a' | |
| barChartData.datasets[1].strokeColor = '#00a65a' | |
| barChartData.datasets[1].pointColor = '#00a65a' | |
| var barChartOptions = { | |
| //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value | |
| scaleBeginAtZero : true, | |
| //Boolean - Whether grid lines are shown across the chart | |
| scaleShowGridLines : true, | |
| //String - Colour of the grid lines | |
| scaleGridLineColor : 'rgba(0,0,0,.05)', | |
| //Number - Width of the grid lines | |
| scaleGridLineWidth : 1, | |
| //Boolean - Whether to show horizontal lines (except X axis) | |
| scaleShowHorizontalLines: true, | |
| //Boolean - Whether to show vertical lines (except Y axis) | |
| scaleShowVerticalLines : true, | |
| //Boolean - If there is a stroke on each bar | |
| barShowStroke : true, | |
| //Number - Pixel width of the bar stroke | |
| barStrokeWidth : 2, | |
| //Number - Spacing between each of the X value sets | |
| barValueSpacing : 5, | |
| //Number - Spacing between data sets within X values | |
| barDatasetSpacing : 1, | |
| //String - A legend template | |
| legendTemplate : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>', | |
| //Boolean - whether to make the chart responsive | |
| responsive : true, | |
| maintainAspectRatio : true | |
| } | |
| barChartOptions.datasetFill = false | |
| barChart.Bar(barChartData, barChartOptions) | |
| $("[class^=tab_info_]").not('.tab_info_1').hide() | |
| $("[class^=tab_info_]>div").show() | |
| $('a[href="#tab_1"]').on('shown.bs.tab', function(){ | |
| $("[class^=tab_info_]").hide() | |
| $(".tab_info_1").show() | |
| }); | |
| $('a[href="#tab_2"]').on('shown.bs.tab', function(){ | |
| $("[class^=tab_info_]").hide() | |
| $(".tab_info_2").show() | |
| }); | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment