This is a Realtime and Simple JavaScript chart library that does not depend on libraries such as jQuery or google APIs.
JavaScript HTML
Latest commit 618c208 Nov 9, 2016 @toshirot committed on GitHub Update README.md
Permalink
Failed to load latest commit information.
plugins/pointer/cross fix: the fontAlign of value for chart right area Sep 13, 2015
README.md Update README.md Nov 9, 2016
bower.json v1.12.084 Nov 9, 2016
ccchart-min.js v1.12.084 Nov 9, 2016
ccchart.js v1.12.084 Nov 9, 2016
index.htm v1.12.084 Nov 9, 2016
package.json v1.12.084 Nov 9, 2016
update.htm v1.12.06 Jul 18, 2016
update.json v1.12.084 Nov 9, 2016

README.md

ccchart

This is a Simple and Realtime JavaScript chart library that does not depend on libraries such as jQuery or google APIs. You can use the following chart types. line, bar, pie, bezi, bezi2, stacked, area, stackedarea, stacked%, ampli, scatter, candle

@see http://ccchart.com/ @see http://ccchart.com/test/ws2.htm @doc (old) http://ccchart.com/doc/ccchart-1.06.3.pdf @blog http://ngw.jp/~tato/wp/?tag=ccchart @chat http://cht.pw/chat.htm


License

MIT


Some of the download method

  • Download from this page: Download the zip file by clicking on the upper right [Download ZIP] button on this top page. And installing unzip. or etc...
  • or Download from ccchart.com
  • or Bower
    $ cd ./YourDir
    $ npm i -g bower
    $ bower i ccchart
    ccchart directory has been generated.
    YourDir/
      bower_components/
        ccchart/
            README.md
            ccchart-min.js
            ccchart.js
            update.json
            plugins/
  • etc...

    What's New

    Current Release: 2016/11/05 v1.12.084

    2016/11/1 Automatic extraction ccchart Reference

    2016/02/18 add heatmap Type
    Demo http://ccchart.org/#102
    Demo Realtime http://ccchart.org/test/heatmap/test1-hmp-v1.12.01-ws.htm
    https://github.com/toshirot/ccchart/issues/9
    @see http://ngw.jp/~tato/wp/?p=3737

    Demo heatmap Fit the image http://ccchart.org/test/heatmap/test1.htm


    2015/09/08 add Candle Type
    http://ngw.jp/~tato/wp/?page_id=3612
    Demo ccchart.com: http://ccchart.com/#100 http://ccchart.org/test/candle/test-ws.htm


    Static Sample (Bar)

    Demo jsfiddle.net: http://jsfiddle.net/UkdvS/455/

    <script src="http://ccchart.com/js/ccchart.js" charset="utf-8"></script>
    <canvas id="hoge"></canvas>
    <script>
    var chartdata1 = {

    "config": { "title": "Bar Chart", "type": "bar" },

    "data": [ ["Year",2007,2008,2009,2010,2011,2012,2013], ["Tea",435,332,524,688,774,825,999], ["Coffee",600,335,584,333,457,788,900], ["Juice",60,435,456,352,567,678,1260], ["Oolong",200,123,312,200,402,300,512] ] }; ccchart.init('hoge', chartdata1) </script>

    Demo ccchart.com: http://ccchart.com/#57, http://ccchart.com/#72, http://ccchart.com/#73


    Static Sample (Line)

    Demo jsfiddle.net: http://jsfiddle.net/UkdvS/451/

    <script src="http://ccchart.com/js/ccchart.js" charset="utf-8"></script>
    <canvas id="hoge"></canvas>
    <script>
    var chartdata1 = {
      "config": {
        "title": "Option useMarker",
        "subTitle": "useMarker: maru",
        "type": "line",
        "useMarker": "maru",
        "lineWidth": 6,
        "markerWidth": 15
      },
      "data": [
        ["Year",2007,2008,2009,2010,2011,2012,2013],
        ["Tea",435,332,524,688,774,825,999],
        ["Coffee",600,335,584,333,457,788,900],
        ["Juice",60,435,456,352,567,678,1260],
        ["Oolong",200,123,312,200,402,300,512]
      ]
    };
    ccchart.init('hoge', chartdata1)
    </script>
    
    ccchart.com: http://ccchart.com/#15, http://ccchart.com/#7, http://ccchart.com/#96


    Other Types Samples


    Realtime Sample (use WebSocket)

    Demo ccchart.com: http://ccchart.com/#85
    Client Side

    <script src="http://ccchart.com/js/ccchart.js" charset="utf-8"></script>
    <canvas id="hoge"></canvas>
    <script>
    var chartdata1 = {
      "config": {
        "title": "WebSocket test",
        "subTitle": "realtime chart",
        "type": "bezi2",
        "lineWidth": 2,
        "minY": 0,
        "xScaleSkip": 3,
        "maxWsColLen": 18,
        "colorSet":
              ["#DDA0DD","#3CB000"]
      },
      "data": [
        ["time"],
        ["data1"],
        ["data2"]
      ]
    };
      ccchart
          .init('hoge', chartdata1)
          .ws('ws://ccchart.com:8016')
          .on('message', ccchart.wscase.oneColAtATime)
    </script>
    
    Server Side (Node.js)
    var WsServer = require('ws').Server;

    var tid; var ws = new WsServer({ host: 'ccchart.com', port: 8016 });

    //start broadCast(); function broadCast() { tid = setInterval(function() { var dataAry = mkData(); ws.clients.forEach(function(client) { if (client.readyState === 1) client.send(JSON.stringify(dataAry)); }); }, 200); } function mkData() { var data = [ ["Year"], ["s2"], ["s3"] ]; var now = new Date(); var H = now.getHours(); var M = now.getMinutes(); var S = now.getSeconds(); H = (H < 10) ? '0' + H : H; M = (M < 10) ? '0' + M : M; S = (S < 10) ? '0' + S : S; data[0] = H + ':' + M + ':' + S; data[1] = Math.floor(Math.random(10) * 96); data[2] = 32 + Math.floor(Math.random(10) * 18); return data; }

    //on connection for Heartbeat これはハートビート用なのでいらなければ無くてもOK // ccchart はデフォルトでは60秒に一度"Heartbeat"という文字列を // サーバーへ送り、その返信である"Heartbeat"文字列を受信しています ws.on('connection', function(socket) {

    console.log(
        'conned: ' + ws.clients.length, (new Date),
        socket.upgradeReq.socket.remoteAddress
    );
    
    socket.on('message', function(msg) {
        var msg = JSON.stringify(msg);
        if (msg === 'Heartbeat') {
            if (socket.readyState === 1) {
                socket.send(msg);
                console.log(msg);
            }
        }
    });
    

    });

    ccchart.com: http://ccchart.com/#88, http://ccchart.com/#89, http://ccchart.com/#81


    Plugins

  • ccchart用プラグインの作り方 http://ngw.jp/~tato/wp/?p=389

  • Tips

    Codes

    type methods

    background methods

    axis methods

    scale methods

    title methods

    hanrei methods

    unit methods

    markers methods

    shadows methods

    flip methods

    websockets methods

    image methods

    memo methods

    transformation methods

    to be continued