12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788 |
- <html>
- <head>
- <link rel="stylesheet" type="text/css" href="/css/c3.css">
- </head>
- <body>
- <div id="chart"></div>
- <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
- <script src="/js/c3.js"></script>
- <script>
- var axis_rotated = true;
- var generate = function () { return c3.generate({
- data: {
- x: 'x',
- columns: [
- ['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01'],
- ['data1', 190, 200, 190, null],
- ],
- type: 'bar',
- labels: {
- format: function (v, id) {
- if (v === null) {
- return 'Not Applicable';
- }
- return d3.format('$')(v);
- }
- }
- },
- axis: {
- x: {
- type: 'categorized'
- },
- rotated: axis_rotated
- },
- }); }, chart = generate();
- setTimeout(function () {
- chart.hide();
- }, 1000);
- setTimeout(function () {
- chart.show();
- }, 2000);
- setTimeout(function () {
- chart.load({
- columns: [
- ['data1', 300, 350, 100]
- ],
- categories: ['2014-01-01 10:10:10', '2014-02-01 12:30:00', '2014-03-01 16:30:00']
- });
- }, 3000);
- setTimeout(function () {
- chart.load({
- columns: [
- ['data1', 50, 100, 150]
- ],
- categories: ['2014', '2015', '2016']
- });
- }, 4000);
- setTimeout(function () {
- axis_rotated = false;
- chart = generate();
- }, 5000);
- setTimeout(function () {
- chart.load({
- columns: [
- ['data1', 300, 350, 100000]
- ],
- });
- }, 6000);
- setTimeout(function () {
- chart.load({
- columns: [
- ['data1', 50, 100, 150]
- ],
- });
- }, 7000);
- </script>
- </body>
- </html>
|