A Month sparkline can be a useful way to show data trends, such as finding the day with the highest call volume in the month. You can use the Month sparkline in Spread.Sheets to quickly find days with the highest values. The Month sparkline displays days horizontally and week numbers vertically. For example: 
Month Sparkline Diagram The following example shows call volume for the month. This makes it easy to spot the days with the highest call volume (Monday). 
Month Sparkline Creating a Month sparkline is simple. Use the following steps:
Add a column of dates and a column of values. You can set the width and height to make the sparkline easier to see.
activeSheet.getRange(0, -1, 1, -1, GC.Spread.Sheets.SheetArea.viewport).height(120); activeSheet.getRange(-1, 0, -1, 1).width(150); for (var rowIndex = 1; rowIndex <= 31; rowIndex++) { activeSheet.setValue(rowIndex, 0, new Date(2017, 0, rowIndex)); } activeSheet.setValue(1,1,10, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(2,1,98, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(3,1,37, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(4,1,50, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(5,1,75, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(6,1,25, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(7,1,25, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(8,1,30, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(9,1,22, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(10,1,82, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(11,1,89, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(12,1,43, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(13,1,15, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(14,1,12, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(15,1,15, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(16,1,54, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(17,1,77, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(18,1,39, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(19,1,20, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(20,1,65, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(21,1,20, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(22,1,20, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(23,1,20, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(24,1,18, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(25,1,20, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(26,1,42, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(27,1,21, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(28,1,20, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(29,1,9, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(30,1,99, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setValue(31,1,59, GC.Spread.Sheets.SheetArea.viewport);Use the setFormula method to add the Month sparkline. Specify the year, month, cell range, and sparkline colors.
activeSheet.setFormula(0, 0, '=MONTHSPARKLINE(2017,1,A2:B32,"lightyellow","lightgreen","green","tomato")'); spread.resumePaint();
That is all the code you need to create a Month sparkline. Here is the complete code example:
<!DOCTYPE html>
<html>
<head>
<title>SpreadSheets</title>
<link href="./css/gc.spread.sheets.9.40.20153.0.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./scripts/gc.spread.sheets.all.9.40.20153.0.min.js"></script>
<script src="http://code.jquery.com/jquery-2.0.2.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function(){
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
var activeSheet = spread.getActiveSheet();
activeSheet.getRange(0, -1, 1, -1, GC.Spread.Sheets.SheetArea.viewport).height(120);
activeSheet.getRange(-1, 0, -1, 1).width(150);
for (var rowIndex = 1; rowIndex <= 31; rowIndex++) {
activeSheet.setValue(rowIndex, 0, new Date(2017, 0, rowIndex));
}
activeSheet.setValue(1,1,10, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(2,1,98, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(3,1,37, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(4,1,50, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(5,1,75, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(6,1,25, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(7,1,25, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(8,1,30, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(9,1,22, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(10,1,82, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(11,1,89, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(12,1,43, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(13,1,15, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(14,1,12, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(15,1,15, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(16,1,54, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(17,1,77, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(18,1,39, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(19,1,20, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(20,1,65, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(21,1,20, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(22,1,20, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(23,1,20, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(24,1,18, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(25,1,20, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(26,1,42, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(27,1,21, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(28,1,20, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(29,1,9, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(30,1,99, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(31,1,59, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setFormula(0, 0, '=MONTHSPARKLINE(2017,1,A2:B32,"lightyellow","lightgreen","green","tomato")');
spread.resumePaint();
}
</script>
</head>
<body>
<div id="ss" style="height: 350px; width: 600px"></div>
</body>
</html>
MESCIUS inc.