A Pen by AMchart

Thumbnail
This awesome code was written by bktb, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright bktb ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  AMchart</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>

<div id="chartdiv"></div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/bktb/a-pen-by-amchart-aBBgqe */
html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
	width: 100%;
	height: 100%;
}

/*Downloaded from https://www.codeseek.co/bktb/a-pen-by-amchart-aBBgqe */
var chart = AmCharts.makeChart("chartdiv", {
  "theme": "light",
  "type": "serial",
  "dataProvider": [
                   {
    "User": "\nBellamy 37",
    "ClosedGreen1": 2,
    "ClosedGreen2": 353,
    "ClosedGreen3": 814,
    "ClosedYellow1": 0,
    "ClosedYellow2": 5,
    "ClosedYellow3": 0,
    "ClosedRed1": 0,
    "ClosedRed2": 0,
    "ClosedRed3": 0,
    "ClosedGreen4": 679,
    "ClosedYellow4": 0,
    "ClosedRed4": 0,
    "ClosedGreen5": 377,
    "ClosedYellow5": 2,
    "ClosedRed5": 23,
    "ClosedGreen6": 38,
    "ClosedYellow6": 0,
    "ClosedRed6": 19, 
    "ClosedGreen7": 13,
    "ClosedYellow7": 0,
    "ClosedRed7": 1,
    "ClosedGreen8": 28,
    "ClosedYellow8": 0,
    "ClosedRed8": 0,                     
    "ClosedGreen9": 12,
    "ClosedYellow9": 0,
    "ClosedRed9": 0,
    "ClosedGreen10": 8,
    "ClosedYellow10": 0,
    "ClosedRed10": 0,
    "ClosedGreen11": 50,
    "ClosedYellow11": 0,
    "ClosedRed11": 0,   
    "ClosedGreen12": 18,
    "ClosedYellow12": 0,
    "ClosedRed12": 0,
    "ClosedGreen13": 15,
    "ClosedYellow13": 0,
    "ClosedRed13": 0, 
    "ClosedGreen14": 26,
    "ClosedYellow14": 0,
    "ClosedRed14": 0,  
    "ClosedGreen15": 40,
    "ClosedYellow15": 0,
    "ClosedRed15": 1,   
    "ClosedGreen16": 9,
    "ClosedYellow16": 1,
    "ClosedRed16": 0,  
    "ClosedGreen17": 3,
    "ClosedYellow17": 0,
    "ClosedRed17": 0,  
    "ClosedGreen18": 4,
    "ClosedYellow18": 0,
    "ClosedRed18": 0,  
    "ClosedGreen19": 5,
    "ClosedYellow19": 0,
    "ClosedRed19": 0, 
    "ClosedGreen20": 4,
    "ClosedYellow20": 0,
    "ClosedRed20": 0,                      
    "ClosedGreen21": 4,
    "ClosedYellow21": 0,
    "ClosedRed21": 0,    
    "ClosedGreen22": 2,
    "ClosedYellow22": 0,
    "ClosedRed22": 0, 
    "ClosedGreen23": 1,
    "ClosedYellow23": 0,
    "ClosedRed23": 0,  
    "ClosedGreen24": 2,
    "ClosedYellow24": 0,
    "ClosedRed24": 0,   
    "ClosedGreen25": 5,
    "ClosedYellow25": 0,
    "ClosedRed25": 0,                     
    "ClosedGreen26": 2,
    "ClosedYellow26": 0,
    "ClosedRed26": 0,
    "ClosedGreen27": 2,
    "ClosedYellow27": 0,
    "ClosedRed27": 0,                     
    "label": 0
                     
  },
                   {
    "User": "\nBerth 50",
    "ClosedGreen1": 0,
    "ClosedGreen2": 1,
    "ClosedGreen3": 0,
    "ClosedYellow1": 1,
    "ClosedYellow2": 2,
    "ClosedYellow3": 3,
    "ClosedRed1": 0,
    "ClosedRed2": 0,
    "ClosedRed3": 0,
    "label": 0
  },
    {
    "User": "\nBob 44",
    "ClosedGreen1": 29,
    "ClosedGreen2": 32,
    "ClosedGreen3": 35,
    "ClosedYellow1": 32,
    "ClosedYellow2": 30,
    "ClosedYellow3": 37,
    "ClosedRed1": 0,
    "ClosedRed2": 0,
    "ClosedRed3": 0,
    "label": 0
  },
    {
    "User": "\nClaire 43",
    "ClosedGreen1": 116,
    "ClosedGreen2": 136,
    "ClosedGreen3": 177,
    "ClosedYellow1": 1,
    "ClosedYellow2": 1,
    "ClosedYellow3": 13,
    "ClosedRed1": 0,
    "ClosedRed2": 0,
    "ClosedRed3": 0,
    "label": 0
  },
    {
    "User": "\nDen 52",
    "ClosedGreen1": 1,
    "ClosedGreen2": 24,
    "ClosedYellow1": 0,
    "ClosedYellow2": 0,
    "ClosedRed1": 2,
    "ClosedRed2": 0,
    "label": 0
  },
    {
    "User": "\nFord 39",
    "ClosedGreen1": 0,
    "ClosedGreen2": 0,
    "ClosedGreen3": 1,
    "ClosedYellow1": 4,
    "ClosedYellow2": 5,
    "ClosedYellow3": 0,
    "ClosedRed1": 1,
    "ClosedRed2": 4,
    "ClosedRed3": 1,
    "label": 0
  },
    {
    "User": "\nGeorge 53",
    "ClosedGreen1": 0,
    "ClosedGreen2": 4,
    "ClosedGreen3": 8,
    "ClosedYellow1": 1,
    "ClosedYellow2": 0,
    "ClosedYellow3": 0,
    "ClosedRed1": 0,
    "ClosedRed2": 0,
    "ClosedRed3": 0,
    "label": 0
  }, {
    "User": "\nJenis 45",
    "ClosedGreen1": 123,
    "ClosedGreen2": 151,
    "ClosedGreen3": 76,
    "ClosedYellow1": 11,
    "ClosedYellow2": 48,
    "ClosedYellow2": 67,
    "ClosedRed1": 0,
    "ClosedRed2": 0,
    "ClosedRed3": 0,
    "label": 0
  }, {
    "User": "\nJhon 48",
    "ClosedGreen1": 2,
    "ClosedGreen2": 164,
    "ClosedGreen3": 131,
    "ClosedYellow1": 6,
    "ClosedYellow2": 13,
    "ClosedYellow2": 2,
    "ClosedRed1": 0,
    "ClosedRed2": 0,
    "ClosedRed3": 0,
    "label": 0
  }, {
    "User": "\nMark 51",
    "ClosedGreen1": 2,
    "ClosedGreen2": 164,
    "ClosedGreen3": 131,
    "ClosedYellow1": 6,
    "ClosedYellow2": 13,
    "ClosedYellow2": 2,
    "ClosedRed1": 0,
    "ClosedRed2": 0,
    "ClosedRed3": 0,
    "label": 0
  }],
  "valueAxes": [{
    "stackType": "regular",
    "position": "left",
    "title": ""
  }],
  "graphs": [
    // 1200 stack
    {
      "newStack": true,
      "fillAlphas": 0,
      "lineAlpha": 0,
      "title": "May\n13",
      "type": "column",
      "valueField": "label",
      "showAllValueLabels": true,
      "labelText": "\n[[title]]",
      "balloonFunction":adjustBalloonText
    }, {
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "type": "column",
      "fillColors": "#4BCB2A",
      "valueField": "ClosedGreen1",
      "balloonFunction":adjustBalloonText
    }, {
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "type": "column",
      "fillColors": "#FFFF00",
      "valueField": "ClosedYellow1"
    }, {
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "type": "column",
      "fillColors": "#FF0000",
      "valueField": "ClosedRed1"
    }, 
    // 0100 stack
    {
      "newStack": true,
      "fillAlphas": 0,
      "lineAlpha": 0,
      "title": "Jun\n13",
      "type": "column",
      "valueField": "label",
      "showAllValueLabels": true,
      "labelText": "\n[[title]]"
    }, {
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "title": "0100",
      "type": "column",
      "fillColors": "#4BCB2A",
      "valueField": "ClosedGreen2"
    }, {
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "title": "0100",
      "type": "column",
      "fillColors": "#FFFF00",
      "valueField": "ClosedYellow2"
    }, {
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "title": "0100",
      "type": "column",
      "fillColors": "#FF0000",
      "valueField": "ClosedRed2"
    }, 
    // 0200 stack
    {
      "newStack": true,
      "fillAlphas": 0,
      "lineAlpha": 0,
      "title": "Jul\n13",
      "type": "column",
      "valueField": "label",
      "showAllValueLabels": true,
      "labelText": "\n[[title]]"
    }, {
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "title": "0200",
      "type": "column",
      "fillColors": "#4BCB2A",
      "valueField": "ClosedGreen3"
    }, {
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "title": "0200",
      "type": "column",
      "fillColors": "#FFFF00",
      "valueField": "ClosedYellow3"
    }, {
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "title": "0200",
      "type": "column",
      "fillColors": "#FF0000",
      "valueField": "ClosedRed3"
    },
    // 0300 stack
    {
      "newStack": true,
      "fillAlphas": 0,
      "lineAlpha": 0,
      "title": "Aug\n13",
      "type": "column",
      "valueField": "label",
      "showAllValueLabels": true,
      "labelText": "\n[[title]]"
    }, {
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "type": "column",
      "fillColors": "#4BCB2A",
      "valueField": "ClosedGreen4"
    }, {
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "type": "column",
      "fillColors": "#FFFF00",
      "valueField": "ClosedYellow4"
    }, {
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "type": "column",
      "fillColors": "#FF0000",
      "valueField": "ClosedRed4"
    },
     // 0400 stack
    {
      "newStack": true,
      "fillAlphas": 0,
      "lineAlpha": 0,
      "title": "Sep\n13",
      "type": "column",
      "valueField": "label",
      "showAllValueLabels": true,
      "labelText": "\n[[title]]"
    }, {
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "type": "column",
      "fillColors": "#4BCB2A",
      "valueField": "ClosedGreen5"
    }, {
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "type": "column",
      "fillColors": "#FFFF00",
      "valueField": "ClosedYellow5"
    }, {
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "type": "column",
      "fillColors": "#FF0000",
      "valueField": "ClosedRed5"
    },
     // 0500 stack
    {
      "newStack": true,
      "fillAlphas": 0,
      "lineAlpha": 0,
      "title": "Oct\n13",
      "type": "column",
      "valueField": "label",
      "showAllValueLabels": true,
      "labelText": "\n[[title]]"
    }, {
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "type": "column",
      "fillColors": "#4BCB2A",
      "valueField": "ClosedGreen6"
    }, {
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "type": "column",
      "fillColors": "#FFFF00",
      "valueField": "ClosedYellow6"
    }, {
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "type": "column",
      "fillColors": "#FF0000",
      "valueField": "ClosedRed6"
    },
     // 0600 stack
    {
      "newStack": true,
      "fillAlphas": 0,
      "lineAlpha": 0,
      "title": "Nov\n13",
      "type": "column",
      "valueField": "label",
      "showAllValueLabels": true,
      "labelText": "\n[[title]]"
    }, {
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "type": "column",
      "fillColors": "#4BCB2A",
      "valueField": "ClosedGreen7"
    }, {
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "type": "column",
      "fillColors": "#FFFF00",
      "valueField": "ClosedYellow7"
    }, {
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "type": "column",
      "fillColors": "#FF0000",
      "valueField": "ClosedRed7"
    },
    // 0700 stack
    {
      "newStack": true,
      "fillAlphas": 0,
      "lineAlpha": 0,
      "title": "Dec\n13",
      "type": "column",
      "valueField": "label",
      "showAllValueLabels": true,
      "labelText": "\n[[title]]"
    }, {
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "type": "column",
      "fillColors": "#4BCB2A",
      "valueField": "ClosedGreen8"
    }, {
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "type": "column",
      "fillColors": "#FFFF00",
      "valueField": "ClosedYellow8"
    }, {
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "type": "column",
      "fillColors": "#FF0000",
      "valueField": "ClosedRed8"
    }
  ],
  "chartScrollbar": {
        "graph": "g1",
        "oppositeAxis":false,
        "offset":50,
        "scrollbarHeight": 40,
        "backgroundAlpha": 0.1,
        "selectedBackgroundAlpha": 0.1,
        "selectedBackgroundColor": "#888888",
        "graphFillAlpha": 0,
        "graphLineAlpha": 0.5,
        "selectedGraphFillAlpha": 0,
        "selectedGraphLineAlpha": 1,
        "autoGridCount":false,
        "color":"#AAAAAA"
    },
  "plotAreaFillAlphas": 0,
  "categoryField": "User",
  "categoryAxis": {
    "labelOffset": 15,
    "gridPosition": "start",
    "tickPosition": "start",
    
  }
});
chart.addListener("init", zoomChart);

function zoomChart() {
    // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
    chart.zoomToIndexes(0, 0);
}

function adjustBalloonText(graphDataItem, graph){
  
    var value = graphDataItem.values.value;
console.log(graphDataItem);
    if(value < 500){
        return value + "<br>(Little)";
    }
    else{
        return value + "<br>(A Lot)";
    }
}

Comments