Adding Sparklines, JavaScript Programming Example of Adding Sparklines in SpreadSheet

JavaScript Programming Example of Adding Sparklines in SpreadSheet

Have a look at the programming example of how to add a small chart or a sparkline into a cell in SpreadSheet. You will be able to see tendencies of data values changing in a range of cells. Take into account that you can download this piece of code for free. Don't miss the chance to use the coding samples by Webix for your web development projects.

JS Code

webix.ready(function(){
  webix.ui({
    view:"spreadsheet",
    id: "ssheet",
    toolbar: "full",
    data: math_data_simple
  });

  $$("ssheet").addSparkline(2,8,{range: "B2:E2", type: "line"});
  $$("ssheet").addSparkline(3,8,{range: "B3:E3", type: "line"});
  $$("ssheet").addSparkline(4,8,{range: "B4:E4", type: "line"});
});

HTML Code

<script>
  var math_data_simple = {
  "styles": [    
	["top","#FFEFEF;#6E6EFF;center;'PT Sans', Tahoma;17px;"],						
	["subtop","#818181;#EAEAEA;center;'PT Sans', Tahoma;15px;;;bold;top;;"],
	["count","#818181;#EAEAEA;center;'PT Sans', Tahoma;15px;;;;top;;"],
	["calc-top","#818181;#EAEAEA;;'PT Sans', Tahoma;15px;;;bold;top;;"],
	["calc-other","#818181;#EAEAEA;;'PT Sans', Tahoma;15px;;;bold;middle;;"]
  ],  
  "data": [   
	[1, 1, "Countries:", "subtop"],
		[2, 1, "France", "count"],
		[3, 1, "Poland", "count"],
		[4, 1, "China", "count"],
	[1, 2, "April", "count"],
		[2, 2, 1366],
		[3, 2, 684],
		[4, 2, 8142],						
	[1, 3, "May", "count"],
		[2, 3, 842],
		[3, 3, 781],
		[4, 3, 7813],					
	[1, 4, "June", "count"],
		[2, 4, 903],
		[3, 4, 549],
		[4, 4, 7754],						
	[1, 5, "July", "count"],
		[2, 5, 806],
		[3, 5, 978],
		[4, 5, 8199],						
	[1, 6, "Total:", "calc-top"],
		[2, 6, "=SUM(B2:E2)"],
		[3, 6, "=SUM(B3:E3)"],
		[4, 6, "=SUM(B4:E4)"],	
	[1, 7, "Std Deviation:", "calc-top"],
		[2, 7, "=STDEVP(B2:E2)"],
		[3, 7, "=STDEVP(B3:E3)"],
		[4, 7, "=STDEVP(B4:E4)"]
  ],
  "sizes":[
	[0, 7, 130],						
	[0, 8, 200]
  ]
};
</script>