Interactive graph and chart in HTML

I will explain the methods later after learning them by myself.
svg/canvas 배워서 직접 script 짜서 그리는거랑 이거 사용법 배워서 그리는거랑 왜 별 차이가 없게 느껴지지 ㅡㅡ;;;; 꽤나 잘 그려주긴 하는데, 독특한 그래프를 그리고 싶을땐 별 도움이 안되는듯도. 그냥 많이들 그리는 형태의 그래프에서만 유용할듯.

Posting History

  • 2017-07-31 : 더 정리.
  • 2014-06-12 : docuK upgrade.
  • 2014-??-?? : First Posting.

Table of Contents

Line Chart - Basic Line (

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

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")

Line Chart - Ajax loaded data, clickable points (

Daily visits at (div with id="chart-ajax")

General - Basic map, Time data with irregular intervals

Time data with irregular intervals

General - 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")

Another map

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

References and Related Articles

  1. Highcharts JS - Interactive JavaScript charts for your web projects,
    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. 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 로 그려져 있음.
Posted by 냥냥 kipid
comments powered by Disqus

티스토리 툴바