Làm cách nào để tạo bảng điều khiển động trong html?

Trường hợp sử dụng là một ứng dụng trong đó các biểu đồ có thể được thêm và xóa theo ý thích của người dùng để thực hiện các loại phân tích khác nhau trong cài đặt ứng dụng động

Điều này có thể đạt được ngay lập tức với LightningChart bằng cách đặt từng biểu đồ trong HTML DIV của riêng nó theo cách giống như hầu hết các biểu đồ web trên thị trường. Tuy nhiên, mục đích của ví dụ này là chỉ ra cách sử dụng thành phần Bảng điều khiển LightningChart JS để đạt được các mục đích tương tự với hiệu suất tuyệt đối tốt nhất

Vấn đề về hiệu suất với việc đặt từng biểu đồ trong DIV của chính nó là tất cả việc chuẩn bị vẽ đồ thị phải được thực hiện riêng biệt. Bảng điều khiển LC JS được thiết kế đặc biệt để trở thành câu trả lời cho vấn đề này - nó cho phép chia sẻ hiệu quả các tài nguyên và quy trình vẽ biểu đồ để tăng đáng kể tốc độ tải biểu đồ (với 10 biểu đồ, nhanh hơn tới 100%) cũng như hiệu suất trong thời gian chạy

Nói chung, Bảng điều khiển LC JS có kích thước tĩnh (ví dụ: lưới 2x2) và không thể thay đổi kích thước sau đó. Tuy nhiên, với một số mã hóa sáng tạo, hạn chế này có thể được giải quyết bằng cách phân bổ trước Trang tổng quan cho một số "biểu đồ tối đa" và sau đó thay đổi kích thước theo chương trình của các ô Trang tổng quan thực sự có biểu đồ trong đó, đó chính xác là những gì chúng tôi làm trong ví dụ này

Nếu bạn đã từng ngồi nghĩ về cách tạo một (hoặc hai) biểu đồ động cho trang web Connect (hoặc bảng điều khiển), chỉ để thấy rằng tất cả dường như quá phức tạp và phải có một cách dễ dàng hơn, thì đây có thể là . Đã thử thách bản thân để làm điều đó, và mặc dù phạm phải mọi sai lầm trong cuốn sách, tôi đã xoay sở để đạt được nó, với một chút giúp đỡ từ bạn bè, theo cách mà tôi coi là cách tiếp cận 'thực hành tốt nhất'

Phần Cách thực hiện này sẽ giải thích những gì tôi đã làm, để bạn có thể làm tương tự và thậm chí áp dụng phương pháp này cho các biểu đồ khác để giúp bạn gây ấn tượng với mọi người bằng các kỹ năng mới tìm được của mình. Nó có thể cảm thấy dài và phức tạp, nhưng nó chỉ dài. Bạn nên dành thời gian để xem qua vì bạn sẽ ngạc nhiên về mức độ đơn giản của nó

Tài nguyên

Đính kèm là tệp zip chứa mẫu, quy trình làm việc và cơ sở dữ liệu của tôi. Nó sử dụng hai (2) biểu đồ nên các chức năng được đặt tên với "1" hoặc "2" bổ sung, nhưng nó sẽ không làm bạn bối rối quá nhiều

Ghi chú. Dữ liệu đến từ cơ sở dữ liệu Access và bạn sẽ cần tạo Kết nối của riêng mình với cơ sở dữ liệu đó. Bạn CÓ THỂ phải thay đổi định dạng ngày tháng trong các hàm create_chart1 và create_chart2 (nằm trong chartdiv1. js trong mẫu Designer) để phù hợp với ngôn ngữ của bạn (các chức năng của tôi sử dụng 

// this function make sure the client document is loaded before code is executed
$( document ).ready(function() {  //this calls a function which creates a chart for the div with id="chartdiv"
    create_chart("chartdiv");     // this calls the same chart function every every 60 seconds
      setInterval( function () {          create_chart("chartdiv");
     }, 60000 );                  // this calls the same chart function with the button with id="refresh" is clicked     $("#refresh").on('click', function() {
         create_chart("chartdiv");      })

    function create_chart(div) {
        ...see below
    }
    function generate_data() {
        ....see below
    }
}); 

5)

Bảng điều khiển-Mẫu

Trước khi chúng ta đi vào chi tiết “cách thức thực hiện”, điều quan trọng là phải hiểu các yếu tố cơ bản để có thể có một biểu đồ. Có nhiều cách để làm điều này, một số cách phức tạp hơn những cách khác, nhưng vì tôi đang nhắm đến một bảng điều khiển nên tôi đã chọn sử dụng phương pháp sau

