Edit in JSFiddle

//=============================================================================
// Sphinx-Chart2Scene.js
//=============================================================================

/*:
 * @plugindesc Scène de démonstration du plugin Sphinx-Chart2
 * @author Sphinx
 *
 * @help
 * //==========================================================================
 * // Plugin : Sphinx-Chart2Scene
 * // Date   : 30 décembre 2019
 * // Auteur : Sphinx
 * //==========================================================================
 * 
 * Dépendances :
 *     - Sphinx-Chart2
 * @param background
 * @text Image d'arrière plan de la scène
 * @type file
 * @dir img/titles1/
 * @require 1
 * 
 * @param enemies
 * @text Images d'arrière plan des graphiques
 * @type file[]
 * @dir img/enemies/
 * @require 1
 */

CHART_TYPES = [ "line", "bar", "radar", "pie", "doughnut" ];
AVAILABLE_EASING = [ "linearTween", "easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeInQuint", "easeOutQuint", "easeInOutQuint", "easeInSine", "easeOutSine", "easeInOutSine", "easeInExpo", "easeOutExpo", "easeInOutExpo", "easeInCirc", "easeOutCirc", "easeInOutCirc" ];
SYLLABES_DEBUT = [ "Bi", "Tor", "Teri", "Alim", "Cre", "Dri", "Epi", "Fra", "Gro", "Hima", "Jutu", "Kima", "Lu", "Mi", "No", "Noto", "Ori", "Pru", "Qu", "Ria", "Su", "Umako", "Vime", "Wito", "Xi", "Ya", "Zumo", "Api", "Bele", "Cepi", "Do", "Ea", "Fe", "Gato", "Holo", "Ipe", "Jo", "Kala", "Lara", "Meta", "Noxa", "Orra", "Pi", "Quima", "Ro", "Sele", "Ule", "Vi", "Waxa", "Xo", "Yora", "Zuli" ];
SYLLABES_FIN = [ "von", "oll", "tol", "gon", "prim", "tes", "lup", "vim", "qua", "pip", "am", "lm", "thor", "gig", "ve", "qum", "la", "leuth", "bas", "ro", "porr", "lia", "w", "kra", "cor", "mmon" ];
BACKGROUND_IMAGES = JSON.parse(PluginManager.parameters("Sphinx-Chart2Scene")["enemies"]);
CSS_COLORS = [ "AliceBlue", "AntiqueWhite", "Aqua", "Aquamarine", "Azure", "Beige", "Bisque", "Black", "BlanchedAlmond", "Blue", "BlueViolet", "Brown", "BurlyWood", "CadetBlue", "Chartreuse", "Chocolate", "Coral", "CornflowerBlue", "Cornsilk", "Crimson", "Cyan", "DarkBlue", "DarkCyan", "DarkGoldenRod", "DarkGray", "DarkGrey", "DarkGreen", "DarkKhaki", "DarkMagenta", "DarkOliveGreen", "DarkOrange", "DarkOrchid", "DarkRed", "DarkSalmon", "DarkSeaGreen", "DarkSlateBlue", "DarkSlateGray", "DarkSlateGrey", "DarkTurquoise", "DarkViolet", "DeepPink", "DeepSkyBlue", "DimGray", "DimGrey", "DodgerBlue", "FireBrick", "FloralWhite", "ForestGreen", "Fuchsia", "Gainsboro", "GhostWhite", "Gold", "GoldenRod", "Gray", "Grey", "Green", "GreenYellow", "HoneyDew", "HotPink", "IndianRed", "Indigo", "Ivory", "Khaki", "Lavender", "LavenderBlush", "LawnGreen", "LemonChiffon", "LightBlue", "LightCoral", "LightCyan", "LightGoldenRodYellow", "LightGray", "LightGrey", "LightGreen", "LightPink", "LightSalmon", "LightSeaGreen", "LightSkyBlue", "LightSlateGray", "LightSlateGrey", "LightSteelBlue", "LightYellow", "Lime", "LimeGreen", "Linen", "Magenta", "Maroon", "MediumAquaMarine", "MediumBlue", "MediumOrchid", "MediumPurple", "MediumSeaGreen", "MediumSlateBlue", "MediumSpringGreen", "MediumTurquoise", "MediumVioletRed", "MidnightBlue", "MintCream", "MistyRose", "Moccasin", "NavajoWhite", "Navy", "OldLace", "Olive", "OliveDrab", "Orange", "OrangeRed", "Orchid", "PaleGoldenRod", "PaleGreen", "PaleTurquoise", "PaleVioletRed", "PapayaWhip", "PeachPuff", "Peru", "Pink", "Plum", "PowderBlue", "Purple", "RebeccaPurple", "Red", "RosyBrown", "RoyalBlue", "SaddleBrown", "Salmon", "SandyBrown", "SeaGreen", "SeaShell", "Sienna", "Silver", "SkyBlue", "SlateBlue", "SlateGray", "SlateGrey", "Snow", "SpringGreen", "SteelBlue", "Tan", "Teal", "Thistle", "Tomato", "Turquoise", "Violet", "Wheat", "White", "WhiteSmoke", "Yellow", "YellowGreen" ];

