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.
173 lines
5.1 KiB
173 lines
5.1 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/region-80d9b41a.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'>Region</h1> |
|
<div class='chart'> |
|
<div id='chart'></div> |
|
</div> |
|
<div id='ace-error'></div> |
|
<div class='sourcecode margin-medium-v margin-small-h'> |
|
<h3># region.js</h3> |
|
<div class='c3-editor' id='javascript-editor'> |
|
var chart = c3.generate({ |
|
data: { |
|
columns: [ |
|
['data1', 30, 200, 100, 400, 150, 250, 400], |
|
['data2', 830, 1200, 1100, 1400, 1150, 1250, 1500], |
|
], |
|
axes: { |
|
data2: 'y2' |
|
} |
|
}, |
|
axis: { |
|
y2: { |
|
show: true |
|
} |
|
}, |
|
regions: [ |
|
{axis: 'x', end: 1, class: 'regionX'}, |
|
{axis: 'x', start: 2, end: 4, class: 'regionX'}, |
|
{axis: 'x', start: 5, class: 'regionX'}, |
|
{axis: 'y', end: 50, class: 'regionY'}, |
|
{axis: 'y', start: 80, end: 140, class: 'regionY'}, |
|
{axis: 'y', start: 400, class: 'regionY'}, |
|
{axis: 'y2', end: 900, class: 'regionY2'}, |
|
{axis: 'y2', start: 1150, end: 1250, class: 'regionY2'}, |
|
{axis: 'y2', start: 1300, class: 'regionY2'}, |
|
] |
|
}); |
|
|
|
</div> |
|
</div> |
|
<div class='sourcecode'> |
|
<h3># region.css</h3> |
|
<pre><code class='css'>.c3-region.regionY { |
|
fill: red; |
|
} |
|
.c3-region.regionY2 { |
|
fill: green; |
|
} |
|
</code></pre> |
|
</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/region-d0725aa7.js" type="text/javascript"></script> |
|
|
|
|
|
</body> |
|
</html>
|
|
|