ChartJS
Integrating charts in your online spreadsheets.
Source code
<html> <script src="https://jspreadsheet.com/v7/jspreadsheet.js"></script> <script src="https://jsuites.net/v5/jsuites.js"></script> <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" /> <link rel="stylesheet" href="https://jspreadsheet.com/v7/jspreadsheet.css" type="text/css" /> <script src="https://jspreadsheet.com/v7/plugins/charts.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script> <div id="spreadsheet"></div> <script> jspreadsheet(document.getElementById('spreadsheet'), { csv: '/jspreadsheet/sales.csv', csvHeaders: false, columns: [ { width:'150px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'100px' }, ], mergeCells: { B1: [3, 1], E1: [10, 1] }, rows: { 0: { height:'300px' } }, style: { A1: 'background-color: #e0eaff', N1: '', // Row 3 A3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', B3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', C3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', D3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', E3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', F3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', G3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', H3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', I3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', J3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', K3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', L3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', M3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', N3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;background-color: #e0eaff', // Row 4 A4: 'border-bottom:1px solid black;font-size:0.8em;', B4: 'border-bottom:1px solid black;font-size:0.8em;', C4: 'border-bottom:1px solid black;font-size:0.8em;', D4: 'border-bottom:1px solid black;font-size:0.8em;', E4: 'border-bottom:1px solid black;font-size:0.8em;', F4: 'border-bottom:1px solid black;font-size:0.8em;', G4: 'border-bottom:1px solid black;font-size:0.8em;', H4: 'border-bottom:1px solid black;font-size:0.8em;', I4: 'border-bottom:1px solid black;font-size:0.8em;', J4: 'border-bottom:1px solid black;font-size:0.8em;', K4: 'border-bottom:1px solid black;font-size:0.8em;', L4: 'border-bottom:1px solid black;font-size:0.8em;', M4: 'border-bottom:1px solid black;font-size:0.8em;', N4: 'border-bottom:1px solid black;font-size:0.8em;background-color: #e0eaff', // Row 5 A5: 'border-bottom:1px solid black;font-size:0.8em;', B5: 'border-bottom:1px solid black;font-size:0.8em;', C5: 'border-bottom:1px solid black;font-size:0.8em;', D5: 'border-bottom:1px solid black;font-size:0.8em;', E5: 'border-bottom:1px solid black;font-size:0.8em;', F5: 'border-bottom:1px solid black;font-size:0.8em;', G5: 'border-bottom:1px solid black;font-size:0.8em;', H5: 'border-bottom:1px solid black;font-size:0.8em;', I5: 'border-bottom:1px solid black;font-size:0.8em;', J5: 'border-bottom:1px solid black;font-size:0.8em;', K5: 'border-bottom:1px solid black;font-size:0.8em;', L5: 'border-bottom:1px solid black;font-size:0.8em;', M5: 'border-bottom:1px solid black;font-size:0.8em;', N5: 'border-bottom:1px solid black;font-size:0.8em;background-color: #e0eaff', // Row 6 A6: 'border-bottom:1px solid black;font-size:0.8em;', B6: 'border-bottom:1px solid black;font-size:0.8em;', C6: 'border-bottom:1px solid black;font-size:0.8em;', D6: 'border-bottom:1px solid black;font-size:0.8em;', E6: 'border-bottom:1px solid black;font-size:0.8em;', F6: 'border-bottom:1px solid black;font-size:0.8em;', G6: 'border-bottom:1px solid black;font-size:0.8em;', H6: 'border-bottom:1px solid black;font-size:0.8em;', I6: 'border-bottom:1px solid black;font-size:0.8em;', J6: 'border-bottom:1px solid black;font-size:0.8em;', K6: 'border-bottom:1px solid black;font-size:0.8em;', L6: 'border-bottom:1px solid black;font-size:0.8em;', M6: 'border-bottom:1px solid black;font-size:0.8em;', N6: 'border-bottom:1px solid black;font-size:0.8em;background-color: #e0eaff', }, license: 'ZjM2YmE1NDA4OTJmZTRmYmE0NTVhOGY2YmQzMWQ0ZjMwMmQ1YzlkMjk3MDM1MTk2MGJhYWY3ODI3ZTYxNDUxYmZjYzBkZjRmOGEyMTE4NTQ1ODc4Y2JhMzMzNGRkZjE3MTM4M2ZjZGY5OGY3NjZkN2UyNmEzNzdkY2U2ZDBlOWIsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczT0RRM09Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09', }); </script> </html>
More examples and documentation
To learn much more about chartjs extensions for Jspreadsheet: