c3-column.js 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. /*************************************************************************************/
  2. // -->Template Name: Bootstrap Press Admin
  3. // -->Author: Themedesigner
  4. // -->Email: niravjoshi87@gmail.com
  5. // -->File: c3_chart_JS
  6. /*************************************************************************************/
  7. /*************************************/
  8. // Column chart //
  9. /*************************************/
  10. $(function() {
  11. // Callback that creates and populates a data table, instantiates the column chart, passes in the data and draws it.
  12. var columnChart = c3.generate({
  13. bindto: '#column-chart',
  14. size: { height: 400 },
  15. color: {
  16. pattern: ['#2962FF', '#343a40', '#4fc3f7']
  17. },
  18. // Create the data table.
  19. data: {
  20. columns: [
  21. ['option1', 130, -90, 170, 90, 120, 250],
  22. ['option2', 90, 150, 140, -150, 150, 50]
  23. ],
  24. type: 'bar'
  25. },
  26. bar: {
  27. width: {
  28. ratio: 0.5 // this makes bar width 50% of length between ticks
  29. }
  30. // or
  31. //width: 100 // this makes bar width 100px
  32. },
  33. grid: {
  34. y: {
  35. show: true
  36. }
  37. }
  38. });
  39. // Instantiate and draw our chart, passing in some options.
  40. setTimeout(function() {
  41. columnChart.load({
  42. columns: [
  43. ['option3', 50, -45, 200, 300, -95, 100]
  44. ]
  45. });
  46. }, 1000);
  47. });