Wijmo

How to Set Cell Styles in SpreadJS

eric peng — Mon, 20 May 2013 23:52:21 +0000

A Cell Style is a great way to make important data stand out on a sheet, SpreadJS provides styles to customize your text to give it the exact look you want. You can add a variety of styles and colors to your text, as well as borders or gridlines of cells.

Give your text a specific color and font style by using the font method of the Cell object. SpreadJS uses syntax of css font, same as the way to set font for other DOM elements.

sheet.addSpan(1, 1, 1, 5);
sheet.setValue(1, 1, "Sale Data Analysis");
sheet.getCell(1, 1).font("bold 16px arial");
sheet.getCell(1, 1).foreColor("white");
sheet.getCell(1, 1).backColor("Purple");.

Plus, give different color or line style borders to a range of cells by using the setBorder method of the Sheet object. It provides many options to easily determine which part of the cell range to set.

sheet.setBorder(new $.wijmo.wijspread.Range(1, 1, 6, 5), new $.wijmo.wijspread.LineBorder("Black", $.wijmo.wijspread.LineStyle.thin), { outline: true });
sheet.setBorder(new $.wijmo.wijspread.Range(1, 1, 6, 5), new $.wijmo.wijspread.LineBorder("Blue", $.wijmo.wijspread.LineStyle.dotted), { inside: true });
sheet.setBorder(new $.wijmo.wijspread.Range(5, 1, 1, 5), new $.wijmo.wijspread.LineBorder("Black", $.wijmo.wijspread.LineStyle.double), { bottom: true });

And you also can change the color of the gridline, even hide the gridline to make your data stand out on the sheet.

sheet.setGridlineOptions({showVerticalGridline: false, showHorizontalGridline: false});

You can try all of the above code in a web page which has initialized SpreadJS, to learn more about getting started with SpreadJS in a web page, please read Quick Start Guide to Using SpreadJS.

For more information about how to use SpreadJS, includes its data model and API, please read our online documentation or try online demos.

Wijmo 2013 v1 Webcast

Chris Bannon — Fri, 17 May 2013 17:40:24 +0000

Thanks to everyone that showed up for our webcast this week. It had record breaking attendance here at ComponentOne! If you missed it or want to share or watch it again, here is the recording.

Video

Join Sheela Nath and Chris Bannon as they unveil new technology from Team Wijmo. Wijmo 2013 v1 was a major release that added jQuery Mobile support, new widgets and a powerful spreadsheet component. We have been solidifying our framework and creating a platform for HTML5 development. Come take a tour through Wijmo 2013 v1.

Samples

These samples will be integrated into our download soon. But for now you can download them here.

You can also try out AppView and SpreadJS from our online demos. And don’t forget to download wijmo and start building great mobile applications.

Slides

How To Merge Cells in SpreadJS

eric peng — Thu, 16 May 2013 19:49:04 +0000

Merging is when you combine a range of cells to create a new, larger cell. This is a great way to create a label that spans several columns or several rows. You can easily create a cell span in the view port, row header, or column header area. For example, here cells A1, B1, and C1 were merged to create the label “Monthly Sales” to describe the information below. It is easy to do it with code:

sheet.addSpan(0, 0, 1, 3);
sheet.getCell(0, 0).hAlign($.wijmo.wijspread.HorizontalAlign.center)
sheet.setValue(0, 0, "Monthly Sales");
sheet.setValue(1, 0, "Jan");
sheet.setValue(1, 1, "Feb");
sheet.setValue(1, 2, "Mar");

And you can use the addSpan method to merge cells on the row header or the column header, by simply adding a SheetArea parameter.
sheet.addSpan(0, 0, 1, 3, $.wijmo.wijspread.SheetArea.colHeader);

Certainly, you can remove span from a merged cell by using the removeSpan method, this code removes the span for all merged cells in the sheet view port.

var spans = sheet.getSpans();
for(var i = 0; i < spans.length; i++) {
	sheet.removeSpan(spans.row,spans.col);
}

You can try all of the above code in a web page which has initialized SpreadJS, to learn more about getting started with SpreadJS in a web page, please read Quick Start Guide to Using SpreadJS.

