SHARE
TWEET

asas

a guest May 25th, 2019 70 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. {% extends 'base.html' %}
  2. {%load staticfiles%}
  3. {% block content %}
  4.  
  5. <style>
  6. select.form-control:not([size]):not([multiple]) {
  7.     height: calc(2.25rem + 10px);
  8. }
  9. #graph-card {
  10.   background-color:#fff;
  11.   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  12.   width: 98%;
  13.   min-height: 200px ;
  14.   margin: 5px;
  15.   transition: 0.3s;
  16.   border-radius: 5px;
  17.   border: 1px solid white;
  18.  
  19. }
  20. .buttontoggle {
  21.   background-color: #3d6bce; /* Green */
  22.   border: none;
  23.   color: white;
  24.   padding: 16px 32px;
  25.   text-align: center;
  26.   text-decoration: none;
  27.   display: inline-block;
  28.   font-size: 16px;
  29.   margin: 4px 2px;
  30.   -webkit-transition-duration: 0.4s; /* Safari */
  31.   transition-duration: 0.4s;
  32.   cursor: pointer;
  33. }
  34.  
  35. .buttontoogle {
  36.   background-color: white;
  37.   color: black;
  38.   border: 2px solid #008CBA;
  39. }
  40.  
  41. .button2toggle:hover {
  42.   background-color: #008CBA;
  43.   color: white;
  44. }
  45.  
  46. </style>  
  47. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  48. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  49. <div id="content" style="background-color: #f4f4f4">
  50.             <button onclick="topFunction()" id="myBtn" title="Go to top"><i class="glyphicon glyphicon-hand-up"></i></button>
  51.                <div>
  52.                  <button class="buttontoggle button2toggle" type="button"   id="sidebarCollapse"><i class="glyphicon glyphicon-align-left" style="color: white;"></i>
  53.                                 <span style="color: white;">Toggle Sidebar</span></button>
  54.                </div>
  55.               <br>
  56. <!---------------Start of Report ------------>
  57. <h3 style="font-family:sans-serif;" align="center" >My Influencer's : {{ user }} </h3>
  58.     <div class="col-md-12 pgraph">
  59.         <div id="treedata"></div>
  60.     </div>
  61.  
  62. <!----div class="row"------>
  63.  
  64.     <div class="col-md-12 graph ">
  65.         <h3 class="text-center">Segmentation by Influence</h3><hr>
  66.  
  67.  
  68.         <!----table -------->
  69.   <div id="graph-card">
  70.       <div class="col-md-12" id="tt_cat">
  71.           </br>
  72.           <form method="get" action="{% url 'dashboard:influencer_analysis' %}" enctype="multipart/form-data" class="cts"> {% csrf_token %}
  73.                 <select id = "category" name ="cat_sel" class="form-control" required >
  74.                     <option value="all" selected="selected">Choose Categories</option>
  75.                     {%for i in follower_cat %}
  76.                     <option name = '{{i}}' value="{{i}}">{{i}}</option>
  77.                     {% endfor %}
  78.                 </select>
  79.               <button type="submit" class="btn btn-success btn-block" style="background: #3d6bce;">Submit</button>
  80.           </form>
  81.     </div>
  82.       <!--- graphs------>
  83.     <div class="table-responsive">
  84.         <table class="table" style="font-size: 13px;">
  85.             <thead>
  86.                 <tr>
  87.                     <th scope="col">User</th>
  88.                     <th scope="col">Name</th>
  89.                     <th scope="col">Bio</th>
  90.                     <th scope="col"># of followers</th>
  91.                     <th scope="col">Last Active in Days</th>
  92.                 </tr>
  93.             </thead>
  94.             <tbody id="d1" style=""></tbody>
  95.         </table>
  96.     </div>
  97.     <div id="pagination_block"></div>
  98.   </div>
  99. </div>
  100.  
  101. </div>
  102. <!---Loading on default----->
  103.  
  104. <script>
  105.  
  106. $(function(){
  107.  
  108.   var page = 1,
  109.     pagelimit = 10,
  110.     totalrecord = 0;
  111.  
  112.   fetchData(page);
  113.  
  114.   // handling the prev-btn
  115.     $(document).on('click', ".page-link", function(){
  116.           page = $(this).data('page');
  117.           fetchData(page);
  118.           console.log("current Page: " + page);
  119.         return false;
  120.       })
  121.  
  122.       $(document).on('click', "#previous", function(){
  123.         if (page > 1) {
  124.           page--;
  125.           fetchData(page);
  126.         }
  127.         console.log("Prev Page: " + page);
  128.         return false;
  129.       });
  130.  
  131.   // handling the next-btn
  132.   $(document).on('click', "#next", function(){
  133.     if (page * 10 < totalrecord) {
  134.       page++;
  135.       fetchData(page);  
  136.     }
  137.     console.log("Next Page: " + page);
  138.     return false;
  139.   });
  140.  
  141.  
  142. function fetchData(page){
  143.  
  144. var category = document.getElementById('category').value;
  145. var url = "{% url 'api:influencer_list' %}?";
  146. if (category && category != "all")
  147. {
  148.     url += "cat_sel=" + category + "&";
  149. }
  150. if(page)
  151. {
  152.     url += "page=" + page;
  153. }
  154. $.ajax({
  155.   url: url,
  156.   method: 'get',
  157.   success:function(data){
  158.     totalrecord = data.count;
  159.          var cat_option = ''
  160.         for(var customer in data.results){
  161.             cat_option+= '<tr><td><img src='+data.results[customer].t_profile_image_url +' class="img-circle" alt="image description" width="45" height="45"/></td><td><a href="http://twitter.com/'+data.results[customer].t_screen_name+'" target="_blank">'+data.results[customer].t_screen_name+'</a></td> <td>'+data.results[customer].t_description+'</td><td>'+data.results[customer].t_followers_count+'</td><td>'+data.results[customer].t_status_created_at_daydiff+'</td></tr>'
  162.         }      
  163.         $('#d1').html(cat_option)
  164.         var pagination_html = "<ul class=\"pager\">";
  165.             pagination_html += "<li><button id='previous' class='btn btn-primary'><<</button></li>";
  166.             for(var page_item = 0; page_item < data.total_pages; page_item++)
  167.             {
  168.                 if(page_item >= (page - 1) && page_item <= (page + 1))
  169.                 {
  170.                     pagination_html += "<li class=\"page-item\">";
  171.                         pagination_html += "<a data-page=\""+ page_item + "\" class=\"page-link\" href=\"#\">" +  page_item + " </a>";
  172.                     pagination_html += "</li>";
  173.                 }
  174.             }
  175.             pagination_html += "</li>";
  176.             pagination_html += "</ul>";
  177.         $('#pagination_block').html(pagination_html);
  178.   },
  179.   error:function(errorData){
  180.     console.log('error')
  181.     console.log(errorData)
  182.   }
  183. });
  184. }
  185. });
  186.  
  187. </script>
  188.  
  189.  
  190.  
  191. <!-- graph and customer selection with pagination -->
  192. <script>
  193.    $(document).ready(function(){
  194.    var t20 = $(".cts")
  195.    t20.submit(function(event){
  196.         event.preventDefault();
  197.         var page = 1,
  198.             pagelimit = 10,
  199.             totalrecord = 0;
  200.         fData();
  201.           // handling the prev-btn
  202.   $("#previous").on("click", function(){
  203.     if (page > 1) {
  204.       page--;
  205.       fData();
  206.     }
  207.     console.log("Prev Page cat: " + page);
  208.   });
  209.  
  210.   // handling the next-btn
  211.   $("#next").on("click", function(){
  212.     if (page * 10 < totalrecord) {
  213.       page++;
  214.       fData();  
  215.     }
  216.     console.log("Next Page cat: " + page);
  217.   });
  218.  
  219.  
  220.     function fData(){
  221.         var category = document.getElementById('category').value;
  222.         $.ajax({
  223.  
  224.               url: "{% url 'api:influencer_list' %}?cat_sel="+category,
  225.               method: 'get',
  226.               data: {
  227.                 page: page,
  228.                     },
  229.               success:function(data){
  230.                      var cat_option = ''
  231.                     for(var customer in data.results){
  232.                         cat_option+= '<tr><td><img src='+data.results[customer].t_profile_image_url +' class="img-circle" alt="image description" width="45" height="45"/></td><td><a href="http://twitter.com/'+data.results[customer].t_screen_name+'" target="_blank">'+data.results[customer].t_screen_name+'</a></td> <td>'+data.results[customer].t_description+'</td><td>'+data.results[customer].t_followers_count+'</td><td>'+data.results[customer].t_status_created_at_daydiff+'</td></tr>'
  233.                     }      
  234.                     $('#d1').html(cat_option)
  235.               },
  236.               error:function(errorData){
  237.                 console.log('error')
  238.                 console.log(errorData)
  239.               }
  240.         });
  241.  
  242.                       }
  243. });
  244.  
  245.         return false;
  246.    });
  247.  
  248. </script>
  249.  
  250.  
  251.  
  252.  
  253. <!-- treemap -->
  254.  
  255. <script src="https://code.highcharts.com/highcharts.js"></script>
  256. <script src="https://code.highcharts.com/modules/treemap.js"></script>
  257. <div id="container"></div>
  258.  
  259. <style>
  260. #treedata {
  261.     min-length: 100%;
  262.     min-width: 100%;
  263.     max-width: 100%;
  264.     margin: 0 auto;
  265.  
  266. }
  267. </style>
  268.  
  269. <script>
  270.  
  271. Highcharts.chart('treedata', {
  272.     series: [{
  273.         type: "treemap",
  274.         layoutAlgorithm: 'stripes',
  275.         alternateStartingDirection: true,
  276.         levels: [{
  277.             level: 1,
  278.             layoutAlgorithm: 'sliceAndDice',
  279.             dataLabels: {
  280.                 enabled: true,
  281.                 align: 'center',
  282.                 verticalAlign: 'center',
  283.                 style: {
  284.                     fontSize: '18px',
  285.                     fontWeight: 'lighter'
  286.  
  287.                 }
  288.             }
  289.         }],
  290.         data: {{ data | safe}}
  291.     }],
  292.     title: {
  293.         text: ' '
  294.     }
  295. });
  296. </script>
  297.  
  298.  
  299. {% endblock %}
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top