Charts

JSS charts is a premium JSS extension to create interactive and dynamic charts based on any data available in your online spreadsheets. The plugin integrates JSS with the ChartJS engine and delivers amazing rich charts directly to your applications.

Author

Jspreadsheet Pro Team.

License

Available on the premium or enterprise plan.

Configuration

The following options are available to customize the plugin's behavior:
MethodDescription
width: Number Floating chart width. Default 400px
height: Number Floating chart height. Default 300px
top: Number Floating chart relative top position. Default 0px
left: Number Floating chart relative left position. Default 0px
zIndex: Number Floating chart zIndex. Default 3
chart: ChartJS Object Define the ChartJS object. For more information on this, please consult the official ChartJS page.


Example

Load the spreadsheet with some basic charts.




Source code


Using CDN
Using NPM
<html>
<script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.layout.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-pro/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/charts/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jspreadsheet/charts/dist/style.min.css" type="text/css" />

<div id="spreadsheet"></div>

<script>
// License for Formula Plugin
jspreadsheet.setLicense('NjY5ZDg2YmRmZTE3NzVlNTY4ZmE2NGZjOTRhMWNhOWM0ZmU1NTg1MmQ1NzUzYWYyYmE4ZTgyODdmMDMzMmM2NDQ3NjFkNjgyODE1ZTkzOWRhODFjNjViM2ZmNjc4NmFlMjdjZDI0OWE5YzY3M2YzNWFkZGU0NTg2ZTI5MTdlZjMsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTRNRGsxTVRFMU9Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0=');

// Set the extensions
jspreadsheet.setExtensions({ formula, charts });

// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    toolbar: true,
    worksheets: [{
        minDimensions: [8,8],
        data: [
            ['Test','',''],
            ['Jan','400','234'],
            ['Fev','300','431'],
            ['Mar','200','134'],
            ['Apr','321','513'],
        ],
        cells: {
            B1: {
                type:'chart',
                chart: {
                    type: 'bar',
                    data: {
                        labels: 'get(A2:A5)',
                        datasets: [{
                            label: 'get(A1)',
                            backgroundColor: ['#C1D37F'],
                            borderColor: '#000',
                            data: 'get(B2:B5)',
                        }]
                    },
                },
                left: 500,
                top: 60,
                zIndex: 4,
            },
            C1: {
                type:'chart',
                chart: {
                    type: 'line',
                    data: {
                        labels: 'get(A2:A5)',
                        datasets: [{
                            label: 'get(A1)',
                            backgroundColor: ['#000'],
                            borderColor: '#000',
                            data: 'get(C2:C5)',
                        }]
                    },
                },
                left: 480,
                top: 40,
            }
        }
    }],
});
</script>
</html>
// Jspreadsheet Pro
import jspreadsheet from 'jspreadsheet';

// Formula Premium Plugin
import formula from '@jspreadsheet/charts';

// License for Formula Plugin
jspreadsheet.setLicense('NjY5ZDg2YmRmZTE3NzVlNTY4ZmE2NGZjOTRhMWNhOWM0ZmU1NTg1MmQ1NzUzYWYyYmE4ZTgyODdmMDMzMmM2NDQ3NjFkNjgyODE1ZTkzOWRhODFjNjViM2ZmNjc4NmFlMjdjZDI0OWE5YzY3M2YzNWFkZGU0NTg2ZTI5MTdlZjMsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTRNRGsxTVRFMU9Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0=');

// Add-on for Jspreasheet
jspreadsheet.setExtensions({ charts });

// Create a spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [
        { minDimensions: [10, 10] },
        { minDimensions: [10, 10] },
    ]
});



Create applications with spreadsheet-like controls