For more information about how to use SpreadJS, includes its data model and API, please read our online documentation or try online demos.

Using Knockout with the WijCarousel

Chris Karkowsky — Wed, 15 May 2013 13:00:45 +0000

Recently added with the release 2013v1 of Wijmo was an addition to the Knockout library enabling two way bindable functionality for the Data of the WijCarousel. This is perfect for those who want to manage the content of their carousel on the fly.

In this example, I have decided to combine the checkbox functionality of the WijTree with the data of the WijCarousel.

I will treat each value within the Tree as a “node”, meaning that they will all have their own specific properties as defined within the Model…

function PictureNode(url, text)
{
        this.imageUrl = url,
        this.caption = text,
        this.text = text
}

The “imageUrl” and “caption” properties are both necessary to insert pictures with captions into the WijCarousel, while the “text” property is used within the WijTree.

In order to populate the nodes within the WijTree, I will create two ko.observableArray’s.

self.west = ko.observableArray([]);
self.east = ko.observableArray([]);

For each of the WijTree’s, I will set the “nodes” option to their specific array, as well as set several properties.

For each of the WijCarousel’s, I will also create two ko.observableArrays, and push some initial data into them.

self.visNodesWest = ko.observableArray([
     new PictureNode("http://wijmo.com/files/img/logos/Hawks.png", "Chicago Blackhawks")
]);
self.visNodesEast = ko.observableArray([
     new PictureNode("http://wijmo.com/files/img/logos/Pens.png", "Pittsburgh Penguins")
]);

I will then do the data-bind for the WijCarousel, by setting the “data” option to each array, as well as set several more options.

The WijTree has a built in function nodeCheckChanged, which will trigger anytime an option with in tree is checked or unchecked. I will trigger this function each time a change is made, and use Knockout to fill each array of the array’s bound to the Carousel.

self.nodeCheckChangedWest = function(e,data)
{
	self.visNodesWest.remove(function(item){return item.text != "Chicago Blackhawks"});
	var nodes = $(this).wijtree("getCheckedNodes");

	$.each(nodes, function(index, elem)
	{
        	var text = $(elem).wijtreenode('option', 'text');
        	var url = $(elem).wijtreenode('option', 'imageUrl');
		self.visNodesWest.push(new PictureNode(url,text));
	});
};

When running, you will notice that once the team name is checked, the image will be added/removed from the WijCarousel.

This is a great way to let Knockout do all the heavy lifting for you, as well as create a live interface for your end user.

Let’s go Pens!

Sample code can be found here.

How To Set Cell Value in SpreadJS

eric peng — Mon, 13 May 2013 18:57:01 +0000

SpreadJS provides many ways to assign value to cells, you can choose any one of options below to set value of cells.
1. setValue/setText method
Sheet object of SpreadJS has a method setValue, this method can be used to set value to any cell in viewport or headers by specific row and column index. The value can be any type of data like string, date time, boolean, number. In addition, the Sheet object has another method setText, you can use this method to set text to any cell in either viewport or header.

sheet.setValue(0,2,"ColumnHeader", $.wijmo.wijspread.SheetArea.colHeader);
sheet.setValue(2,0,"RowHeader", $.wijmo.wijspread.SheetArea.rowHeader);
sheet.setValue(2,2,"viewport", $.wijmo.wijspread.SheetArea.viewport);

2. Set value by Cell object
Sheet object has two methods getCell and getCells, you can use them to get a Cell object which indicates a specific cell, or a range of cells, and use value/text method of Cell object to set value to a cell or a range of cells.

sheet.getCell(0,0).text("cell");
sheet.getCells(1,1,3,3).value("range");

3. Binding to JSon array
You can create a JSON array, and bind it to Sheet object by using the setDataSource method.

var arr = [
{"Series0":2,"Series1":1},
{"Series0":4,"Series1":2},
{"Series0":3,"Series1":4}
];
sheet.setDataSource(arr);

4. Import CSV text
You can import a CSV text string into a range of cells by using the setCsv method of Sheet object.

var csv = "1,2,3;a,b,c";
sheet.setCsv(1,1,csv,";",",");

You can try all of the above code in a web page which has initialized SpreadJS, to learn more about getting started with SpreadJS in a web page, please read Quick Start Guide to Using SpreadJS.

