SHARE
TWEET

HTML Java script MYSQL programmers dev....(elmo)

a guest Feb 17th, 2020 75 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. im trying to create another page that can relate to my bar chart. You can go through his code. It work for me
  2.  
  3.     <!DOCTYPE html>
  4.     <html>
  5.        <head>
  6.           <?php
  7.              session_start();
  8.              
  9.              
  10.              ?>
  11.           <meta charset="utf-8">
  12.           <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  13.           <script src="http://code.highcharts.com/highcharts.js"></script>
  14.           <script src="http://code.highcharts.com/modules/exporting.js"></script>
  15.           <script>
  16.              $('#calendar').datepicker({
  17.              });
  18.              
  19.              !function ($) {
  20.                $(document).on("click","ul.nav li.parent > a > span.icon", function(){          
  21.                  $(this).find('em:first').toggleClass("glyphicon-minus");      
  22.                });
  23.                $(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
  24.              }(window.jQuery);
  25.              
  26.              $(window).on('resize', function () {
  27.                if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')
  28.              })
  29.              $(window).on('resize', function () {
  30.                if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')
  31.              })
  32.           </script>
  33.           <style>
  34.              .selection{
  35.              border: 1px solid gray;
  36.              border-radius: 10px;
  37.              padding: 10px;
  38.              text-decoration:none;
  39.              float:left;
  40.              margin:4px;
  41.              text-align:center;
  42.              display: block;
  43.              color: green;
  44.              }
  45.              .page-header{
  46.              text-align:center;
  47.              text-decoration:hover;
  48.              color: blue;
  49.              font-size: 30px;
  50.              }
  51.           </style>
  52.           <script>
  53.              $(function () {
  54.              
  55.                  //on page load  
  56.                  getAjaxData(1);
  57.              
  58.                  //on changing select option
  59.                  $('#dynamic_data').change(function(){
  60.                    var val = $('#dynamic_data').val();
  61.                    getAjaxData(val);
  62.                  });
  63.              
  64.                  function getAjaxData(id){
  65.              
  66.                  //use getJSON to get the dynamic data via AJAX call
  67.                  $.getJSON('datab1.php', {id: id}, function(chartData) {
  68.                    $('#container').highcharts({
  69.                      chart: {
  70.                        type: 'column'
  71.                      },
  72.                      title: {
  73.                        text: 'Analysis of Data Type in The World'
  74.                      },
  75.                      xAxis: {
  76.                      categories: ['Population', 'Health', 'Agriculture', 'Development', 'Transport', 'Education', 'Social', 'Tourism', 'Finance','Business','Economy', 'Industry', 'Employment', 'Weather', 'Food', 'Energy', 'Infrastructure', 'Science&Technology', 'Government','Culture', 'Religion',
  77.                      'Justice&Law', 'Country', 'Water Resource', 'Maritim', 'Military', 'International', 'Geography', 'Statistics', 'Others','Electronic','Biotechnology', 'Women', 'Gender', 'Cartography','Disability','Position','Marital','CDF','Research']
  78.                      
  79.                      },
  80.                      yAxis: {
  81.                        min: 0,
  82.                        
  83.                        title: {
  84.                          text: 'Percentage (%)'
  85.                        }
  86.                      },
  87.                      legend: {
  88.                    enabled: false
  89.                  },
  90.                  tooltip: {
  91.                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
  92.                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
  93.                      '<td style="padding:0"><b>{point.y:.1f} %</b></td></tr>',
  94.                    footerFormat: '</table>',
  95.                    shared: true,
  96.                    useHTML: true
  97.                  },
  98.                  plotOptions: {
  99.                    column: {
  100.                      pointPadding: 0.2,
  101.                      borderWidth: 0
  102.                    }
  103.                  },
  104.                      series: chartData
  105.                    
  106.                    });
  107.                    
  108.                  });
  109.                }
  110.              });
  111.           </script>
  112.        </head>
  113.        <body class="hold-transition skin-blue sidebar-mini">
  114.           <div id="container" style="width: 100%; min-height: 500px; margin: 0 auto"></div>
  115.        </body>
  116.     </html>
  117.  
  118.  
  119. And this the code for fetching data from mysql
  120.  
  121.     <?php
  122.     require('dbcon.php');
  123.    
  124.     //select database
  125.    
  126.    
  127.    
  128.     //define array
  129.     //we need two arrays - "male" and "female" so $arr and $arr1 respectively!
  130.     $arr    = array();
  131.     $result = array();
  132.    
  133.     //get the result from the table "highcharts_data"
  134.     $sql = "select * from world";
  135.     $q = mysqli_query($con, $sql) or die(mysqli_error());
  136.     $j = 0;
  137.     while ($row = mysqli_fetch_assoc($q)) {
  138.        
  139.         //highcharts needs name, but only once, so give a IF condition
  140.         if ($j == 0) {
  141.             $arr['name'] = 'Percentage';
  142.            
  143.             $j++;
  144.         }
  145.         //and the data for male and female is here
  146.         $arr['data'][] = $row['datavalue'];
  147.        
  148.        
  149.     }
  150.    
  151.     //after get the data for male and female, push both of them to an another array called result
  152.     array_push($result, $arr); //1
  153.    
  154.    
  155.     //now create the jvon result using "jvon_encode"
  156.     print jvon_encode($result, JVON_NUMERIC_CHECK);
  157.    
  158.     mysqli_close($con);
  159.     ?>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top