//-----------------------------------------------------------------------------
// Game_Interpreter
//
// Commandes de plugin
Sphinx_Chart_Game_Interpreter_pluginCommand = Game_Interpreter.prototype.pluginCommand;
Game_Interpreter.prototype.pluginCommand = function(command, args) {
    Sphinx_Chart_Game_Interpreter_pluginCommand.call(this, command, args);
    if(command === "DEMO_GRAPH") {
        SceneManager.push(Scene_Chart2);
    }
};

//-----------------------------------------------------------------------------
// Scene_Chart2
//
// Scène de démonstration du plugin Sphinx-Chart2
function Scene_Chart2() {
    this.initialize.apply(this, arguments);
};

Scene_Chart2.prototype = Object.create(Scene_Base.prototype);
Scene_Chart2.prototype.constructor = Scene_Chart2;

Scene_Chart2.prototype.initialize = function() {
    Scene_Base.prototype.initialize.call(this);
};

Scene_Chart2.prototype.create = function() {
    Scene_Base.prototype.create.call(this);
    this.createWindowLayer();
    this.createBackground();
    this.createWindows();
    this.createTexts();
};

Scene_Chart2.prototype.start = function() {
    Scene_Base.prototype.start.call(this);
    this.startFadeIn(this.fadeSpeed(), false);
    this._windowTypeChart.open();
};

Scene_Chart2.prototype.terminate = function() {
    Scene_Base.prototype.terminate.call(this);
    SceneManager.goto(Scene_Map);
    this.startFadeOut(this.fadeSpeed(), false);
};

Scene_Chart2.prototype.update = function() {
    Scene_Base.prototype.update.call(this);
    if(Input.isTriggered("cancel")) {
        SoundManager.playCancel();
        this.terminate();
    }
};

Scene_Chart2.prototype.createBackground = function() {
    this._background = new Sprite_Base();
    background = PluginManager.parameters("Sphinx-Chart2Scene")["background"];
    this._background.bitmap = ImageManager.loadTitle1(background);
    this.addChildAt(this._background, 0);
};

Scene_Chart2.prototype.createWindows = function() {
    this._windowTypeChart = new Window_TypeChart();
    for(type of CHART_TYPES) {
        this._windowTypeChart.setHandler("draw_" + type, this.chooseEasing.bind(this, type));
    }
    this.addWindow(this._windowTypeChart);
    
    this._windowChooseEasing = new Window_ChooseEasing();
    for(easing of AVAILABLE_EASING) {
        this._windowChooseEasing.setHandler("choose_" + easing, this.changeGraph.bind(this, easing));
    }
    this.addWindow(this._windowChooseEasing);
};