For more information about how to use SpreadJS, includes its data model and API, please read our online documentation or try online demos.

Quick Start Guide to Using SpreadJS

eric peng — Thu, 09 May 2013 16:11:36 +0000

SpreadJS is JavaScript spreadsheet widget which is based on HTML5 and jQuery technology. It is very easy to use in a web page, and in this post I’ll show you how to initialize a SpreadJS widget in a web page in four simple steps.
Step 1. Create a standard html file

Step 2. Define SpreadJS host in the body section, give the host an id which will use to create and get the widget instance in JavaScript code. Then you can set some settings of the host like size, border via css styling.

Step 3. Add script files and css files reference in the head section, here it uses CDN, as for file names of Wijmo and SpreadJS, please go to our download page to get CDN links of the latest version.

Step 4. Add script to create an instance of SpreadJS after these references in the head section, and initialize SpreadJS by JavaScript code, merge cell, set value, style, formula to cells…

That’s it, then you can open the file in a browser, SpreadJS will be there.

For more information about how to use SpreadJS, its data model and API, please read our online documentation or try online demos.

Join the 2013 v1 Webcast

Chris Bannon — Tue, 07 May 2013 17:57:55 +0000

Please join Sheela Nath and myself for our Wijmo 2013 v1 Webcast.

Wednesday, May 15, 2013
2:00 PM – 3:00 PM EDT
Register for the webcast

About the Webcast

Join Sheela Nath and Chris Bannon as they unveil new technology from Team Wijmo. Wijmo 2013 v1 was a major release that added jQuery Mobile support, new widgets and a powerful spreadsheet component. We have been solidifying our framework and creating a platform for HTML5 development. Come take a tour through Wijmo 2013 v1.

How To: Change the Width of a Bar in Wijmo Bar Chart

Ashish Jindal — Thu, 02 May 2013 15:25:31 +0000

When there are multiple charts on a page having different number of bars in each, then, the width of bars vary in each chart. This is because the width of a bar is directly dependent on the number of datapoints(bars) in a dataseries. That means, if a barchart has 2 datapoints then the bars will be thicker as compared to the width of bars in a chart having 6 datapoints. The charts will look like:

This blogs explains how you can change the default width for each bar in wijmo barchart so that you can have bars with a consistent width in all the charts.

To start off, you can create a wijbarchart by setting few properties in jQuery and may refer to the online demo for this. In order to set width of each bar, we can access the bar using getBar method of the WijBarChart. Now, we can set the width of this bar to any custom value using its attributes. Please note, since we are changing the width, we also need to change its x position so that bar is displayed correctly.

The code given below would help you in achieving the same:

var seriesElements = $("#wijbarchart2").wijbarchart().data().fields.seriesEles;
//loop through the serieslist
$.each(seriesElements, function (index, series) {
   //custom value which we want to set
   var newWidth = 75;
   //loop through datapoints of each series
   $.each(series, function (counter, datapoint) {
      //get the bar object
      var barObj = $("#wijbarchart2").wijbarchart('getBar', counter);
      //calculate its centre
      var centre = barObj.attrs.x + barObj.attrs.width / 2;
      //calculate and set the new x-positon
      var newX = centre - newWidth / 2;
      barObj.attr('x', newX);
      //set the custom width
      barObj.attr('width', newWidth);
      barObj.width = newWidth;
      $("#wijbarchart2").find("rect:eq(" + counter + ")").attr("stroke-width", 0);
    });
 });

You may also checkout this sample implementing the same.

HowTo: Highlight a Datapoint Through Code in WijLineChart

Ashish Jindal — Thu, 02 May 2013 12:15:01 +0000

Generally, when we hover the mouse over a datapoint on the wijlinechart, it highlights the datapoint and shows its data value in a tooltip. But, one of our customers had a requirement : He had a Google map on the same page as the line chart and when the mouse hovered over the Google map, he wanted to highlight the corresponding value on the wijmo line chart. That means, we need to highlight the datapoint and show tooltip programmatically.

I thought this might help others as well and this blog demonstrates how you can highlight a specific datapoint through code in Wijmo LineChart.

