Chartjs extension for jspreadsheet
Examples on how to embed charts into jspreadsheet javascript tables. The information can be found on documentation page.
Line
Bars
Pie
Multiple bars
Radar
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://jspreadsheet.com/v7/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script> <script src='https://jspreadsheet.com/v7/plugins/charts.js'></script> <div id="spreadsheet1"></div> <script> jspreadsheet(document.getElementById('spreadsheet1'), { data: [ [ 'Line progression', 150, 50, 250, 300, 350, '=SPARKLINE({"data":B1:F1 })' ], ], columns: [ { type:'text', width: '200px,' }, { type:'number' }, { type:'number' }, { type:'number' }, { type:'number' }, { type:'number' }, { type:'text', width: '200px,' }, ], rows: { 0: { height:'100px'} }, license: 'YWI4MWQ3NThhYWVmNDc5YzFhNzFjOTM2NGU4YzZkZTliMGE1Y2E3Y2QzNzIzYWRmYmU0MDUxMWU3ZTYxNDRkZjBhNDg4YTMyNzA0NDhhZWUwYTQ3OWM3OTNiODk2NTNkNzI0Mzg2ZjBiNDM0Yzg3MzRiZmM2YjYwNTZmNmFkNWUsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOalE1T0RVNU15d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09', }); </script> </html>
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://jspreadsheet.com/v7/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script> <script src='https://jspreadsheet.com/v7/plugins/charts.js'></script> <div id="spreadsheet2"></div> <script> jspreadsheet(document.getElementById('spreadsheet2'), { data: [ [ 'Bar chart', 150, 50, 250, 300, 350, '=SPARKLINE({"data":B1:F1, "color":"blue"}, "bar")' ], ], columns: [ { type:'text', width: '200px,' }, { type:'number' }, { type:'number' }, { type:'number' }, { type:'number' }, { type:'number' }, { type:'text', width: '200px,' }, ], rows: { 0: { height:'100px'} }, license: 'YWI4MWQ3NThhYWVmNDc5YzFhNzFjOTM2NGU4YzZkZTliMGE1Y2E3Y2QzNzIzYWRmYmU0MDUxMWU3ZTYxNDRkZjBhNDg4YTMyNzA0NDhhZWUwYTQ3OWM3OTNiODk2NTNkNzI0Mzg2ZjBiNDM0Yzg3MzRiZmM2YjYwNTZmNmFkNWUsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOalE1T0RVNU15d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09', }); </script> </html>
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://jspreadsheet.com/v7/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script> <script src='https://jspreadsheet.com/v7/plugins/charts.js'></script> <div id="spreadsheet3"></div> <script> jspreadsheet(document.getElementById('spreadsheet3'), { data: [ [ 'Pie chart', 30, 50, 26, 150, 90, '=SPARKLINE(B5:M5, "pie")' ], ], columns: [ { type:'text', width: '200px,' }, { type:'number' }, { type:'number' }, { type:'number' }, { type:'number' }, { type:'number' }, { type:'text', width: '200px,' }, ], rows: { 0: { height:'100px'} }, license: 'YWI4MWQ3NThhYWVmNDc5YzFhNzFjOTM2NGU4YzZkZTliMGE1Y2E3Y2QzNzIzYWRmYmU0MDUxMWU3ZTYxNDRkZjBhNDg4YTMyNzA0NDhhZWUwYTQ3OWM3OTNiODk2NTNkNzI0Mzg2ZjBiNDM0Yzg3MzRiZmM2YjYwNTZmNmFkNWUsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOalE1T0RVNU15d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09', }); </script> </html>
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://jspreadsheet.com/v7/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script> <script src='https://jspreadsheet.com/v7/plugins/charts.js'></script> <div id="spreadsheet4"></div> <script> jspreadsheet(document.getElementById('spreadsheet4'), { data: [ [ '=CHART("bar", B3:M3, [{ "data":B4:M4, "label":A4 }, { "data":B5:M5, "label":A5 }, { "data":B6:M6, "label":A6 }], { "legend":TRUE ,"title":"Units sold 2016", "titleAxesX":"Month", "titleAxesY":A3 });', '', '', '', '', '', '', '', '', '', '', '', '' ], [ '', '', '', '', '', '', '', '', '', '', '', '', '' ], [ 'Products', 'Jan-16', 'Feb-16', 'Mar-16', 'Apr-16', 'May-16', 'Jun-16', 'Jul-16', 'Aug-16', 'Sep-16', 'Oct-16', 'Nov-16', 'Dec-16' ], [ 'Product1', 50, 52, 55, 575, 150, 225, 325, 450, 475, 500, 550, 550 ], [ 'Product2', 150, 100, 50, 90, 90, 150, 120, 175, 200, 250, 300, 300 ], [ 'Product3', 15, 20, 25, 30, 90, 100, 120, 120, 150, 180, 200, 200 ], ], mergeCells: { 'A1': [13,1], }, columns: [ { type:'text', width: '100px,', autoCasting:false }, ], rows: { 0: { height:'100px'} }, license: 'YWI4MWQ3NThhYWVmNDc5YzFhNzFjOTM2NGU4YzZkZTliMGE1Y2E3Y2QzNzIzYWRmYmU0MDUxMWU3ZTYxNDRkZjBhNDg4YTMyNzA0NDhhZWUwYTQ3OWM3OTNiODk2NTNkNzI0Mzg2ZjBiNDM0Yzg3MzRiZmM2YjYwNTZmNmFkNWUsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOalE1T0RVNU15d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09', }); </script> </html>
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://jspreadsheet.com/v7/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script> <script src='https://jspreadsheet.com/v7/plugins/charts.js'></script> <div id="spreadsheet5"></div> <script> jspreadsheet(document.getElementById('spreadsheet5'), { data: [ [ '=RADARCHART(A4:A6, {"data":B4:B6, "fill":TRUE, "color":"red"}, {"title":"Total units sold"})', '' ], [ 'Product1', 6775 ], [ 'Product2', 21250 ], [ 'Product3', 3650 ], ], mergeCells: { 'A1': [13,1], }, columns: [ { type:'text', width: '100px,', autoCasting:false }, ], rows: { 0: { height:'100px'} }, license: 'YWI4MWQ3NThhYWVmNDc5YzFhNzFjOTM2NGU4YzZkZTliMGE1Y2E3Y2QzNzIzYWRmYmU0MDUxMWU3ZTYxNDRkZjBhNDg4YTMyNzA0NDhhZWUwYTQ3OWM3OTNiODk2NTNkNzI0Mzg2ZjBiNDM0Yzg3MzRiZmM2YjYwNTZmNmFkNWUsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOalE1T0RVNU15d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09', }); </script> </html>