1. Sử dụng thư viện biểu đồ bên ngoài để tạo biểu đồ cho ứng dụng khách khi trang web được yêu cầu từ quy trình làm việc
2. Yêu cầu dữ liệu biểu đồ từ quy trình làm việc bằng cách sử dụng ajax cứ sau 60 giây (hoặc khi làm mới thủ công)

Phương pháp này có nghĩa là tôi không phải lo lắng về trình ánh xạ dữ liệu, nó cũng cho phép tôi có một số hàm ajax – một hàm cho mỗi biểu đồ – có khả năng yêu cầu dữ liệu từ nhiều nguồn ở các định dạng khác nhau. Theo tôi, việc tạo nhiều nguồn dữ liệu trong một trình ánh xạ dữ liệu sẽ - quá phức tạp

Mẹo. Vì phương pháp này sử dụng ajax – nên chúng tôi cần đảm bảo thư viện jQuery được bao gồm trong mẫu. Nếu bạn không có nó, bạn có thể lấy nó bằng cách bắt đầu với mẫu nền tảng và lưu nó vào đĩa bằng cách kéo và thả từ Trình thiết kế

Rõ ràng là tôi sẽ không tự tạo biểu đồ, vì vậy tôi phải chọn một thư viện để sử dụng và tôi đã chọn amCharts. Lý do chính là vì nó có giao diện người dùng trực tuyến thực sự thú vị cho phép bạn tạo 95% html mà bạn cần để hoàn thành công việc mà không cần phải chạm vào một đoạn mã nào

Vì vậy, trước khi tôi nói về các yếu tố Kết nối, bạn nên truy cập vào Trình chỉnh sửa trực tiếp amCharts có thể tìm thấy tại đây

Trình chỉnh sửa trực tiếp

Nhấp vào liên kết sẽ hiển thị trang Trình hướng dẫn mới bên dưới, từ đó bạn có thể chọn điểm cơ sở biểu đồ của mình

Trong ví dụ của tôi, tôi đã chọn Loại đường, sau đó là chuỗi ngày, hàng tháng

Sau khi được chọn, bạn sẽ được đưa thẳng vào trình chỉnh sửa Trực tiếp, nơi bạn có thể thử với tất cả các thuộc tính và giá trị biểu đồ để sẵn sàng cho Kết nối. Trong trình chỉnh sửa, bạn có thể thêm/xóa và chỉnh sửa cột, chỉnh sửa nhãn và thậm chí chọn một số chủ đề. mỗi biểu đồ có một tập hợp "thuộc tính" riêng, vì vậy, bạn nên chơi xung quanh và tìm hiểu chúng cho các biểu đồ mà bạn cho rằng mình có thể muốn sử dụng thường xuyên hơn.

Sao chép HTML

Khi bạn đã có biểu đồ trông như thế nào bạn muốn, đã chỉnh sửa dữ liệu & thuộc tính để khớp với dữ liệu của riêng bạn, thì bạn chỉ cần sao chép HTML

Có một nút gọi là Lưu HTML. Khi bạn nhấp vào nó, bạn sẽ nhận được một cái gì đó như thế này…

Sau đó, bạn có thể sao chép nó vào khay nhớ tạm hoặc lưu nó vào hệ thống tệp cục bộ của mình

Trước khi chúng tôi bắt đầu chuyển html vào trang nguồn của Connect và mong nó hoạt động, chúng tôi cần hiểu những điều cơ bản về mẫu

Tổng quan

Mẫu sẽ tạo html trong đó có thể đặt biểu đồ. Biểu đồ sẽ được tạo bởi thư viện amCharts từ xa sau khi nhận được trang web của khách hàng. Sau đó, nó sẽ sử dụng lệnh gọi ajax đến quy trình làm việc để điền dữ liệu đó. Mẫu Kết nối cần liên kết tất cả các yếu tố này với nhau và sau đó đảm bảo rằng tất cả chúng đều chạy vào đúng thời điểm

amCharts HTML

Html bên dưới do trình chỉnh sửa amCharts tạo ra, tôi đã xóa mã javascript amCharts – chúng ta sẽ quay lại vấn đề đó sau

<!DOCTYPE html>
 <html>
     <head>
         <title>chart created with amCharts | amCharts</title>
         <meta name="description" content="chart created using amCharts live editor" />
                  <!-- amCharts javascript sources -->
         <script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
         <script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
         <script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/dark.js"></script>
                 <!-- amCharts javascript code -->
         <script type="text/javascript">
          .....
          .....
         </script>
     </head>
     <body>
         <div id="chartdiv" style="width: 100%; height: 400px; background-color: #282828;" ></div>
     </body>
 </html>

Chúng tôi không cần tất cả, chỉ cần các nguồn javascript của amChart và 

