Skip to content

NimTechnology

Trình bày các công nghệ CLOUD một cách dễ hiểu.

  • Kubernetes & Container
    • Docker
    • Kubernetes
      • Ingress
      • Pod
    • Helm Chart
    • Isito-EnvoyFilter
    • Apache Kafka
      • Kafka
      • Kafka Connect
      • Lenses
    • Vault
    • Longhorn – Storage
    • VictoriaMetrics
    • MetalLB
    • Kong Gateway
  • CI/CD
    • ArgoCD
    • ArgoWorkflows
    • Spinnaker
    • Jenkins
    • Harbor
    • TeamCity
    • Git
      • Bitbucket
  • Coding
    • DevSecOps
    • Terraform
      • GCP – Google Cloud
      • AWS – Amazon Web Service
    • Golang
    • Laravel
    • Python
    • Jquery & JavaScript
    • Selenium
  • Log, Monitor & Tracing
    • DataDog
    • Prometheus
    • Grafana
    • ELK
      • Kibana
      • Logstash
  • BareMetal
    • NextCloud
  • Toggle search form

Vẽ chart cực đẹp bằng Morris JS và hướng dẫn fix lỗi morris không làm việc trên tab của bootstap

Posted on June 19, 2021August 10, 2021 By nim No Comments on Vẽ chart cực đẹp bằng Morris JS và hướng dẫn fix lỗi morris không làm việc trên tab của bootstap
Các bài từ 163 đến 166

Hướng dẫn fix lỗi ko morris Js hiển thị trên tab của bootstrap.

https://stackoverflow.com/questions/40517038/morris-js-chart-not-working-inside-of-a-bootstrap-tab

var homeBar = Morris.Bar({
  element: 'chart1',
  data: [
    { y: '2006', a: 100, b: 90 },
    { y: '2007', a: 75, b: 65 },
    { y: '2008', a: 50, b: 40 },
    { y: '2009', a: 75, b: 65 },
    { y: '2010', a: 50, b: 40 },
    { y: '2011', a: 75, b: 65 },
    { y: '2012', a: 100, b: 90 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B'],
  hideHover: 'always',
  resize: true
});

var profileBar = Morris.Bar({
  element: 'chart2',
  data: [
    { y: '2006', a: 100, b: 90 },
    { y: '2007', a: 75, b: 65 },
    { y: '2008', a: 50, b: 40 },
    { y: '2009', a: 75, b: 65 },
    { y: '2010', a: 50, b: 40 },
    { y: '2011', a: 75, b: 65 },
    { y: '2012', a: 100, b: 90 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B'],
  hideHover: 'always',
  resize: true
});

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
  var target = $(e.target).attr("href") // activated tab

  switch (target) {
    case "#home":
      homeBar.redraw();
      $(window).trigger('resize');
      break;
    case "#profile":
      profileBar.redraw();
      $(window).trigger('resize');
      break;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet" />

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>
  </li>
  <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">
    <div class="row">
      <div class="col-md-12">
        <div id="chart1" style="height: 200px;"></div>
      </div>
    </div>
  </div>
  <div role="tabpanel" class="tab-pane" id="profile">
    <div class="row">
      <div class="col-md-12">
        <div id="chart2" style="height: 200px;"></div>
      </div>
    </div>
  </div>
</div>
Jquery & JavaScript, Laravel

Post navigation

Previous Post: [PHP] Hướng dẫn kiểm tra array rỗng hay null không?
Next Post: [ArgoCD] Sử dụng ArgoCD deploy lên k8s.

More Related Articles

[SlackAPI/Laravel] Laravel call API Slack. Laravel
[Js] Sử dụng Jquery để liên kết 2 select trong page. Coding
Các Lệnh query với Model của Laravel eloquent Laravel
[Popup/Ajax] Tạo popup(modal/bootstrap) insert data bằng ajax và php Coding
[Javascript] Changing the js version after you change their content. Jquery & JavaScript
[Java-script] adding HTML by Javascript based on a specified template. Jquery & JavaScript

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Tham Gia Group DevOps nhé!
Để Nim có nhiều động lực ra nhiều bài viết.
Để nhận được những thông báo mới nhất.

Recent Posts

  • [AWS] Look into Data Transfer on AWS May 30, 2023
  • [Ddosify] How to test the application performance with Ddosify. May 30, 2023
  • [DevSecOps/TruffleHog] Find your repository’s secrets, sensitive words, and credentials. May 29, 2023
  • [DevSecOps] Tìm hiểu về thu thập thông tin. May 25, 2023
  • [coralogix/OpenTelemetry] Monitor Your K8s by Coralogix and OpenTelemetry Collector. May 24, 2023

Archives

  • May 2023
  • April 2023
  • March 2023
  • February 2023
  • January 2023
  • December 2022
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021

Categories

  • BareMetal
    • NextCloud
  • CI/CD
    • ArgoCD
    • ArgoWorkflows
    • Git
      • Bitbucket
    • Harbor
    • Jenkins
    • Spinnaker
    • TeamCity
  • Coding
    • DevSecOps
    • Golang
    • Jquery & JavaScript
    • Laravel
    • Python
    • Selenium
    • Terraform
      • AWS – Amazon Web Service
      • GCP – Google Cloud
  • Kubernetes & Container
    • Apache Kafka
      • Kafka
      • Kafka Connect
      • Lenses
    • Docker
    • Helm Chart
    • Isito-EnvoyFilter
    • Kong Gateway
    • Kubernetes
      • Ingress
      • Pod
    • Longhorn – Storage
    • MetalLB
    • Vault
    • VictoriaMetrics
  • Log, Monitor & Tracing
    • DataDog
    • ELK
      • Kibana
      • Logstash
    • Fluent
    • Grafana
    • Prometheus
  • Uncategorized
  • Admin

Copyright © 2023 NimTechnology.