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.
178 lines
5.2 KiB
178 lines
5.2 KiB
7 years ago
|
<!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-57883d58.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-4.13.0.min-1190977b.js" type="text/javascript"></script>
|
||
|
|
<script src="/js/c3.min-2c29991b.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>
|