// this function make sure the client document is loaded before code is executed
$( document ).ready(function() {  //this calls a function which creates a chart for the div with id="chartdiv"
    create_chart("chartdiv");     // this calls the same chart function every every 60 seconds
      setInterval( function () {          create_chart("chartdiv");
     }, 60000 );                  // this calls the same chart function with the button with id="refresh" is clicked     $("#refresh").on('click', function() {
         create_chart("chartdiv");      })

    function create_chart(div) {
        ...see below
    }
    function generate_data() {
        ....see below
    }
}); 

nguồn Javascript amChart

Các nguồn này sẽ thay đổi từ biểu đồ này sang biểu đồ khác, vì vậy hãy đảm bảo bạn kiểm tra và đưa tất cả chúng vào – và đưa chúng vào trang web của bạn theo đúng thứ tự

• https. //www. amchart. com/lib/3/amcharts. js
• https. //www. amchart. com/lib/3/nối tiếp. js
• https. //www. amchart. com/lib/3/themes/dark. js

Cách dễ nhất là sử dụng tính năng Remote Javascript trong Connect (mặc dù tính năng này sẽ không hoạt động nếu bạn ngoại tuyến). Nếu muốn phiên bản ngoại tuyến, bạn có thể tìm thấy một số (không phải tất cả) tại đây

Chỉ cần chọn thư mục Javascripts trong thiết kế và nhấp chuột phải để hiển thị JavaScript từ xa mới

Mẹo. JavaScript máy khách chạy trên PC của người dùng từ xa, trong khi Tập lệnh máy chủ chạy trên PC quy trình làm việc. JavaScript phía máy khách không thể truy cập các biến luồng công việc trong khi tập lệnh Máy chủ có thể. Để chuyển thông tin máy chủ tới các tập lệnh phía máy khách, bạn cần tạo các thuộc tính phần tử. Tập lệnh của khách hàng có thể sử dụng JQuery để đọc các giá trị thuộc tính này

Hãy chắc chắn rằng bạn làm điều này cho mỗi một

HTML // this function make sure the client document is loaded before code is executed $( document ).ready(function() { //this calls a function which creates a chart for the div with id="chartdiv" create_chart("chartdiv"); // this calls the same chart function every every 60 seconds setInterval( function () { create_chart("chartdiv"); }, 60000 ); // this calls the same chart function with the button with id="refresh" is clicked $("#refresh").on('click', function() { create_chart("chartdiv"); }) function create_chart(div) { ...see below } function generate_data() { ....see below } }); 6

_

// this function make sure the client document is loaded before code is executed
$( document ).ready(function() {  //this calls a function which creates a chart for the div with id="chartdiv"
    create_chart("chartdiv");     // this calls the same chart function every every 60 seconds
      setInterval( function () {          create_chart("chartdiv");
     }, 60000 );                  // this calls the same chart function with the button with id="refresh" is clicked     $("#refresh").on('click', function() {
         create_chart("chartdiv");      })

    function create_chart(div) {
        ...see below
    }
    function generate_data() {
        ....see below
    }
}); 

Mẹo. Đảm bảo bạn đặt 

// this function make sure the client document is loaded before code is executed
$( document ).ready(function() {  //this calls a function which creates a chart for the div with id="chartdiv"
    create_chart("chartdiv");     // this calls the same chart function every every 60 seconds
      setInterval( function () {          create_chart("chartdiv");
     }, 60000 );                  // this calls the same chart function with the button with id="refresh" is clicked     $("#refresh").on('click', function() {
         create_chart("chartdiv");      })

    function create_chart(div) {
        ...see below
    }
    function generate_data() {
        ....see below
    }
}); 

6 của mình bên dưới một số html khác

<p>This is my Chart</p> <div id="chartdiv" style="width: 100%; height: 400px; background-color: #282828;" ></div>

Tổng quan về JavaScript của ứng dụng khách

Để làm cho biểu đồ hoạt động, có một vài yếu tố cần được kết hợp. Vì vậy, hãy bắt đầu với hình dạng cơ bản của tài nguyên JavaScript ứng dụng khách mới mà chúng ta có thể gọi là

<p>This is my Chart</p> <div id="chartdiv" style="width: 100%; height: 400px; background-color: #282828;" ></div>

// this function make sure the client document is loaded before code is executed
$( document ).ready(function() {  //this calls a function which creates a chart for the div with id="chartdiv"
    create_chart("chartdiv");     // this calls the same chart function every every 60 seconds
      setInterval( function () {          create_chart("chartdiv");
     }, 60000 );                  // this calls the same chart function with the button with id="refresh" is clicked     $("#refresh").on('click', function() {
         create_chart("chartdiv");      })

    function create_chart(div) {
        ...see below
    }
    function generate_data() {
        ....see below
    }
}); 

