JAVASCRIPT   24

chartjs-data-api.js

Guest on 19th August 2021 04:31:31 PM

  1. $(function () {
  2.  
  3.   var Charts = {
  4.  
  5.     _HYPHY_REGEX: /-([a-z])/g,
  6.  
  7.     _cleanAttr: function (obj) {
  8.       delete obj["chart"]
  9.       delete obj["value"]
  10.       delete obj["labels"]
  11.     },
  12.  
  13.     doughnut: function (element) {
  14.       var attrData = $.extend({}, $(element).data())
  15.       var data     = eval(attrData.value)
  16.  
  17.       Charts._cleanAttr(attrData)
  18.  
  19.       var options = $.extend({
  20.         responsive: true,
  21.         animation: false,
  22.         segmentStrokeColor: '#fff',
  23.         segmentStrokeWidth: 2,
  24.         percentageInnerCutout: 80,
  25.       }, attrData)
  26.  
  27.       new Chart(element.getContext('2d')).Doughnut(data, options)
  28.     },
  29.  
  30.     bar: function (element) {
  31.       var attrData = $.extend({}, $(element).data())
  32.  
  33.       var data = {
  34.         labels   : eval(attrData.labels),
  35.         datasets : eval(attrData.value).map(function (set, index) {
  36.           return $.extend({
  37.             fillColor   : (index % 2 ? '#42a5f5' : '#1bc98e'),
  38.             strokeColor : 'transparent'
  39.           }, set)
  40.         })
  41.       }
  42.  
  43.       Charts._cleanAttr(attrData)
  44.  
  45.       var options = $.extend({
  46.         responsive: true,
  47.         animation: false,
  48.         scaleShowVerticalLines: false,
  49.         scaleOverride: true,
  50.         scaleSteps: 4,
  51.         scaleStepWidth: 25,
  52.         scaleStartValue: 0,
  53.         barValueSpacing: 10,
  54.         scaleFontColor: 'rgba(0,0,0,.4)',
  55.         scaleFontSize: 14,
  56.         scaleLineColor: 'rgba(0,0,0,.05)',
  57.         scaleGridLineColor: 'rgba(0,0,0,.05)',
  58.         barDatasetSpacing: 2
  59.       }, attrData)
  60.  
  61.       new Chart(element.getContext('2d')).Bar(data, options)
  62.     },
  63.  
  64.     line: function (element) {
  65.       var attrData = $.extend({}, $(element).data())
  66.  
  67.       var data = {
  68.         labels   : eval(attrData.labels),
  69.         datasets : eval(attrData.value).map(function (set) {
  70.           return $.extend({
  71.             fillColor: 'rgba(66, 165, 245, .2)',
  72.             strokeColor: '#42a5f5',
  73.             pointStrokeColor: '#fff'
  74.           }, set)
  75.         })
  76.       }
  77.  
  78.       Charts._cleanAttr(attrData)
  79.  
  80.       var options = $.extend({
  81.         animation: false,
  82.         responsive: true,
  83.         bezierCurve : true,
  84.         bezierCurveTension : 0.25,
  85.         scaleShowVerticalLines: false,
  86.         pointDot: false,
  87.         tooltipTemplate: "<%= value %>",
  88.         scaleOverride: true,
  89.         scaleSteps: 3,
  90.         scaleStepWidth: 1000,
  91.         scaleStartValue: 2000,
  92.         scaleLineColor: 'rgba(0,0,0,.05)',
  93.         scaleGridLineColor: 'rgba(0,0,0,.05)',
  94.         scaleFontColor: 'rgba(0,0,0,.4)',
  95.         scaleFontSize: 14,
  96.         scaleLabel: function (label) {
  97.           return label.value.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
  98.         }
  99.       }, attrData)
  100.  
  101.       new Chart(element.getContext('2d')).Line(data, options)
  102.     },
  103.  
  104.     'spark-line': function (element) {
  105.       var attrData = $.extend({}, $(element).data())
  106.  
  107.       var data = {
  108.         labels   : eval(attrData.labels),
  109.         datasets : eval(attrData.value).map(function (set) {
  110.           return $.extend({
  111.             fillColor: 'rgba(255,255,255,.3)',
  112.             strokeColor: '#fff',
  113.             pointStrokeColor: '#fff'
  114.           }, set)
  115.         })
  116.       }
  117.  
  118.       Charts._cleanAttr(attrData)
  119.  
  120.       var options = $.extend({
  121.         animation: false,
  122.         responsive: true,
  123.         bezierCurve : true,
  124.         bezierCurveTension : 0.25,
  125.         showScale: false,
  126.         pointDotRadius: 0,
  127.         pointDotStrokeWidth: 0,
  128.         pointDot: false,
  129.         showTooltips: false
  130.       }, attrData)
  131.  
  132.       new Chart(element.getContext('2d')).Line(data, options)
  133.     }
  134.   }
  135.  
  136.   $(document)
  137.     .on('redraw.bs.charts', function () {
  138.       $('[data-chart]').each(function () {
  139.         if ($(this).is(':visible')) {
  140.           Charts[$(this).attr('data-chart')](this)
  141.         }
  142.       })
  143.     })
  144.     .trigger('redraw.bs.charts')
  145. });

Raw Paste


Login or Register to edit or fork this paste. It's free.