Using Charts in SpreadJS V9

Using Custom Floating Objects in SpreadJS can be useful to display large graphs inside of the widget. However, large amounts of data can be hard to display in the widget with the graph. In this blog, I will describe the steps for creating a D3-based chart using data from a SpreadJS widget used a fixed-position div element. This is an updated version of the V8 blog here: http://sphelp.grapecity.com/2015/09/14/using-charts-in-spreadjs/ To download the sample used in this blog, click here: SpreadJS Charts V9 To start off, sample data is needed to display in the chart. In this example, I loaded the data from a Spread-formatted JSON file into the SpreadJS widget:

$(document).ready(function () {  
    var spread = new GcSpread.Sheets.Spread($(“#ss”).get(0));  
    spread.fromJSON(data);  
    activeSheet = spread.getSheet(1);  
    var rowNum = 366;  
    var colNum =   
}

The data in this example is a series of Max Temperatures, Minimum Temperatures, and Precipitation levels over the course of a year. A line graph best fits this data, so create a C3 line chart with the “x” data being the “Month” column in the JSON and the other series being the individual lines:

chart = c3.generate({  
    bindto: ‘#chart’,  
    data: {  
        type: ‘line’,  
        x: ‘Month’,  
        rows: activeSheet.getArray(0, 0, rowNum, colNum),  
    },  
    axis: {  
        x: {  
            type: ‘timeseries’  
        }  
    }  
});

The c3.generate code is bound to whatever div has the ID of “chart”, which is the reason for the “bindto: ‘#chart’” attribute. When the page is loaded, this will generate the chart with the lines corresponding to the specified columns in the sheet. To ensure that the graph is updated when the values in those columns change, then put the same code from above in the ValueChanged event on the sheet:

activeSheet.bind(GcSpread.Sheets.Events.ValueChanged, function (sender, args) {  (code above goes here) }

To keep the chart in the same position in the Spread widget (regardless of scrolling), a custom floating object can’t be used to contain the graph. Instead, a div element with an absolute position can be placed on top of the Spread, to give the illusion that it is inside of it. To do this, create a parent div on the page to contain both the Spread and the graph with a “relative” position attribute:

Place the SpreadJS widget and a DIV element with the ID of “Chart” inside of that parent DIV element with “absolute” position attributes:

<div style=”position:relative; width:1200px; height:550px;”>  
    <div id=”ss” style=”position:absolute; left:0; top:0; width:1200px; height:550px; border:1px solid gray”></div>  
    <div id=”chart” style=”position:absolute; left:450px; top:50px; width:700px; height:425px; background:white; border:1px solid gray”></div>  
</div>  

The outcome of these settings is that the chart is on top of the Spread widget, but appears to be inside of it. However, it is not affected by scrolling in the widget, so large amounts of data can scrolled through while also showing the graph. More information on using C3 can be found here: http://c3js.org/gettingstarted.html. The HTML page with SpreadJS and a C3 chart.