Chức năng biểu đồ

Để làm cho JavaScript của máy khách hiệu quả hơn, tập lệnh amCharts được bao gồm trong chức năng. Hầu hết nó là một thao tác cắt và dán đơn giản từ HTML amCharts, ngoại trừ đối tượng dataProvider – là một mảng tĩnh của dữ liệu mẫu của bạn – được thay thế bằng một hàm để tạo dữ liệu

function create_chart(div) {
     AmCharts.makeChart(div,     
    {
         "type": "serial",
         "categoryField": "date",
         "dataDateFormat": "DD/MM/YYYY",
         "theme": "black",
         "categoryAxis": {
             "minPeriod": "DD",
             "parseDates": true
         },
         "chartCursor": {
             "enabled": true,
             "categoryBalloonDateFormat": "MMM YYYY"
         },
         "chartScrollbar": {
         "enabled": true
         },
         "trendLines": [],
         "graphs": [{
             "bullet": "round",
             "id": "AmGraph-1",
             "title": "Selected Value",
             "valueField": "column-1"
         }],
         "guides": [],
         "valueAxes": [{
             "id": "ValueAxis-1",             "title": "Total Used"
         }],
         "allLabels": [],
         "balloon": {},
         "legend": {
             "enabled": true,
             "useGraphSettings": true
         },         "titles": [{
             "id": "Title-1",
             "size": 15,
             "text": "Usage over Time"         }],
         "dataProvider": generate_data()
     }) }

Tạo dữ liệu với Ajax

Trong HTML gốc, đối tượng dataProvider được khởi tạo với một mảng dữ liệu tĩnh. Tuy nhiên, chúng tôi cần lấy dữ liệu từ quy trình làm việc nên chúng tôi sử dụng ajax để làm điều đó. Hàm ajax cần các tham số để giao tiếp với quy trình làm việc và một trong số đó là url

Url cho quy trình công việc được chuyển bằng cách sử dụng biến 

<p>This is my Chart</p> <div id="chartdiv" style="width: 100%; height: 400px; background-color: #282828;" ></div>

<p>This is my Chart</p> <div id="chartdiv" style="width: 100%; height: 400px; background-color: #282828;" ></div>

<p>This is my Chart</p> <div id="chartdiv" style="width: 100%; height: 400px; background-color: #282828;" ></div>

Hàm 

<p>This is my Chart</p> <div id="chartdiv" style="width: 100%; height: 400px; background-color: #282828;" ></div>

<p>This is my Chart</p> <div id="chartdiv" style="width: 100%; height: 400px; background-color: #282828;" ></div>

Một vài điểm về chức năng này

• <p>This is my Chart</p> <div id="chartdiv" style="width: 100%; height: 400px; background-color: #282828;" ></div>
  

  8 có nghĩa là hàm sẽ đợi dữ liệu quay lại. Nếu hết thời gian, chức năng lỗi sẽ hiển thị thông báo trên PC của khách hàng
• khi thành công, dữ liệu từ quy trình làm việc được lưu trữ trong một đối tượng json có tên là json và sau đó được gán cho một lệnh gọi khác

  <p>This is my Chart</p> <div id="chartdiv" style="width: 100%; height: 400px; background-color: #282828;" ></div>
  

  9
