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

<!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>&copy 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>