To start with, you can take a look at this demo on how to use the wijlinechart . After that, you can a create an object of tooltip using canvas object of wijlinechart as given below :

var lineChart = $("#wijlinechart").data("wijlinechart");
//create tooltip object
var tooltip = lineChart.canvas.tooltip(null, {});

Here is the complete code which you can use to highlight the datapoint on a button click:

$("#btnHighlight").click(function () {

   //get the marker reference
   var lineMarker = $("#wijlinechart").wijlinechart('getLineMarkers', 0);

   lineMarker[index].transform("s1");
   //get the index of the datapoint to be highlighted
   index = $("#txtIndex").val();

   if (index < lineMarker.length) {
      //scale the specific marker
      lineMarker[index].transform("s2");

      //get the data to be displayed in tooltip
      var label = lineChart.options.seriesList[0].label;
      var x = lineChart.options.seriesList[0].data.x[index];
      var y = lineChart.options.seriesList[0].data.y[index];

      //set the properties of tooltip
      tooltip.setOptions({
         content: label + '\n' + "X :" + x + '\n' + "Y:" + y + '',
         style: { fill: "#000000", "stroke-width": "2", stroke: "#00a6dd" },
         animated: "fade", showAnimated: "fade", hideAnimated: "fade",
         hideDelay: 150, easing: "easeOutExpo",
         showEasing: "easeOutExpo", hideEasing: "easeOutExpo",
         compass: "north", offsetX: 0, offsetY: 0
      });

      tooltip.showAt({
         x: lineMarker[index].attrs.cx,
         y: lineMarker[index].attrs.cy
      });
   }
   else
      index = 0;
 });

You may download this sample with the complete implementation.

Wijmo 2013 v1 Releases Mobile Widgets and an HTML5 Spreadsheet Control

Eve Turzillo — Thu, 18 Apr 2013 18:25:06 +0000

A Collection of UI Widgets for Both Mobile and Web Development now with BreezeJS Support

PITTSBURGH, PA – April 18, 2013 - ComponentOne, a division of GrapeCity and a leader in developer-productivity tools, has announced the 2013 v1 release of Wijmo Enterprise: a kit of user interface (UI) widgets for HTML5 development. This release debuts a new addition to the kit, a high performance spreadsheet component for enterprise web application development.

“We have expanded our collection of over 40 widgets to include first-class mobile support,” said Chris Bannon, product manager at ComponentOne. “All of our widgets will automatically adapt to jQuery Mobile or jQuery UI environments given we have created the first and only Adaptive Widget Framework on the market with this release” said Bannon.

Initially released as a Beta version in February of 2013 and since moved into RTW (release to web), Wijmo Enterprise now models the company’s other products with a subscription-based plan. Bannon shared that, “Wijmo will feature three releases per year and any customer with a current subscription will be eligible for free upgrades.”

BreezeJS is quickly becoming the industry standard plug-in for providing data services to JavaScript applications and the 2013 v1 release of Wijmo integrates with these standards. This integration with BreezeJS keeps Wijmo lightweight and gives developers the flexibility to choose the frameworks they want to work in.

Building off the company’s 20 years’ experience with spreadsheet controls, ComponentOne has introduced SpreadJS, the new spreadsheet control which is now part of Wijmo Enterprise. This JavaScript-based widget uses HTML5 Canvas to render Excel-like spreadsheets. “SpreadJS brings additional data visualization and calculation features into your web applications,” said Bannon. “Now you can create calculators, dynamic interactive dashboards, rich colorful reports, and much more using SpreadJS.”

Availability The Company offers download and purchase options online at https://wijmo.com/purchase/ or by email at sales@wijmo.com.

Resources

Chris Bannon Blog post: http://wijmo.com/wijmo-2013v1-has-landed/

About Wijmo Wijmo provides a set of jQuery widgets for creating interactive websites and apps. Built on jQuery UI and jQuery Mobile guidelines and frameworks, each widget is fully themed and theme-able using Themeroller. Wijmo has everything you need including grids, charts, interactive widgets, and more. Visit http://wijmo.com. Follow @wijmo at http://twitter.com/wijmo and “Like” Wijmo on Facebook at http://www.facebook.com/Wijmo.