• vòng lặp 

  // this function make sure the client document is loaded before code is executed
  $( document ).ready(function() {  //this calls a function which creates a chart for the div with id="chartdiv"
      create_chart("chartdiv");     // this calls the same chart function every every 60 seconds
        setInterval( function () {          create_chart("chartdiv");
       }, 60000 );                  // this calls the same chart function with the button with id="refresh" is clicked     $("#refresh").on('click', function() {
           create_chart("chartdiv");      })
  
      function create_chart(div) {
          ...see below
      }
      function generate_data() {
          ....see below
      }
  }); 
  

  0 , đọc 

  // this function make sure the client document is loaded before code is executed
  $( document ).ready(function() {  //this calls a function which creates a chart for the div with id="chartdiv"
      create_chart("chartdiv");     // this calls the same chart function every every 60 seconds
        setInterval( function () {          create_chart("chartdiv");
       }, 60000 );                  // this calls the same chart function with the button with id="refresh" is clicked     $("#refresh").on('click', function() {
           create_chart("chartdiv");      })
  
      function create_chart(div) {
          ...see below
      }
      function generate_data() {
          ....see below
      }
  }); 
  

  1 và 

  // this function make sure the client document is loaded before code is executed
  $( document ).ready(function() {  //this calls a function which creates a chart for the div with id="chartdiv"
      create_chart("chartdiv");     // this calls the same chart function every every 60 seconds
        setInterval( function () {          create_chart("chartdiv");
       }, 60000 );                  // this calls the same chart function with the button with id="refresh" is clicked     $("#refresh").on('click', function() {
           create_chart("chartdiv");      })
  
      function create_chart(div) {
          ...see below
      }
      function generate_data() {
          ....see below
      }
  }); 
  

  2 được quy trình làm việc trả về vào mảng đối tượng 

  // this function make sure the client document is loaded before code is executed
  $( document ).ready(function() {  //this calls a function which creates a chart for the div with id="chartdiv"
      create_chart("chartdiv");     // this calls the same chart function every every 60 seconds
        setInterval( function () {          create_chart("chartdiv");
       }, 60000 );                  // this calls the same chart function with the button with id="refresh" is clicked     $("#refresh").on('click', function() {
           create_chart("chartdiv");      })
  
      function create_chart(div) {
          ...see below
      }
      function generate_data() {
          ....see below
      }
  }); 
  

  3 bằng phương thức 

  // this function make sure the client document is loaded before code is executed
  $( document ).ready(function() {  //this calls a function which creates a chart for the div with id="chartdiv"
      create_chart("chartdiv");     // this calls the same chart function every every 60 seconds
        setInterval( function () {          create_chart("chartdiv");
       }, 60000 );                  // this calls the same chart function with the button with id="refresh" is clicked     $("#refresh").on('click', function() {
           create_chart("chartdiv");      })
  
      function create_chart(div) {
          ...see below
      }
      function generate_data() {
          ....see below
      }
  }); 
  

  4
• kết quả từ quy trình làm việc luôn là một chuỗi;

Mẹo. Tên trường từ cơ sở dữ liệu có thể bị thay đổi bởi quy trình làm việc – khoảng trắng được chuyển đổi thành dấu gạch dưới, v.v. – vì vậy điều quan trọng là phải xem dữ liệu để đảm bảo bạn biết tên json cuối cùng. Bạn có thể sử dụng hàm 

// this function make sure the client document is loaded before code is executed
$( document ).ready(function() {  //this calls a function which creates a chart for the div with id="chartdiv"
    create_chart("chartdiv");     // this calls the same chart function every every 60 seconds
      setInterval( function () {          create_chart("chartdiv");
     }, 60000 );                  // this calls the same chart function with the button with id="refresh" is clicked     $("#refresh").on('click', function() {
         create_chart("chartdiv");      })

    function create_chart(div) {
        ...see below
    }
    function generate_data() {
        ....see below
    }
}); 

7 để hiển thị kết quả trong trình duyệt

Vì vậy, với thiết lập mẫu, tất cả những gì chúng ta cần là một quy trình làm việc có khả năng cung cấp trang tổng quan và phản hồi các yêu cầu ajax

dữ liệu đầu tiên

Điều quan trọng nhất để làm đúng là giao tiếp giữa trang web và bảng điều khiển. Việc này được thực hiện thông qua hàm ajax gọi một url do quy trình làm việc xử lý

Một quy trình công việc điển hình sẽ như thế này

Vì vậy, chúng ta hãy đi qua các bước …

Đầu vào máy chủ HTTP

Thao tác này ghi lại yêu cầu url từ lệnh gọi ajax và cần được thiết lập để trả về 

// this function make sure the client document is loaded before code is executed
$( document ).ready(function() {  //this calls a function which creates a chart for the div with id="chartdiv"
    create_chart("chartdiv");     // this calls the same chart function every every 60 seconds
      setInterval( function () {          create_chart("chartdiv");
     }, 60000 );                  // this calls the same chart function with the button with id="refresh" is clicked     $("#refresh").on('click', function() {
         create_chart("chartdiv");      })

    function create_chart(div) {
        ...see below
    }
    function generate_data() {
        ....see below
    }
}); 

Mẹo.

// this function make sure the client document is loaded before code is executed
$( document ).ready(function() {  //this calls a function which creates a chart for the div with id="chartdiv"
    create_chart("chartdiv");     // this calls the same chart function every every 60 seconds
      setInterval( function () {          create_chart("chartdiv");
     }, 60000 );                  // this calls the same chart function with the button with id="refresh" is clicked     $("#refresh").on('click', function() {
         create_chart("chartdiv");      })

    function create_chart(div) {
        ...see below
    }
    function generate_data() {
        ....see below
    }
}); 

8 không phải là một tùy chọn trong danh sách thả xuống, vì vậy hãy nhập thủ công

truy vấn cơ sở dữ liệu

Tác vụ này sẽ lấy dữ liệu cho biểu đồ của bạn. Mô phỏng phải được đặt thành XML (tiếp theo nó sẽ được chuyển đổi thành JSON) và SQL phải đảm bảo rằng lượng dữ liệu tối thiểu được truy xuất để tránh gửi toàn bộ cơ sở dữ liệu tới máy khách

