Interactive graph and chart in HTML

# Interactive graph and chart in HTML (Highcharts.js and Chart.js) HTML 의 canvas tag 배워서 그리는거랑, 이런 open source js 공부해서 적용해서 그리는거랑 그닥 노력대비 효과 보는게 비슷비슷할듯도 한데... 그래도 당장은 js 있는거 써서 그리는게 더 보긴 깔끔하니 배워봅시다. ## PH

• 2023-03-10: To SEE.
• 2017-07-31: 더 정리.
• 2014-06-12: docuK upgrade.
• 2014-??-??: First Posting.

## TOC ## Highcharts.com 참조 . ### Line Chart - Basic Line

Monthly Average Temperature (Source: WorldClimate.com). (div with id="chart-basicLine"). Clicking legend togglings (show/hide) each individual. (Tokyo is initially hidden for the visible option test.)

Code:

#### Styling the charts CSS style can be editted like this, using JSON (JavaScript Object Notation). Styles are applied only afterwards. So the above chart is white, while the below charts are black (applied).

#### Using JavaScript Math functions tanh function은 support하는 브라우저가 별로 없구나 ㅡㅡ;;; 왜 안 나타나나 했네. (더 큰 문제는 브라우저별로 달라서 크로스 브라우징 체크하기가 난감하다는거네 =ㅇ=;;; 에러나면 그냥 javascript가 멈춰버리니.)

Math Functions (div with id="chart-function-graph")

Code:

### Time data with irregular intervals

Time data with irregular intervals

Code:

### Basic map, gradient color axis 다른 chart랑 같은 html 문서에 있을 경우 /maps/highmaps.js 를 넣으면 안되고, /maps/modules/map.js 를 넣어야 한다고 함.

If you already have Highcharts installed in the web page and want to run Highmaps as a plugin, include "maps/modules/map.js" script tag after "highcharts.js" .

Population density (div with id="chart-map")

Code:

#### Another map

Map of South Korea (div with id="map-south-korea")

Code:

## Chart.js (Chartjs.org) 참조 . ### Example ## RRA

1. Highcharts JS - Interactive JavaScript charts for your web projects,
   // https://www.highcharts.com/docs/maps/getting-started
   // Another good interactive chart(graph) javascript is this.
2. Google Developers - Google Charts - Display live data on your site;
   // This might make you plot a interactive graph in HTML.
3. Chart.js;
   // Simple yet flexible JavaScript charting library for the modern web.

Example of interactive graph/chart

4. Bloomberg - Personal Finance - Tesla No DeLorean as 619% Jump Makes Hottest Auto Stock, 2014-03-01, by Alan Ohnsma.
   // Graph with responsible width and interactive flags.
5. Google Public Data and Google Finance
   // Explore these sites, then you can see many examples of interactive graphs.
6. NASA - Jet Propulsion Laboratory - Climate time machine
   // Change of images along the time. Graphical interpretation of the global warming.
7. kipid's blog - 지구는 어느정도의 인구수까지 수용가능할까?, 2014-05-23;
   // 세계 인구밀도 그래프가 highchart 로 그려져 있음.