Scene_Chart2.prototype.createTexts = function() {
    this._titleText = new Sprite_Base();
    this._titleText.x = 0;
    this._titleText.y = 0;
    this._titleText.width = Graphics.boxWidth;
    this._titleText.height = (Graphics.boxHeight - 480) / 2;
    this._titleText.bitmap = new Bitmap(Graphics.boxWidth, (Graphics.boxHeight - 480) / 2);
    this._titleText.bitmap.drawText("Démonstration - Sphinx-Chart2", 0, 16, Graphics.boxWidth - 32, 40, "center");
    this.addChildAt(this._titleText, 2);
    
    this._explicationText1 = new Sprite_Base();
    this._explicationText1.x = 0;
    this._explicationText1.y = Graphics.boxHeight - ((Graphics.boxHeight - 480) / 2);
    this._explicationText1.width = Graphics.boxWidth;
    this._explicationText1.height = (Graphics.boxHeight - 480) / 4;
    this._explicationText1.bitmap = new Bitmap(Graphics.boxWidth, (Graphics.boxHeight - 480) / 4);
    this._explicationText1.bitmap.fontSize = 18;
    this._explicationText1.bitmap.drawText("Choisissez un type de graphique, puis un type d'accélération.", 0, 8, Graphics.boxWidth - 32, 20, "center");
    this.addChildAt(this._explicationText1, 3);
    
    this._explicationText2 = new Sprite_Base();
    this._explicationText2.x = 0;
    this._explicationText2.y = Graphics.boxHeight - ((Graphics.boxHeight - 480) / 4);
    this._explicationText2.width = Graphics.boxWidth;
    this._explicationText2.height = (Graphics.boxHeight - 480) / 4;
    this._explicationText2.bitmap = new Bitmap(Graphics.boxWidth, (Graphics.boxHeight - 480) / 4);
    this._explicationText2.bitmap.fontSize = 18;
    this._explicationText2.bitmap.drawText("Vous pouvez cliquer sur le graphique pour relancer l'animation.", 0, 8, Graphics.boxWidth - 32, 20, "center");
    this.addChildAt(this._explicationText2, 4);
};

Scene_Chart2.prototype.chooseEasing = function(type) {
    if(this.chart) this.removeChild(this.chart);
    this.type = type;
    this._windowChooseEasing.open();
    this._windowChooseEasing.activate();
}

Scene_Chart2.prototype.changeGraph = function(easing) {
    this._windowChooseEasing.close();
    categories = this.getCategories(this.type);
    xLabels = this.getXLabels(this.type);
    datas = this.getDatas(this.type);
    background = this.getRandomChartBackground();
    console.log(this.type, datas);
    this.chart = new SphinxChart2({
        type: this.type,
        title: this.type.capitalize() + " - " + easing.capitalize(),
        categoriesLabels: categories,
        xAxisLabels: xLabels,
        datas: datas,
        options: {
            easing: easing,
            duration: 1,
            background: background,
            forceMinToZero: false,
            position: {
                x: 166,
                y: (Graphics.boxHeight - 480) / 2,
                width: 640,
                height: 480,
            },
            padding: {
                top: 10,
                left: 25,
                right: 25,
                bottom: 25,
            }
        }
    });
    this.addChildAt(this.chart, 1);
    this._windowTypeChart.activate();
};

Scene_Chart2.prototype.getCategories = function(type) {
    switch(type) {
        case "line":
        case "bar":
        case "radar":
        case "pie":
        case "doughnut":
            noms = [];
            for(i = 1; i <= 10; ++i) {
                noms.push(SYLLABES_DEBUT[Math.randomInt(0, SYLLABES_DEBUT.length)] + SYLLABES_FIN[Math.randomInt(0, SYLLABES_FIN.length)]);
            }
            return noms;
    }
};

