Creating Dashboards Using Google Charts. PHP, and MySQL Database (Subtitles Added)

My Channel 및 생성 대시 보드 비디오에 오신 것을 환영합니다 브라우저 열기 Google 검색을 시작하고 "Google 차트"를 입력하십시오

developersgooglecom/chart로 첫 번째 링크를 클릭하고 Google 차트를 엽니 다 사용 가능한 속성 및 차트 갤러리가 표시됩니다 예를 들어 막 대형 차트를 선택하면 막 대형 차트 및 관련 메서드 목록, CODES 및 막 대형 차트로 수행 할 수있는 속성을 볼 수 있습니다

비디오에서 볼 수 있듯이 색상이나 전설 등 차트 또는 차트 구성 요소의 많은 특성을 사용자 정의 할 수 있습니다 또 다른 예로, 목록에서 원형 도표를 선택하면 사용 가능한 옵션과 관련 CODES가 표시되어 개발 환경에 임베드 할 수 있습니다 코드를 가져 와서 JsFiddle로 보낼 수 있습니다 (jsfiddlenet에서 계정을 가지고있는 것이 좋습니다) jsfidle이 열려 있으면 해당 관련 코드를 해당 매체에서 가져올 수 있습니다

jsfiddle 도구에는 코드 (예 : 상단 컨테이너), 차트 관련 CODES (하단 컨테이너) 및 차트 개체 (My Daily Activities) (오른쪽 컨테이너)를 정의하는 별도의 컨테이너가 있습니다 차트 관련 CODE 섹션에서 제목은 "My Daily Activities"로 표시됩니다 다른 것으로 변경할 수 있습니다 활동 카테고리와 그 값을 변경할 수도 있습니다 그리고 Run Button을 클릭하여 편집 결과를 확인하십시오

지금 developersgooglecom으로 돌아 가세요 CODE 섹션을 복사하십시오 이 코드를 PHP (Dreamweaver)에 붙여 넣습니다

코드의 프런트 엔드보기에 대한 라이브 단추를 클릭하십시오 jsfidle에서와 같이 일부 데이터 값을 변경하고 DW의 브라우저에 내장 된 Reload 버튼을 클릭합니다 Google 개발자 가이드 섹션에서 알 수 있듯이 사용자 환경 설정에 맞게 사용자 정의 할 수있는 많은 옵션이 있습니다 예를 들어, "options"내에 "colors"속성을 추가하여 파이의 제목이나 색상을 변경할 수 있습니다 ( "blue"는 "bleu"로 잘못 작성됨에 유의하십시오) 슬라이스를 제거 / 수정합시다! 블루! 파란색으로 수정! 자, 배경색을 노란색으로 조정 해 봅시다! 우리 프로젝트에서 우리는 "dashboard

html"이라는 이름의 html 파일을 만들었고 이전에 준비된 이러한 코드를 복사하여 다양한 차트 유형을 추가했습니다 비디오 및 Google 개발 가이드에서 볼 수 있듯이 각 차트에는 다른 사양, 속성 및 매개 변수가 있지만 일반 프레임 워크는 동일합니다 예를 들어, 범주의 비율을 가로로 표시하는 스택 유형 막 대형 차트에서는 네 개의 인수가 이름으로 사용률, 비율로 사용, 비례로 1 비율 및 역할로 역할을 필요로합니다 이제 phpMyAdmin으로 바로 넘어 가자 각 차트에 대해 고유 한 테이블이 표시됩니다

각 차트는 테이블로서 자체 데이터 필드를 가지고 있습니다 막대 그래프를 보면서 관련 분야를 만들고 각 카테고리에 대한 데이터를 채우려고합니다 코드 부분에 정적으로 포함하는 대신 동적으로 각 범주와 그 값을 정렬 할 수 있습니다 차이를 보여주기 위해 별도의 html 파일을 "대시 보드 FINALphp"로 만듭니다

이 동적 설정의 경우 먼저 코드 부분에서 데이터베이스에 대한 연결 문자열이 있어야합니다 여기서 우리는 서버 이름, 사용자 이름과 암호 및 데이터베이스 이름을 지정해야합니다 그것은 비디오에서 볼 수 있습니다 데이터베이스에 대한 브리징을 작성한 후 간단한 SQL 쿼리 문장을 통해 관련 데이터를 검색해야합니다 그런 다음 foreach 루프를 사용하면이 브리지를 데이터베이스에 연결하기 전에 모든 데이터를 가져 와서 앞의 경우처럼 원형 차트에 삽입 할 수 있습니다

막 대형 차트의이 CODE 부분은 원형 차트의 CODE 부분과 매우 유사합니다 캔들 스틱 차트와 다른 유형의 차트 예제와 동일합니다 모든 차트 예제를 데이터로 채운 후에는 데이터베이스 연결을 닫습니다 차트 및 데이터 준비를 설정 한 후에는 HTML 페이지를 만들어야합니다 Google은 관련 링크 인 google / jsapi를 참조하기 위해 링크를 만듭니다

다음 단계는 jquery의 간단한 CODE 부분을 만드는 것이다 여기에 우리는 다른 차트와 비슷한 코드 부분을 가지고 있습니다 나중에 각 차트는 테이블의 개별 셀에 삽입됩니다 마지막으로 HTML 부분에 대한 PHP 코드 섹션을 종료합니다 우리는 결국 모든 구조를 마쳤습니다

또한 데이터베이스를 업데이트하고 프런트 엔드 뷰를 새로 고침하면 언제든지 모든 차트를 업데이트 할 수 있습니다 이러한 대화 형 개발 환경을 제공 한 Google에 많은 감사를드립니다 또한 Dreamweaver에 제품 데모 버전을 제공해 주신 것에 대해 감사드립니다 phpMyAdmin 및 MySql 개발자와 오픈 소스 및 자유롭게 사용할 수있는 인 에이 블러 덕분에 특별히 감사드립니다