JSFiddle

  • Campaign Inventory chart

    No-Library (pure JS), HTML, CSS, JavaScript

    var chart = getChartConfig();
    chart.dataProvider = getChartData();
    
    AmCharts.makeChart( "chartdiv", chart);
    
    
    function getChartConfig() {
    	return {
        "type": "serial",
        
        "addClassNames": true,
        
        "autoMargins": false,
        "marginLeft ...
  • Animated gauge

    This demo shows how to implement dynamic, good-looking dashboards. The gradient fill of the GaugeBand is achieved via <a href="http://docs.amcharts.com/3/javascriptcharts/GaugeBand#gradientRatio"><code>gradientRatio</code></a> setting. The arrow and band angle is updated via <a href="http://docs.amcharts.com/3/javascriptcharts/GaugeArrow#setValue"><code>setValue()</code></a> and <a href="http://docs.amcharts.com/3/javascriptcharts/GaugeBand#setStartValue"><code>setStartValue()</code></a> / <a href="http://docs.amcharts.com/3/javascriptcharts/GaugeBand#setEndValue"><code>setEndValue()</code></a> API functions respectively.

    var chart = AmCharts.makeChart("chartdiv", {
      "theme": "light",
      "type": "gauge",
      "axes": [{
        "topTextFontSize": 20,
        "topTextYOffset": 70,
        "axisColor": "#31d6ea",
        "axisThickness": 1,
        "endValue": 100 ...
  • Angular Gauge With Two Axes

    Our Angular Gauge chart can have any number of axes. They can start and end at any angle, with any value. Any number of arrows is supported, different arrow animation effects can be used.

    var chart = AmCharts.makeChart( "chartdiv", {
      "theme": "light",
      "type": "gauge",
      "axes": [ {
        "axisColor": "green",
        "axisThickness": 3,
        "startValue": 60,
        "endValue": 120,
        "gridInside": false ...
  • Entity type colors

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class="entity-type-Location">Location</div>
    <div class="entity-type-Product">Product</div>
    <div class="entity-type-EndUseProperty">EndUseProperty</div>
    <div class="entity-type-FilterField">FilterField</div>
    <div class="entity-type-Run">Run</div>
    <div class="entity-type-Site">Site</div>
    <div class="entity-type-Other">Other</div>
  • R6S AlphaPack chances

    jQuery 3.2.1, HTML, CSS, JavaScript

    $('#run').on('click', run);
    
    function run() {
    	var wlRate = $('#wl-rate').val() * 1,
        	winRate = wlRate / (1 + wlRate),
        	maxIter = $('#max-iter').val() * 1,
            games ...
  • $.ajax exception handling

    jQuery 3.2.1, HTML, CSS, JavaScript

    $('#start').on('click', function() {
    	console.log('click');
        try {
            $.ajax({
                url:'https://fiddle.jshell.net/',
                success: function (response) {
                    $('#result').text('Success ...
  • SteamGifts ESGST

    Convert "ESGST-53-43-6b-61-48" to proper URL (see https://github.com/revilheart/ESGST/blob/master/ESGST.user.js, decodeGiveawayCode func)

    $('#convert').on('click', () => {
        var text = $('#text').val(),
        	arr = text.split('-'),
            code = [],
            link = 'https://www.steamgifts.com/giveaway/';
    
        arr.forEach((a ...
  • AmCharts label autoWrap

    Auto-wrap puts labels outside the chart unless "inside" is used

    var chart = AmCharts.makeChart("chartdiv", {
        "type": "serial",
        "theme": "light",
        
        /*"marginTop": 5,
        "marginRight": 0,
        "marginLeft": 0,
        "marginBottom": 20,*/
        
        "autoMargins": true,
        
        "categoryField ...
  • AmMaps - legend / zoom with 2 maps

    Based on this demo: https://www.amcharts.com/demos/grouped-countries-map/

    for(var i = 1; i <= 4; i++)
    	AmCharts.makeChart("map" + i, getMap());
    
    
    
    // ----------------------------------------------
    function getMap() {
    	return {
        "type": "map",
        "theme": "light",
        "dataProvider ...
  • Mandelbrot #9 is the latest revision

    After reading http://sunandstuff.com/mandelbrot/about/

    var steps = 10;
    
    var canvas = document.getElementById('mandelbrot'),
    	ctx = canvas.getContext('2d');
    
    var w = canvas.width,
    	h = canvas.height;
    
    var ...