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.
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"}); });
<script> var math_data_simple = { "styles": [ ["top","#FFEFEF;#6E6EFF;center;'PT Sans', Tahoma;17px;"], ["subtop","#818181;#EAEAEA;center;'PT Sans', Tahoma;15px;;;bold;;;"], ["count","#818181;#EAEAEA;center;'PT Sans', Tahoma;15px;;;;;;"], ["calc-top","#818181;#EAEAEA;;'PT Sans', Tahoma;15px;;;bold;;;"], ["calc-other","#818181;#EAEAEA;;'PT Sans', Tahoma;15px;;;bold;;;"] ], "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>