Trong tab SQL động (như hình bên dưới), tại tham số Chuỗi kết nối cơ sở dữ liệu, phải nhập chuỗi DSN để cho phép truy cập cơ sở dữ liệu (‘OL eDocs. accdb’, xem tài nguyên)

Để thực hiện việc này, chúng tôi sẽ d tải xuống và cài đặt Microsoft Access Database Engine 2010 (‘Access Database Engine. exe’, không phải 64-bit) từ liên kết sau. http. //www. Microsoft. com/en-us/tải xuống/chi tiết. aspx?displaylang=en&id=13255. Nhấp đúp chuột vào tệp thực thi để cài đặt nó. Bây giờ, để tạo Tên nguồn dữ liệu (DSN) cho tác vụ Dòng công việc của chúng tôi, hãy làm theo các bước nhanh sau.

• Mở Bảng điều khiển Windows và điều hướng đến Công cụ quản trị > Nguồn dữ liệu ODBC (32-bit)
• Nhấp vào tab “System DSN” và nhấp vào Thêm
• Chọn trình điều khiển tương ứng với loại tệp của bạn
• Trong trường hợp của chúng tôi, chúng tôi đang sử dụng tệp Access. Chọn Trình điều khiển Microsoft Access (

  function create_chart(div) {
       AmCharts.makeChart(div,     
      {
           "type": "serial",
           "categoryField": "date",
           "dataDateFormat": "DD/MM/YYYY",
           "theme": "black",
           "categoryAxis": {
               "minPeriod": "DD",
               "parseDates": true
           },
           "chartCursor": {
               "enabled": true,
               "categoryBalloonDateFormat": "MMM YYYY"
           },
           "chartScrollbar": {
           "enabled": true
           },
           "trendLines": [],
           "graphs": [{
               "bullet": "round",
               "id": "AmGraph-1",
               "title": "Selected Value",
               "valueField": "column-1"
           }],
           "guides": [],
           "valueAxes": [{
               "id": "ValueAxis-1",             "title": "Total Used"
           }],
           "allLabels": [],
           "balloon": {},
           "legend": {
               "enabled": true,
               "useGraphSettings": true
           },         "titles": [{
               "id": "Title-1",
               "size": 15,
               "text": "Usage over Time"         }],
           "dataProvider": generate_data()
       }) }
  

  0, 

  function create_chart(div) {
       AmCharts.makeChart(div,     
      {
           "type": "serial",
           "categoryField": "date",
           "dataDateFormat": "DD/MM/YYYY",
           "theme": "black",
           "categoryAxis": {
               "minPeriod": "DD",
               "parseDates": true
           },
           "chartCursor": {
               "enabled": true,
               "categoryBalloonDateFormat": "MMM YYYY"
           },
           "chartScrollbar": {
           "enabled": true
           },
           "trendLines": [],
           "graphs": [{
               "bullet": "round",
               "id": "AmGraph-1",
               "title": "Selected Value",
               "valueField": "column-1"
           }],
           "guides": [],
           "valueAxes": [{
               "id": "ValueAxis-1",             "title": "Total Used"
           }],
           "allLabels": [],
           "balloon": {},
           "legend": {
               "enabled": true,
               "useGraphSettings": true
           },         "titles": [{
               "id": "Title-1",
               "size": 15,
               "text": "Usage over Time"         }],
           "dataProvider": generate_data()
       }) }
  

  1)
• Nhấp vào Kết thúc để chọn tệp Access, CSV hoặc Excel của bạn
• Đặt tên cho DSN của bạn. Chúng tôi sẽ gọi nó là “DSN_Test” cho ví dụ này
• Trong Cơ sở dữ liệu, nhấp vào Chọn… và duyệt đến vị trí của 'OL eDocs. accdb’
• Nhấp vào OK

Cuối cùng, để nhập đúng chuỗi kết nối Cơ sở dữ liệu, nhấp vào nút bên cạnh trường (Kết nối với Nguồn dữ liệu ODBC), nhấp vào tab thứ hai, Nguồn dữ liệu máy và chọn DSN đã tạo trước đó (ví dụ:. ‘DSN_Test’), nhấp vào OK. Nhấn OK lần nữa nếu bạn chưa thêm bất kỳ mật khẩu nào cho nó. Một chuỗi sẽ được tự động thêm vào trường Chuỗi kết nối cơ sở dữ liệu như hình trên

Để biết thêm về DSN và cách chúng có thể được sử dụng với Connect, bạn có thể tham khảo Trích xuất thông tin cơ sở dữ liệu trong cấu hình ánh xạ dữ liệu

