It's easy to get started with ApollonJs. All that's required is the CSS and JS files included in your page to render the data.
You can download the plugin from github and include the dist folder content.

Step One

After you download Apollon, move the dist folder (that contain apollon.min.css, rtl-apollon.min.css and apollon.min.js, fonts, lang, svg) to your root's application directorie. Next, load jQuery and include Apollon's CSS and JavaScript files inside of your tags:

<!-- The CSS Files in head --> 
<link rel="stylesheet" type="text/css" href="./dist/css/apollon.min.css" /> 

<!-- The langage JS Files if you use another langage than english --> 
<script type="text/javascript" src="./dist/lang/fr.js"> </script> 
<!-- The JS Files, jQuery.js is required --> 
<script type="text/javascript" src="./dist/js/apollon.min.js"> </script>

Step Two

You have to add an HTML code in your page, and the content will be replaced by the apollon data render.

<!-- The .apollon-block div is required --> 
<div id="apollon-block"><div id="datatest"></div></div>

Step Three

Once you have the element or context, you're ready to create your own Data analysis. You have to call the plugin by the following code:

<script>
var apollon;
$(document).ready(function() {
    apollon=$('#datatest').apollon({
        // Options
    });
});
</script>

The default Apollon strings are in English, but can easily be translated into another language, and you can add your own language by adding a js file in "dist/lang/" folder.
Ifyou do'nt select langage, it will be in English.

Langages list

The main data source used for a Apollon must always be an array (it is created automatically when using DOM sourced table). Each item in that array will define a row to be displayed and Apollon can use foor basic data types as the data source for the rows:

HTML

You can just use an HTML table to automatically get data from DOM, but you will lose lot of options like the special sort, and have to show all columns like ID:

<div class="table-responsive" id="apollon-block">
    <table class="table table-bordered" id="datatest">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>

So you have to call Apollon like the following code:

var apollon;
$(document).ready(function() {
    apollon=$('#datatest').apollon({
        datatype: 'html'
    });
});

Javascript

You can just use an HTML table to automatically get data from DOM, but you will lose lot of options like the special sort, and have to show all columns like ID:

var data_source=[
    {'#':1,'First Name':Mark,'Last Name':Otto,'Username':'@mdo','ID':1,'color':''}, 
    {'#':2,'First Name':Jacob,'Last Name':Thornton,'Username':'@fat','ID':2,'color':'danger'}, 
    {'#':3,'First Name':Larry,'Last Name':the Bird,'Username':'@twitter','ID':3,'color':''}
];

var apollon;
$(document).ready(function() {
    apollon=$('#datatest').apollon({
        datatype: 'js', 
        data: data_source, 
        columns: ['#', 'First Name', 'Last Name', 'Username']
    });
});

The ID, and color columns can be used but not shown on the data render.

AJAX

The best way to use Apollon is to get data from a PHP file to can use database and have realtime data:

var apollon;
$(document).ready(function() {
    apollon=$('#datatest').apollon({
        datatype: 'ajax', 
        ajaxurl : './ajax/data.php?time>3265987',
        data: {country:27}, 
        columns: ['#', 'First Name', 'Last Name', 'Username']
    });
});

You can add a not shown columns in this source like a js, and the PHP response have to be:

<?php 
$r = array('ok'=>1, 'data'=>array());
date_default_timezone_set('Africa/Algiers'); 

$r['data'] = array(
    array("#"=>1, "First Name"=>"Mark", "Last Name"=>"Otto", "Username"=>"@mdo", "ID"=>1, "color"=>""),
    array("#"=>2, "First Name"=>"Jacob", "Last Name"=>"Thornton", "Username"=>"@fat", "ID"=>2, "color"=>"danger"),
    array("#"=>3, "First Name"=>"Larry", "Last Name"=>"the Bird", "Username"=>"@twitter", "ID"=>3, "color"=>"")
);

echo json_encode($r);
?>

JSON

This source is like the AJAX one:

var apollon;
$(document).ready(function() {
    apollon=$('#datatest').apollon({
        datatype: 'json', 
        ajaxurl : './ajax/data.json',
        columns: ['#', 'First Name', 'Last Name', 'Username']
    });
});

You can add a not shown columns too in this source like a js, and the JSON file is:

{"ok":1,"data":[
    {'#':1,'First Name':Mark,'Last Name':Otto,'Username':'@mdo','ID':1,'color':''}, 
    {'#':2,'First Name':Jacob,'Last Name':Thornton,'Username':'@fat','ID':2,'color':'danger'}, 
    {'#':3,'First Name':Larry,'Last Name':the Bird,'Username':'@twitter','ID':3,'color':''}
]}

You have many ways to show your data:

Table

Show data in a table:

var apollon;
$(document).ready(function() {
    apollon=$('#datatest').apollon({
        showmode: 'table'
    });
});

The result is:

List

Show data in a list:

var apollon;
$(document).ready(function() {
    apollon=$('#datatest').apollon({
        showmode: 'list'
    });
});

The result is:

HTML

You can also use your customed HTML code to show data, so the "showmode" will be "html", but with an other option showcode, and like the following code, you have to replace the text wit [THE INDEX OF THE COLUMN], for example:

var html_code = '\
    <div class="col-sm-12 col-md-12 col-lg-4 col-xl-4">\
        <div class="card text-center card-img-top-1">\
            <img class="card-img-top w-100" src="./flags/[CODE].svg" alt="" width="242" height="161">\
            <div class="card-body"> \
                <h4 class="card-title mb-3">[NAME]</h4>\
                <p class="card-text">[CAPITAL] - [ALPHA_3] phone: +[PHONE]</p>\
                <a class="btn btn-primary btn-block" href="blog.html">[CONTINENT]</a>\
            </div>\
        </div>\
    </div>\
';

var apollon;
$(document).ready(function() {
    apollon=$('#datatest').apollon({
        showmode: 'html', 
        showcode: html_code, 
    });
});

The result is:

The function to call when the Apollon content be loaded:

{
    callback: function(){
        // Your code here, for example:
        alert('Apollon is ready');
    }
}

But for the AJAX and JSON data sources, the function will be called after the server response, so you have to use the following one:

{
    callbackAjax: function(){
        // Your code here, for example:
        alert('Apollon is ready, content loaded');
    }
}

The Apollon plugin use some external plugins, that you have to include to be used, otherwise the option in the menu will be automatically hidden.

Flot Charts

Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, Apollon use it to let the use get graphs from the data, so you have to include:

<script type="text/javascript" src="./demo/flot/jquery.flot.min.js"></script>

Table export

Table export is a JavaScript library for jQuery, Apollon use it to let the use export data to CSV, XML, SQL, Excell.
You must include:

<script type="text/javascript" src="./demo/Export-table/tableExport.min.js"></script>

PDF Export

If you need to add PDF export to your Apollon, you have to add jsPDF and jsPDF-AutoTable, so the JS files to include are:

<script type="text/javascript" src="./demo/Export-table/jsPDF/jspdf.min.js"></script>
<script type="text/javascript" src="./demo/Export-table/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>