templates/float_chart/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  5.                             <!-- PAGE-HEADER -->
  6.                             <div class="page-header">
  7.                                 <div>
  8.                                     <h1 class="page-title">Chart Flot</h1>
  9.                                 </div>
  10.                                 <div class="ms-auto pageheader-btn">
  11.                                     <ol class="breadcrumb">
  12.                                         <li class="breadcrumb-item"><a href="javascript:void(0);">Charts</a></li>
  13.                                         <li class="breadcrumb-item active" aria-current="page">Flot Charts</li>
  14.                                     </ol>
  15.                                 </div>
  16.                             </div>
  17.                             <!-- PAGE-HEADER END -->
  19.                             <!-- ROW-1 OPEN -->
  20.                             <div class="row">
  21.                                 <div class="col-lg-6 col-md-12">
  22.                                     <div class="card">
  23.                                         <div class="card-header border-bottom">
  24.                                             <h3 class="card-title">Line Chart</h3>
  25.                                         </div>
  26.                                         <div class="card-body">
  27.                                             <div id="flotLine1" class="chartsh"></div>
  28.                                         </div>
  29.                                     </div>
  30.                                 </div>
  31.                                 <div class="col-lg-6 col-md-12">
  32.                                     <div class="card">
  33.                                         <div class="card-header border-bottom">
  34.                                             <h3 class="card-title">Line Chart</h3>
  35.                                         </div>
  36.                                         <div class="card-body">
  37.                                             <div id="flotLine2" class="chartsh"></div>
  38.                                         </div>
  39.                                     </div>
  40.                                 </div>
  41.                                 <div class="col-lg-6 col-md-12">
  42.                                     <div class="card">
  43.                                         <div class="card-header border-bottom">
  44.                                             <h3 class="card-title">Area Chart</h3>
  45.                                         </div>
  46.                                         <div class="card-body">
  47.                                             <div id="flotArea1" class="chartsh"></div>
  48.                                         </div>
  49.                                     </div>
  50.                                 </div>
  51.                                 <div class="col-lg-6 col-md-12">
  52.                                     <div class="card">
  53.                                         <div class="card-header border-bottom">
  54.                                             <h3 class="card-title">Area Chart</h3>
  55.                                         </div>
  56.                                         <div class="card-body">
  57.                                             <div id="flotArea2" class="chartsh"></div>
  58.                                         </div>
  59.                                     </div>
  60.                                 </div>
  61.                                 <div class="col-lg-6 col-md-12">
  62.                                     <div class="card">
  63.                                         <div class="card-header border-bottom">
  64.                                             <h3 class="card-title">Area chart</h3>
  65.                                         </div>
  66.                                         <div class="card-body">
  67.                                             <div id="flotArea3" class="chartsh"></div>
  68.                                         </div>
  69.                                     </div>
  70.                                 </div>
  71.                                 <div class="col-lg-6 col-md-12">
  72.                                     <div class="card">
  73.                                         <div class="card-header border-bottom">
  74.                                             <h3 class="card-title">Bar Chart</h3>
  75.                                         </div>
  76.                                         <div class="card-body">
  77.                                             <div id="flotBar1" class="chartsh"></div>
  78.                                         </div>
  79.                                     </div>
  80.                                 </div>
  81.                                 <div class="col-lg-6 col-md-12">
  82.                                     <div class="card">
  83.                                         <div class="card-header border-bottom">
  84.                                             <h3 class="card-title">Bar Chart</h3>
  85.                                         </div>
  86.                                         <div class="card-body">
  87.                                             <div id="flotBar2" class="chartsh"></div>
  88.                                         </div>
  89.                                     </div>
  90.                                 </div>
  91.                                 <div class="col-lg-6 col-md-12">
  92.                                     <div class="card">
  93.                                         <div class="card-header border-bottom">
  94.                                             <h3 class="card-title">Stacking Chart</h3>
  95.                                         </div>
  96.                                         <div class="card-body">
  97.                                             <div id="flotStacking" class="chartsh"></div>
  98.                                             <div class="mt-3 d-flex">
  99.                                                 <p class="stackControls">
  100.                                                     <button id="control-btn-stack" class="btn btn-sm btn-outline-primary active">With stacking</button>
  101.                                                     <button id="control-btn-stack1" class="btn btn-sm btn-outline-secondary">Without stacking</button>
  102.                                                 </p>
  103.                                                 <p class="graphControls ms-auto">
  104.                                                     <button id="control-btn1" class="btn btn-sm btn-outline-info active">Bars</button>
  105.                                                     <button id="control-btn2" class="btn btn-sm btn-outline-success">Lines</button>
  106.                                                     <button id="control-btn3" class="btn btn-sm btn-outline-warning">Lines with steps</button>
  107.                                                 </p>
  108.                                             </div>
  109.                                         </div>
  110.                                     </div>
  111.                                 </div>
  112.                                 <div class="col-lg-12 col-md-12">
  113.                                     <div class="card">
  114.                                         <div class="card-header border-bottom">
  115.                                             <h3 class="card-title">Animated graph</h3>
  116.                                         </div>
  117.                                         <div class="card-body">
  118.                                             <div id="flotAnimated" class="chartsh"></div>
  119.                                         </div>
  120.                                     </div>
  121.                                 </div>
  122.                             </div>
  123.                             <!-- ROW-1 CLOSED -->
  125.                             <!-- ROW-2 OPEN -->
  126.                             <div class="row">
  127.                                 <div class="col-lg-12 col-md-12">
  128.                                     <div class="card">
  129.                                         <div class="card-header border-bottom">
  130.                                             <h3 class="card-title">pie chart models</h3>
  131.                                         </div>
  132.                                         <div class="card-body">
  133.                                             <div class="row">
  134.                                                 <div class="col-lg-9">
  135.                                                     <div id="flotPie" class="chartsh"></div>
  136.                                                 </div>
  137.                                                 <div class="col-lg-3">
  138.                                                     <div id="menu">
  139.                                                         <button id="action-1" class="btn d-grid btn-sm btn-outline-primary mt-2 mt-lg-0 ">Default Options</button>
  140.                                                         <button id="action-2" class="btn d-grid btn-sm btn-outline-secondary mt-2">Without Legend</button>
  141.                                                         <button id="action-3" class="btn d-grid btn-sm btn-outline-info mt-2">Label Formatter</button>
  142.                                                         <button id="action-4" class="btn d-grid btn-sm btn-outline-success mt-2">Label Radius</button>
  143.                                                         <button id="action-5" class="btn d-grid btn-sm btn-outline-warning mt-2">Label Styles #1</button>
  144.                                                         <button id="action-6" class="btn d-grid btn-sm btn-outline-secondary mt-2">Label Styles #2</button>
  145.                                                         <button id="action-8" class="btn d-grid btn-sm btn-outline-info mt-2">Combined Slice</button>
  146.                                                         <button id="action-9" class="btn d-grid btn-sm btn-outline-dark mt-2">Rectangular Pie</button>
  147.                                                         <button id="action-10" class="btn d-grid btn-sm btn-outline-primary mt-2">Tilted Pie</button>
  148.                                                     </div>
  149.                                                 </div>
  150.                                             </div>
  151.                                         </div>
  152.                                     </div>
  153.                                 </div>
  154.                             </div>
  155.                             <!-- ROW-2 CLOSED -->
  156. {% endblock %}
  158. {% block javascripts %}
  159.    {{parent()}}
  160.         <!-- FLOT JS -->
  161.         <script src="{{absolute_url(asset('build/plugins/flot/jquery.flot.js'))}}"></script>
  162.         <script src="{{absolute_url(asset('build/plugins/flot/jquery.flot.fillbetween.js'))}}"></script>
  163.         <script src="{{absolute_url(asset('build/plugins/flot/jquery.flot.pie.js'))}}"></script>
  164.         <script src="{{absolute_url(asset('build/plugins/flot/jquery.flot.stack.js'))}}"></script>
  165.         <script src="{{absolute_url(asset('build/plugins/flot/jquery.flot.resize.min.js'))}}"></script>
  166.         {{ encore_entry_script_tags('js/flot') }}
  168. {% endblock %}