<html> <head> <link href="/css/c3.css" rel="stylesheet" type="text/css"> </head> <body> <div id="chart1"></div> <div id="chart2"></div> <div id="chart3"></div> <div id="chart4"></div> <div id="chart5"></div> <div id="chart6"></div> <div id="chart7"></div> <div id="chart8"></div> <div id="chart9" style="width:33%;"></div> <div id="chart10"></div> <div id="chart11"></div> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="/js/c3.js"></script> <script> var chart1 = c3.generate({ bindto: '#chart1', data: { columns: [ ['data1', 190, 200, 190, null], ], type: 'bar', labels: { format: function (v, id) { if (v === null) { return 'Not Applicable'; } return d3.format('$')(v); } } } }); var chart2 = c3.generate({ bindto: '#chart2', data: { columns: [ ['data1', -190, -200, -190, null], ], type: 'bar', labels: { format: function (v, id) { if (v === null) { return 'Not Applicable'; } return d3.format('$')(v); } } } }); var chart3 = c3.generate({ bindto: '#chart3', data: { columns: [ ['data1', -190, 200, 190, null], ], type: 'bar', labels: { format: function (v, id) { if (v === null) { return 'Not Applicable'; } return d3.format('$')(v); } } } }); var chart4 = c3.generate({ bindto: '#chart4', data: { columns: [ ['data1', 190, 200, 190, null], ], type: 'bar', labels: { format: function (v, id) { if (v === null) { return 'Not Applicable'; } return d3.format('$')(v); } } }, axis: { rotated: true } }); var chart5 = c3.generate({ bindto: '#chart5', data: { columns: [ ['data1', -190, -200, -190, null], ], type: 'bar', labels: { format: function (v, id) { if (v === null) { return 'Not Applicable'; } return d3.format('$')(v); } } }, axis: { rotated: true } }); var chart6 = c3.generate({ bindto: '#chart6', data: { columns: [ ['data1', -190, 200, 190, null], ], type: 'bar', labels: { format: function (v, id) { if (v === null) { return 'Not Applicable'; } return d3.format('$')(v); } } }, axis: { rotated: true } }); var chart7 = c3.generate({ bindto: '#chart7', data: { columns: [ ['data1', 30, 200, 100, 500, 150, 250], ['data2', 50, 20, 10, 40, 15, 25], ['data3', 250, 220, 210, 240, 215, 225] ], groups: [['data1', 'data2', 'data3']], labels: true, type: 'bar', }, axis: { rotated: true } }); var chart8 = c3.generate({ bindto: '#chart8', data: { columns: [ ['data1', -30, -200, -100, -500, -150, -250], ['data2', -50, -20, -10, -40, -15, -25], ['data3', -250, -220, -210, -240, -215, -225] ], groups: [['data1', 'data2', 'data3']], labels: true, type: 'bar', }, axis: { rotated: true } }); var chart9 = c3.generate({ bindto: '#chart9', data: { columns: [ ['data1', -19000000000000, 200, 19000000000000, null], ], type: 'bar', labels: { format: function (v, id) { if (v === null) { return 'Not Applicable'; } return d3.format('$')(v); } } }, axis: { rotated: true } }); var chart10 = c3.generate({ bindto: '#chart10', data: { columns: [ ['data1', 300, 350, 300, 0, 0, 100], ['data2', 130, 0, 140, 200, 0, 50], ['data3', 130, 0, 140, 200, 0, 50], ['data4', 130, 0, 140, 200, 0, 50], ], type: 'area', groups: [['data1', 'data2', 'data3', 'data4']], labels: true } }); var chart11 = c3.generate({ bindto: '#chart11', data: { columns: [ ['data1', 300, 350, 300, 0, 0, 100], ['data2', 130, 0, 140, 200, 0, 50], ['data3', 130, 0, 140, 200, 0, 50], ['data4', 130, 0, 140, 200, 0, 50], ], groups: [['data1', 'data2', 'data3', 'data4']], labels: true } }); </script> </body> </html>