Script

Tác vụ thứ ba là một tập lệnh chung (có sẵn trong dashboard_sample. zip) chuyển đổi XML thành chuỗi json và gán nó cho một biến có tên là 

function create_chart(div) {
     AmCharts.makeChart(div,     
    {
         "type": "serial",
         "categoryField": "date",
         "dataDateFormat": "DD/MM/YYYY",
         "theme": "black",
         "categoryAxis": {
             "minPeriod": "DD",
             "parseDates": true
         },
         "chartCursor": {
             "enabled": true,
             "categoryBalloonDateFormat": "MMM YYYY"
         },
         "chartScrollbar": {
         "enabled": true
         },
         "trendLines": [],
         "graphs": [{
             "bullet": "round",
             "id": "AmGraph-1",
             "title": "Selected Value",
             "valueField": "column-1"
         }],
         "guides": [],
         "valueAxes": [{
             "id": "ValueAxis-1",             "title": "Total Used"
         }],
         "allLabels": [],
         "balloon": {},
         "legend": {
             "enabled": true,
             "useGraphSettings": true
         },         "titles": [{
             "id": "Title-1",
             "size": 15,
             "text": "Usage over Time"         }],
         "dataProvider": generate_data()
     }) }

Tạo tệp

Tác vụ thứ tư tạo một tệp mới từ biến 

function create_chart(div) {
     AmCharts.makeChart(div,     
    {
         "type": "serial",
         "categoryField": "date",
         "dataDateFormat": "DD/MM/YYYY",
         "theme": "black",
         "categoryAxis": {
             "minPeriod": "DD",
             "parseDates": true
         },
         "chartCursor": {
             "enabled": true,
             "categoryBalloonDateFormat": "MMM YYYY"
         },
         "chartScrollbar": {
         "enabled": true
         },
         "trendLines": [],
         "graphs": [{
             "bullet": "round",
             "id": "AmGraph-1",
             "title": "Selected Value",
             "valueField": "column-1"
         }],
         "guides": [],
         "valueAxes": [{
             "id": "ValueAxis-1",             "title": "Total Used"
         }],
         "allLabels": [],
         "balloon": {},
         "legend": {
             "enabled": true,
             "useGraphSettings": true
         },         "titles": [{
             "id": "Title-1",
             "size": 15,
             "text": "Usage over Time"         }],
         "dataProvider": generate_data()
     }) }

Mẹo. Bạn có thể xem dữ liệu json được tạo trong quy trình làm việc để xác thực tên đối tượng json cuối cùng của mình cho hàm ajax trong mẫu

Mẹo. nếu quy trình làm việc đang hoạt động và các dịch vụ đang chạy, bạn sẽ có thể xem trước biểu đồ ở chế độ Trực tiếp từ bên trong Trình thiết kế

Thử nghiệm thực sự của giải pháp là làm cho trang tổng quan hoạt động từ trình duyệt của bạn

Url cho trang tổng quan này sẽ là http. //< quy trình công việcIP. cổng>/bảng điều khiển

Kết quả của yêu cầu sẽ được xử lý bởi một quy trình công việc khác với Đầu vào máy chủ HTTP – lần này MIME phải là 

function create_chart(div) {
     AmCharts.makeChart(div,     
    {
         "type": "serial",
         "categoryField": "date",
         "dataDateFormat": "DD/MM/YYYY",
         "theme": "black",
         "categoryAxis": {
             "minPeriod": "DD",
             "parseDates": true
         },
         "chartCursor": {
             "enabled": true,
             "categoryBalloonDateFormat": "MMM YYYY"
         },
         "chartScrollbar": {
         "enabled": true
         },
         "trendLines": [],
         "graphs": [{
             "bullet": "round",
             "id": "AmGraph-1",
             "title": "Selected Value",
             "valueField": "column-1"
         }],
         "guides": [],
         "valueAxes": [{
             "id": "ValueAxis-1",             "title": "Total Used"
         }],
         "allLabels": [],
         "balloon": {},
         "legend": {
             "enabled": true,
             "useGraphSettings": true
         },         "titles": [{
             "id": "Title-1",
             "size": 15,
             "text": "Usage over Time"         }],
         "dataProvider": generate_data()
     }) }

Tác vụ thứ hai chỉ cần đặt địa chỉ cổng & IP của quy trình làm việc thành jobinfo 9 được chuyển đến mẫu

Mẫu không có dữ liệu và do đó ID bản ghi phải được đặt thành 0

Việc sử dụng trình ánh xạ dữ liệu cho dữ liệu của bạn không được đề cập trong bài viết này, nhưng có các khái niệm chính ở đó. Vì vậy, hãy xem những thay đổi nhỏ dưới đây

