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.
176 lines
5.6 KiB
176 lines
5.6 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_number_format_l10n.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'>Number Format Localization</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_number_format_l10n.js</h3> |
|
<div class='c3-editor' id='javascript-editor'> |
|
// Locale for Russian (ru_RU) |
|
var d3locale = d3.locale({ |
|
"decimal": ",", |
|
"thousands": "\u00A0", |
|
"grouping": [3], |
|
"currency": ["", " руб."], |
|
"dateTime": "%A, %e %B %Y г. %X", |
|
"date": "%d.%m.%Y", |
|
"time": "%H:%M:%S", |
|
"periods": ["AM", "PM"], |
|
"days": ["воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота"], |
|
"shortDays": ["вс", "пн", "вт", "ср", "чт", "пт", "сб"], |
|
"months": ["января", "февраля", "марта", "апреля", "мая", "июня", "июля", "августа", "сентября", "октября", "ноября", "декабря"], |
|
"shortMonths": ["янв", "фев", "мар", "апр", "май", "июн", "июл", "авг", "сен", "окт", "ноя", "дек"] |
|
}); |
|
// More about locale settings: https://github.com/mbostock/d3/wiki/Localization |
|
var chart = c3.generate({ |
|
data: { |
|
columns: [ |
|
['data1', 30000, 20000, 10000, 40000, 15000, 250000], |
|
['data2', 100.5, 1200.46, 100.1, 40.12, 150.1, 250] |
|
], |
|
axes: { |
|
data2: 'y2' |
|
} |
|
}, |
|
axis : { |
|
y : { |
|
tick: { |
|
format: d3locale.numberFormat(",") |
|
} |
|
}, |
|
y2: { |
|
show: true, |
|
tick: { |
|
format: d3locale.numberFormat(",") |
|
} |
|
} |
|
} |
|
}); |
|
|
|
</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_number_format_l10n-f820fc77.js" type="text/javascript"></script> |
|
|
|
|
|
</body> |
|
</html>
|
|
|