Scene_Chart2.prototype.getXLabels = function(type) {
    switch(type) {
        case "line":
            return [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
        case "bar":
        case "radar":
            noms = [];
            for(i = 1; i <= 10; ++i) {
                noms.push(SYLLABES_DEBUT[Math.randomInt(0, SYLLABES_DEBUT.length)] + SYLLABES_FIN[Math.randomInt(0, SYLLABES_FIN.length)]);
            }
            return noms;
        case "pie":
        case "doughnut":
            return null;
    }
};

Scene_Chart2.prototype.getDatas = function(type) {
    switch(type) {
        case "line":
        case "bar":
        case "radar":
            datas = [];
            numberDatasInCategory = Math.randomInt(2, 11);
            maxI = Math.randomInt(2, 6);
            for(i = 1; i <= maxI; ++i) {
                datasCategory = [];
                for(j = 1; j <= numberDatasInCategory; ++j) {
                    datasCategory.push(Math.randomInt(5, 51));
                }
                datas.push(datasCategory);
            }
            return datas;
        case "pie":
        case "doughnut":
            datas = [];
            for(i = 1; i <= Math.randomInt(2, 6); ++i) {
                datas.push(Math.randomInt(5, 51));
            }
            return datas;
    }
};

Scene_Chart2.prototype.getRandomChartBackground = function() {
    switch(Math.randomInt(0, 4)) {
        case 0:
            return "transparent";
        case 1:
            if(BACKGROUND_IMAGES.length == 0) return "transparent";
            return ImageManager.loadEnemy(BACKGROUND_IMAGES[Math.randomInt(0, BACKGROUND_IMAGES.length)]);
        case 2:
            colors = [];
            for(i = 1; i <= Math.randomInt(2, 11); ++i) {
                colors.push(CSS_COLORS[Math.randomInt(0, CSS_COLORS.length)]);
            }
            return colors;
        case 3:
            return CSS_COLORS[Math.randomInt(0, CSS_COLORS.length)];
    }
};

Scene_Chart2.prototype.fastForwardRate = function() {
    return 3;
};

Scene_Chart2.prototype.isFastForward = function() {
    return (Input.isPressed('ok') || Input.isPressed('shift') || TouchInput.isPressed());
};

Scene_Chart2.prototype.updateFade = function() {
    if(this._fadeDuration > 0) {
        var d = this._fadeDuration;
        if(this.isFastForward()) {
            d -= this.fastForwardRate() - 1;
            this._fadeDuration -= this.fastForwardRate();
        } else {
            this._fadeDuration--;
        }
        if(this._fadeSign > 0) {
            this._fadeSprite.opacity -= this._fadeSprite.opacity / d;
        } else {
            this._fadeSprite.opacity += (255 - this._fadeSprite.opacity) / d;
        }
    }
};

Scene_Chart2.prototype.fadeSpeed = function(ignoreFast) {
    return 30;
};

//-----------------------------------------------------------------------------
// Window_TypeChart
//
// Fenêtre de sélection du type du graphique

function Window_TypeChart() {
    this.initialize.apply(this, arguments);
};

Window_TypeChart.prototype = Object.create(Window_Command.prototype);
Window_TypeChart.prototype.constructor = Window_TypeChart;

Window_TypeChart.prototype.initialize = function() {
    Window_Command.prototype.initialize.call(this, 0, 0);
    this.updatePlacement();
};

Window_TypeChart.prototype.windowWidth = function() {
    return 150;
};

Window_TypeChart.prototype.updatePlacement = function() {
    this.x = 8;
    this.y = (Graphics.boxHeight - this.height) / 2;
};

Window_TypeChart.prototype.makeCommandList = function() {
    for(type of CHART_TYPES) {
        this.addCommand(type.capitalize(), "draw_" + type);
    }
};

Window_TypeChart.prototype.isContinueEnabled = function() {
    return DataManager.isAnySavefileExists();
};

//-----------------------------------------------------------------------------
// Window_ChooseEasing
//
// Fenêtre de sélection du type d'accélération

function Window_ChooseEasing() {
    this.initialize.apply(this, arguments);
};

Window_ChooseEasing.prototype = Object.create(Window_Command.prototype);
Window_ChooseEasing.prototype.constructor = Window_ChooseEasing;

Window_ChooseEasing.prototype.initialize = function() {
    Window_Command.prototype.initialize.call(this, 0, 0);
    this.close();
    this.updatePlacement();
};

Window_ChooseEasing.prototype.maxCols = function() {
    return 3;
};

Window_ChooseEasing.prototype.windowWidth = function() {
    return Graphics.boxWidth - 64;
};

Window_ChooseEasing.prototype.updatePlacement = function() {
    this.x = (Graphics.boxWidth - this.width) / 2;
    this.y = (Graphics.boxHeight - this.height) / 2;
};

Window_ChooseEasing.prototype.makeCommandList = function() {
    for(easing of AVAILABLE_EASING) {
        this.addCommand(easing.capitalize(), "choose_" + easing);
    }
};

Window_ChooseEasing.prototype.isContinueEnabled = function() {
    return DataManager.isAnySavefileExists();
};