quy trình làm việc

Trước tiên, bạn sẽ cần thay đổi quy trình công việc để lấy dữ liệu, tạo bản đồ dữ liệu, sau đó chuyển dữ liệu vào mẫu trang tổng quan bằng cách sử dụng ID bản ghi hợp lệ

Thứ hai, bạn sẽ không cần các quy trình ajax nữa

Kịch bản phía máy chủ

Ánh xạ dữ liệu tạo dữ liệu tại máy chủ cần được gửi đến máy khách. Bạn có thể tạo chuỗi 

// this function make sure the client document is loaded before code is executed
$( document ).ready(function() {  //this calls a function which creates a chart for the div with id="chartdiv"
    create_chart("chartdiv");     // this calls the same chart function every every 60 seconds
      setInterval( function () {          create_chart("chartdiv");
     }, 60000 );                  // this calls the same chart function with the button with id="refresh" is clicked     $("#refresh").on('click', function() {
         create_chart("chartdiv");      })

    function create_chart(div) {
        ...see below
    }
    function generate_data() {
        ....see below
    }
}); 

function create_chart(div) {
     AmCharts.makeChart(div,     
    {
         "type": "serial",
         "categoryField": "date",
         "dataDateFormat": "DD/MM/YYYY",
         "theme": "black",
         "categoryAxis": {
             "minPeriod": "DD",
             "parseDates": true
         },
         "chartCursor": {
             "enabled": true,
             "categoryBalloonDateFormat": "MMM YYYY"
         },
         "chartScrollbar": {
         "enabled": true
         },
         "trendLines": [],
         "graphs": [{
             "bullet": "round",
             "id": "AmGraph-1",
             "title": "Selected Value",
             "valueField": "column-1"
         }],
         "guides": [],
         "valueAxes": [{
             "id": "ValueAxis-1",             "title": "Total Used"
         }],
         "allLabels": [],
         "balloon": {},
         "legend": {
             "enabled": true,
             "useGraphSettings": true
         },         "titles": [{
             "id": "Title-1",
             "size": 15,
             "text": "Usage over Time"         }],
         "dataProvider": generate_data()
     }) }

<p>This is my Chart</p> <div id="chartdiv" style="width: 100%; height: 400px; background-color: #282828;" ></div>

// this function make sure the client document is loaded before code is executed
$( document ).ready(function() {  //this calls a function which creates a chart for the div with id="chartdiv"
    create_chart("chartdiv");     // this calls the same chart function every every 60 seconds
      setInterval( function () {          create_chart("chartdiv");
     }, 60000 );                  // this calls the same chart function with the button with id="refresh" is clicked     $("#refresh").on('click', function() {
         create_chart("chartdiv");      })

    function create_chart(div) {
        ...see below
    }
    function generate_data() {
        ....see below
    }
}); 

Ghi chú.

// this function make sure the client document is loaded before code is executed
$( document ).ready(function() {  //this calls a function which creates a chart for the div with id="chartdiv"
    create_chart("chartdiv");     // this calls the same chart function every every 60 seconds
      setInterval( function () {          create_chart("chartdiv");
     }, 60000 );                  // this calls the same chart function with the button with id="refresh" is clicked     $("#refresh").on('click', function() {
         create_chart("chartdiv");      })

    function create_chart(div) {
        ...see below
    }
    function generate_data() {
        ....see below
    }
}); 

1 và 

// this function make sure the client document is loaded before code is executed
$( document ).ready(function() {  //this calls a function which creates a chart for the div with id="chartdiv"
    create_chart("chartdiv");     // this calls the same chart function every every 60 seconds
      setInterval( function () {          create_chart("chartdiv");
     }, 60000 );                  // this calls the same chart function with the button with id="refresh" is clicked     $("#refresh").on('click', function() {
         create_chart("chartdiv");      })

    function create_chart(div) {
        ...see below
    }
    function generate_data() {
        ....see below
    }
}); 

2 chỉ là ví dụ

Kịch bản phía máy khách

Sau đó, có thể thay đổi tập lệnh phía máy khách chứa hàm generate_data() để lấy thuộc tính 

var ajax_base_url;

if(automation.jobInfos.JobInfo9!='') {
    ajax_base_url = automation.jobInfos.JobInfo9;
} else {
    ajax_base_url = "http://127.0.0.1:8080";
}

results.attr("ajbase", ajax_base_url);

Bảng điều khiển động là gì?

Có bao nhiêu bảng thông tin động được phép cho một tổ chức?

Sự khác biệt giữa bảng điều khiển và bảng điều khiển động trong Salesforce là gì?

Việc sử dụng bảng điều khiển động trong Salesforce là gì?