mirror of https://github.com/masayuki0812/c3.git
Quite good looking graph derived from d3.js
http://c3js.org
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
177 lines
5.2 KiB
177 lines
5.2 KiB
<!DOCTYPE html> |
|
<html class='no-js'> |
|
<head> |
|
<meta charset='utf-8'> |
|
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'> |
|
<meta content='D3 based reusable chart library' name='description'> |
|
<meta content='c3js.org' name='author'> |
|
<meta content='width=device-width' name='viewport'> |
|
<title>C3.js | D3-based reusable chart library</title> |
|
<link href="/css/normalize-e465cb86.css" media="screen" rel="stylesheet" type="text/css" /> |
|
<link href="/css/foundation.min-978d4ce8.css" media="screen" rel="stylesheet" type="text/css" /> |
|
<link href="/css/tomorrow-d7cf0921.css" media="screen" rel="stylesheet" type="text/css" /> |
|
<link href="/css/c3-bbe380ed.css" media="screen" rel="stylesheet" type="text/css" /> |
|
<link href="/css/style-99fb8989.css" media="screen" rel="stylesheet" type="text/css" /> |
|
<link href="/css/samples/data_order-da39a3ee.css" media="screen" rel="stylesheet" type="text/css" /> |
|
<script> |
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ |
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), |
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) |
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); |
|
ga('create', 'UA-42896059-3', 'c3js.org'); |
|
ga('send', 'pageview'); |
|
</script> |
|
<script src="/js/vendor/modernizr-2.6.1.min-68fdcc99.js" type="text/javascript"></script> |
|
</head> |
|
<body class='antialiased'> |
|
<div class='sticky'> |
|
<nav class='top-bar' data-options='sticky_on: large' data-topbar> |
|
<ul class='title-area'> |
|
<li class='name'> |
|
<h1> |
|
<a href='/'>C3.js | D3-based reusable chart library</a> |
|
</h1> |
|
</li> |
|
<li class='toggle-topbar menu-icon'> |
|
<a href='#'> |
|
<span>Menu</span> |
|
</a> |
|
</li> |
|
</ul> |
|
<section class='top-bar-section'> |
|
<ul class='right'> |
|
<li class='has-form'> |
|
<a class='button' href='/gettingstarted.html'>Getting Started</a> |
|
</li> |
|
<li class='divider'></li> |
|
<li> |
|
<a href='/examples.html'>Examples</a> |
|
</li> |
|
<li class='divider'></li> |
|
<li> |
|
<a href='/reference.html'>Reference</a> |
|
</li> |
|
<li class='divider'></li> |
|
<li> |
|
<a href='https://groups.google.com/forum/#!forum/c3js' target='_blank'>Forum</a> |
|
</li> |
|
<li class='divider'></li> |
|
<li> |
|
<a href='https://github.com/c3js/c3' target='_blank'>Source</a> |
|
</li> |
|
</ul> |
|
</section> |
|
</nav> |
|
</div> |
|
<div class='container'> |
|
<h1 class='title'>Data Order</h1> |
|
<div class='chart'> |
|
<div id='chart'></div> |
|
</div> |
|
<div id='ace-error'></div> |
|
<div class='sourcecode margin-medium-v margin-small-h'> |
|
<h3># data_order.js</h3> |
|
<div class='c3-editor' id='javascript-editor'> |
|
var chart = c3.generate({ |
|
data: { |
|
columns: [ |
|
['data1', 130, 200, 320, 400, 530, 750], |
|
['data2', -130, 10, 130, 200, 150, 250], |
|
['data3', -130, -50, -10, -200, -250, -150] |
|
], |
|
type: 'bar', |
|
groups: [ |
|
['data1', 'data2', 'data3'] |
|
], |
|
order: 'desc' // stack order by sum of values descendantly. this is default. |
|
// order: 'asc' // stack order by sum of values ascendantly. |
|
// order: null // stack order by data definition. |
|
}, |
|
grid: { |
|
y: { |
|
lines: [{value:0}] |
|
} |
|
} |
|
}); |
|
|
|
setTimeout(function () { |
|
chart.load({ |
|
columns: [ |
|
['data4', 1200, 1300, 1450, 1600, 1520, 1820], |
|
] |
|
}); |
|
}, 1000); |
|
|
|
setTimeout(function () { |
|
chart.load({ |
|
columns: [ |
|
['data5', 200, 300, 450, 600, 520, 820], |
|
] |
|
}); |
|
}, 2000); |
|
|
|
setTimeout(function () { |
|
chart.groups([['data1', 'data2', 'data3', 'data4', 'data5']]) |
|
}, 3000); |
|
|
|
</div> |
|
</div> |
|
<footer> |
|
<hr> |
|
<p>© Masayuki Tanaka 2014</p> |
|
</footer> |
|
|
|
</div> |
|
<script src="/js/jquery-1.11.0.min-910066fb.js" type="text/javascript"></script> |
|
<script src="/js/foundation.min-1dfe8110.js" type="text/javascript"></script> |
|
<script src="/js/highlight.pack-4af5004d.js" type="text/javascript"></script> |
|
<script src="/js/d3-5.4.0.min-e9c75f0e.js" type="text/javascript"></script> |
|
<script src="/js/c3.min-50d5fecd.js" type="text/javascript"></script> |
|
<script> |
|
hljs.initHighlightingOnLoad(); |
|
$(document).foundation(); |
|
</script> |
|
|
|
<script src="/js/ace/ace.js" type="text/javascript"></script> |
|
<script src="/js/ace/mode-javascript.js" type="text/javascript"></script> |
|
<script src="/js/ace/theme-tomorrow.js" type="text/javascript"></script> |
|
<script> |
|
var editor = ace.edit('javascript-editor'), |
|
error = document.getElementById('ace-error'); |
|
|
|
function debounce(func, wait) { |
|
var timeout; |
|
return function() { |
|
var context = this, args = arguments; |
|
var later = function() { |
|
func.apply(context, args); |
|
}; |
|
clearTimeout(timeout); |
|
timeout = setTimeout(later, wait); |
|
}; |
|
}; |
|
|
|
editor.on('change', debounce(function(e) { |
|
try { |
|
eval(editor.getValue()); |
|
error.innerHTML = ''; |
|
} |
|
catch(e) { |
|
error.innerHTML = e; |
|
} |
|
}, 300)); |
|
|
|
editor.setOption("maxLines", 100); |
|
editor.setOption("showLineNumbers", false); |
|
editor.setOption("showGutter", false); |
|
|
|
editor.setTheme("ace/theme/tomorrow"); |
|
editor.getSession().setMode("ace/mode/javascript"); |
|
editor.commands.removeCommand('gotoline') // Disables the override of Command-L |
|
</script> |
|
|
|
<script src="/js/samples/data_order-5c8a8fd6.js" type="text/javascript"></script> |
|
|
|
|
|
</body> |
|
</html>
|
|
|