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.

<ul id="westTree"data-bind="wijtree: {disabled: disabled, allowDrag: allowDrag, allowDrop:allowDrop,
    nodes: west, showCheckBoxes: showCheckBoxes, nodeCheckChanged: nodeCheckChangedWest }">
</ul>

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.

<div id="westCaro" data-bind="wijcarousel:{data:visNodesWest,showTimer:showTimer,
      display:display, auto:auto, interval:interval}" style="height:200px;"></div>

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.

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.

This got me to thinking, “What kind of data would I want to see easily?”

Coming for an engineering background, I used pretty much everything under the sun (graphing calculators, websites, different software) to interpret signals.  Probably the most useful tool of all was the oscilloscope.

In the simplest explanation, the oscilloscope is used to graph, manipulate, and measure an input signal.

For the purposes of this sample, I will keep the input signal simple and use the basic sine and cosine as functions of time:

y(t) = A * sin(2pi*f*t + φ) and y(t) = A * cos(2pi*f*t + φ)

where A = amplitude, f = frequency, and φ is the phase.

What do I want to see?

1.  A plot of the input function.
2. Individual point information on the plot.
3. Information about each point in grid form.
4. The formula for the input function.

What do I want to do?

1. Manipulate the input signal by changing the amplitude, frequency, and phase.
2. Perform the oscilloscope feature of shifting the input signal horizontally and vertically on the plot.
3. Scroll over the plot of the wave and see individual (x,y) coordinates.

Using Wijmo and Knockout, all of this becomes possible, and most importantly, completely live.

Let’s begin with the ViewModel:

Using knockout observables, I am able to have a single integer value for each variable that will change about the input function and the plot.

 var self = this;

// declare observables that make up the object model
self.chartType = ko.observable("cos");
self.amp = ko.observable(1);
self.freq = ko.observable(1);
self.phase = ko.observable(0);
self.adjVert = ko.observable(0);
self.adjHorz = ko.observable(0);

Using knockout computed values, I am able to write function to return a live updated string of the function formula.

 // formula for current equation
self.formula = ko.computed(function () {
    return "y(t) = " + self.amp() + " * " + self.chartType() + "(2 * pi * " + self.freq() + " * t + " + self.phase() + ")";
});

Also using knockout computed values, I am able to create an array of plot points based on the input function.  This list will be the common data for the chart and the grid, with no other manipulation necessary.

// compute data for both grid and list
self.list = ko.computed(function () {
   var arr = [];

   for (var x = -3; x<=3; x=x+.01){
    if (self.chartType() == "cos") {
       var y = self.amp() * Math.cos((6.28318 * self.freq() * x) +
               (self.phase() + self.adjHorz())) +
                self.adjVert();
       y = Math.round(10000 * y) / 10000;
   }
   else {
       var y = self.amp() * Math.sin((6.28318 * self.freq() * x) +
              (self.phase() + self.adjHorz())) +
              self.adjVert();
       y = Math.round(10000 * y) / 10000;
   }

   // push the computed point into the chart data
   x = Math.round(100*x)/100;
   var point = new DataPoint({ x: x, y: y });
   arr.push(point);
  }
return arr;
});

For the Model, I will create individual DataPoints using Knockout observables.

// datapoints that can be bound to both the chart and grid
function DataPoint(data) {
   this.x = ko.observable(data.x);
   this.y = ko.observable(data.y);
};

In the $(document).ready, I will bind the ViewModel, and set a few Wijmo decorators.

$(document).ready(function () {

   // create and bind the ViewModel
   var vm = new viewModel();
   ko.applyBindings(vm);

   // wijmo Decorators
   $(":input[type='text'],:input[type='password'],textarea").wijtextbox();
   $(":input[type='button']").button();
});

Inside of the body, I will use the Wijchart to plot the data, the Wijgrid to show each point, Wijsliders to manipulate the input function variable values and adjust the chart horizontally and vertically, and an HTML dropdown list to toggle sine/cosine for the input function.

The Chart

Notice the dataSource for the chart is bound to the list.  Inside of the SeriesList, I am able to bind the data to the X and Y values from the Model.  Inside of the hint, I can also bind the content according to the point hovered over:

 <div id="wijlinechart" data-bind="wijlinechart: {
	animation: {direction:'vertical'},
 	legend: {visible:false},
 	hint: {
		content: function() {
		 return 'X:' +
			this.x + '\nY:' + this.y;
		}
               },
	 showChartLabels: false,
         dataSource: list,
         seriesList: [{
		label: 'wave',
            	fitType: 'spline',
            	data: { x: { bind: 'x' }, y: { bind: 'y'} }
            	     }],
		axis: {
			 x: {
			      origin:0,
                              labels: { style: { rotation: -90 } },
			      annoMethod: 'valueLabels',
                              valueLabels: [-4,-3,-2,-1,0,1,2,3,4],
				           min: -3.14,
					   max: 3.14,
					   style: {'stroke-width': 2},
					   gridMajor: { visible: true},
			    },
			 y: {
                              max: 5,
			      min: -5,
		              autoMax: false,
			      autoMin: false,
			      style: {opacity: 1,'stroke-width': 6},
			      origin: 0,
                	    }
              	     }
	}"
      style="width:1000px;height:400px;"> </div>

The Grid

The Grid is also bound to the same list as the chart with no changes needed.

<table id ="wijgrid" data-bind="wijgrid: {
	allowPaging: true,
	pageSize: 10,
	data: list,
	ensureColumnPxWidth: true,
	columns: [
		    { dataType: 'number', dataFormatString: 'n2' },
		    { dataType: 'number', dataFormatString: 'n4' },
		]
	}"
 style="width:400px;"></table>

The Variable Sliders and Horizontal/Vertical Adjust

Each is set up the same.  The Value of the slider will be bound to its knockout observable.

<div id ="phase" data-bind="wijslider: {
        orientation: 'horizontal',
        min: 0,
        max: 5,
        step: 1,
        value:phase}",
        style="width:300px;"></div>

The Function

Using a simple heading, I can bind the text to the Knockout computed value.

<h2 data-bind="text: formula"></h2>

That’s all of the good stuff.  Now let’s take it for a spin!

You can start moving the sliders to change the input function.  Notice how the data in the formula, chart, and grid change instantly!

Using the Knockout MVVM library along with Wijmo, you are able to create useful and interactive way to view your data with a relatively small amount of code.

Wijmo with a Knockout backbone prevails again!

Complete code can be found here.

You can easily use Knockout with SpreadJS by following a few simple steps:
1. Add references to the latest jQuery dependencies, Wijmo widgets, Knockout .js file, and KO extension library for Wijmo.
2. Create the ViewModel and View: add JavaScript to define the data and behavior of the UI, and add markup to create the View—the visual, interactive UI.
3. Bind the SpreadJS widget to the ViewModel and activate KO.

Here is a sample of list-details mode UI for records editing, it will show you how to add references to the required files, create the ViewModel and View, and bind the SpreadJS widget. The first step is to create an .html page and add links to the dependencies to your project within the <head> tags. To do this, just link to the content delivery network (CDN) files:

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
<!-- Knockout -->
<script type="text/javascript" src="http://cdn.wijmo.com/external/knockout-2.1.0.js"></script>
<!-- SpreadJS CSS and script -->
<link href="http://cdn.wijmo.com/themes/cobalt/jquery-wijmo.css" rel="stylesheet" type="text/css" title="rocket-jqueryui" />
<link href="http://cdn.wijmo.com/spreadjs/gcfilter-ui.css" rel="stylesheet" title="metro-jqueryui" type="text/css" />
<link href="http://cdn.wijmo.com/themes/wijmo/jquery.wijmo.wijsuperpanel.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.full.min.js" type="text/javascript"></script>

Now a view model to define the sample data and behavior of the UI. Enter the following <script> within the <head> tags:

function Pet(name, sales, price) {
    this.name = ko.observable(name);
    this.sales = ko.observable(sales);
    this.price = ko.observable(price);
}

var initialData = [
    new Pet("Well-Travelled Kitten", 352, 75.95),
    new Pet("Speedy Coyote", 89, 190.00),
    new Pet("Furious Lizard", 152, 25.00),
    new Pet("Indifferent Monkey", 1, 99.95),
    new Pet("Brooding Dragon", 0, 6350),
    new Pet("Ingenious Tadpole", 3940, 0.35),
    new Pet("Optimistic Snail", 420, 1.50)];

var PagedGridModel = function (items) {
    this.activeIndex = ko.observable(0);
    this.items = ko.observableArray(items);
    this.activeItem = ko.observable(this.items()[this.activeIndex()]);
    this.addItem = function () {
        this.items.push(new Pet("New item", 0, 100));
    };
};

To create Textbox HTML elements and SpreadJS Widget, place the following markup within the body of the .html document.

    <div>
        <div>
            <h3>Knockout List-Detail Binding Sample</h3>
            <p>Name: <input type="text" data-bind="value: activeItem().name" /></p>
            <p>Sales: <input type="value" data-bind="value: activeItem().sales" /></p>
            <p>Price: <input type="value" data-bind="value: activeItem().price" /></p>
            <br />
            <div id="ss" data-bind="dataSource: items()" style="position:relative; width:640px; height:300px; border:1px solid grey"></div>
        </div>
    </div>

Now create SpreadJS instance and bind to the ViewModel and activate knockout.js by adding the following JavaScript within the <script> tags after the ViewModel script:

$("#ss").wijspread({ sheetCount: 1 });
var ss = $("#ss").wijspread("spread");
var vm = new PagedGridModel(initialData);
ko.applyBindings(vm);

In addition provide some data field wrapper, and binding initialize and value sync logic:

function name(item, value) {
    if (arguments.length == 2) {
        item["name"](value);
    } else {
        value = item["name"]();
        return value;
    }
}

function sales(item, value) {
    if (arguments.length == 2) {
        item["sales"](value);
    } else {
        value = item["sales"]();
        if (typeof (value) == "string" && value.length > 0) {
            value = parseInt(value);
        }
        return value;
    }
}

function price(item, value) {
    if (arguments.length == 2) {
        item["price"](value);
    } else {
        value = item["price"]();
        if (typeof (value) == "string" && value.length > 0) {
            value = parseFloat(value);
        }
        return value;
    }
}

ko.bindingHandlers.dataSource = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var ss = $("#" + element.id).wijspread("spread");
        ss.getActiveSheet().autoGenerateColumns = false;
        ss.getActiveSheet().setDataSource(valueAccessor());
        var cis = [
            { name: "name", value: name },
            { name: "sales", value: sales },
            { name: "price", formatter: "$#,##0.00", value: price }];
        ss.getActiveSheet().bindColumns(cis);

        var cc = ss.getActiveSheet().getColumnCount();
        for (var i = 0; i < cc; i++)
            ss.getActiveSheet().setColumnWidth(i, 160);
        ss.invalidateLayout();
        ss.repaint();
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var ss = $("#" + element.id).wijspread("spread");
        ss.repaint();
    }
};

When you open the page, it looks similar to the following image. Enter a new value in the TextBox and leave focus out. Notice the values in SpreadJS change to match the specified value, vice versa. Download the sample html page here.

Currently over 8,000 schools across the United States are using Centricity2. This revolutionary website management solution is geared towards a large group of users, allowing teachers and other educators to create their own online community. Schoolwires provides the platform environment which allows its users to engage with the community, distribute the workload, and even build their own application on top of the system. This solution takes the meaning of playing in the Sandbox to a whole new level.

The planning for Centricity2 began in 2008. At that time Schoolwires evaluated the .NET Framework and felt the “out-of-the-box” user interface controls were too dependent on the server side and needed a better client/presentation layer. Schoolwires’ development team began researching ways to move from .NET common controls to a lightweight AJAX solution paired with jQuery and looking for jQuery plugins and UI controls.

Schoolwires looked to the community to find a solution for their user interface needs. Using Quora—an online question and answer community—the solution they found was a collection of over 30 jQuery UI Widgets named Wijmo. ComponentOne, the parent company to Wijmo, is a leading provider of data and UI controls for Window, Web, and Mobile development that has built a solid reputation for reliability for over 20 years. Additionally, the support and community built around ComponentOne offered Schoolwires the level of stability they needed.

“I was really impressed with how the charts rendered identically in IE6 as they did in Chrome and Firefox.”

To ensure they did their due diligence, Schoolwires evaluated another vendor’s offering and found it to be heavy and too .NET centric. Wijmo offered the light footprint and more modern approach that Schoolwires was seeking.

“We were able to easily migrate our previously Flash dashboard to HTML5 and are now reaching more end users on more devices.”

Schoolwires has end users working with their software from many different devices and computers. The powerful dashboards in Centricity2 need to work in every browser and on any device. Previously they had used Flash charts to create their interactive dashboard, but with Flash being limited to desktops, it was no longer an option. Schoolwires turned to Wijmo charts to get rich, interactive features and still work on mobile devices and older browsers.

Jason Coudriet, Vice President of Product Design & Innovation at Schoolwires, stated, “I was really impressed with how the charts rendered identically in IE6 as they did in Chrome and Firefox.” He added, “We were able to easily migrate our previously Flash dashboard to HTML5 and are now reaching more end users on more devices.”

Over the next 6 months, Schoolwires completed their migration to Wijmo. The project was completed twice as quickly as they had expected. “The Wijmo widgets are so robust and offer capabilities beyond what we could cover with our bandwidth,” said Coudriet.

“The benefits were obvious quickly,” Coudriet added. Schoolwires realized an overall efficiency gain having one library and estimate they saved hundreds of hours given that Wijmo reduced the effort of building, maintaining and customizing, and the complexities involved in the system. In addition to the time savings, Schoolwires was able to agilely build and release market-needed enhancements.

Uffe was looking for a UI tool that would compliment the XSockets streaming API. He needed something in JavaScript that could respond to live changes in data as they happened in real-time from the server. Needless to say, he found Wijmo. Since then he and Magnus have built some of the coolest apps I have ever seen with Wijmo. Here are some of the amazing things they are doing with WebSockets and Wijmo.

XSockets.Net and Wijmo in a realtime voting webbapp

A short demo (built on xsockets.net and wijmo) showing a simple voting webbapp in realtime.

XSockets Wijmo Powershell CPU Load

A realtime CPU-monitor on xsockets and wijmo… With powershell as datasupplier.

Realtime voting by voice recognition with Kinect/XSockets/Wijmo

A realtime voice voting webapplication with kinect, xsockets and wijmo.
With just a few lines of extra code you can send your voice recognition over the web with websocket thanks to XSockets.net

jQueryMobile MVC3 XSockets & Wijmo

A Demo on a JQueryMobile Application built on Cornerstone T363 course. Uses MVC3, EF Code First, JQuery/JQueryMobile, XSockets and Wijmo

XSockets.NET Wijmo Carousel

Another demo with the amazing Wijmo. This time we extend the wijmo carousel to be realtime including HTML5 drag and drop for adding images in realtime.

About XSockets

XSockets is a .NET library for building real-time Web apps using WebSocket technology. Learn more about XSockets from their website:

Welcome to XSockets.NET – We give you a great possibility to build and test WebSockets on the Microsoft.NET plattform.

By just adding our free framework XSockets.NET to your WebbApp you can build realtime web-applications using powerfull WebSockets technology.

Start your Real Time Web Experience by using Sockets – In a few mintes you will be ready to develop next-gen of websites!

The biggest announcement to me was that we can now use HTML, JavaScript and CSS to build Windows applications. The new Metro-style or “immersive” apps are built using these technologies. As a Web Developer, I couldn’t be happier to hear that news.

So of course instead of going out drinking with my fellow GitHubbers last night, I went to the hotel room with John Ayers and started developing.

As you know, we have a JavaScript UI library called Wijmo. I wanted to get our Wijmo Charts rendering in a Metro UI application on Windows 8. So last night, I did. Here is how…

File -> New Project

JavaScript Project Templates in Visual Studio

Yesterday, when I saw a JavaScript category in the Visual Studio Project Templates I thought I was dreaming! We will be using the Navigation Application template.

Default Project Template

Default Project Template for Win8 App

And here is the awesomeness that loads into VS when the project opens. If you are a Web Developer this stuff could not be more familiar. So freaking simple: couple HTML, CSS and JavaScript files. That is it! No magic unicorns behind a curtain.

Adding Some Hot Sauce

I want to utilize our Wijmo Charts in a Windows 8 app so I need to bring in the scripts for it and it’s dependencies. Mainly we need jQuery, jQuery UI, Raphael and Wijmo. Now there is a lot of unnecessary code in these libraries that could be ripped out later. Lets just use these libraries as is since we know how to use them and know they are stable.

Adding Wijmo and jQuery files to Project

The files have to be packaged with the application so CDN is not usable in this scenario. Makes sense.

Adding Script References

In the project, open up default.html. It already has other scripts referenced for the Metro UI framework. Take a minute to check those out. It is really cool that the source files are included for the framework too. If you’re interested you can take a quick look under the hood. Just your standard JavaScript files so don’t be scared.

In default.html I add the following references:

<script src="/js/wijmo/external/jquery-1.6.2.min.js" type="text/javascript"></script>   
<script src="/js/wijmo/external/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>   
<script src="/js/wijmo/external/jquery.bgiframe-2.1.3-pre.js" type="text/javascript"></script>   
<script src="/js/wijmo/external/jquery.mousewheel.min.js" type="text/javascript"></script>   
<script src="/js/wijmo/external/jquery.glob.min.js" type="text/javascript"></script>   
<script src="/js/wijmo/external/raphael.js" type="text/javascript"></script>   
<script src="/js/wijmo/jquery.wijmo-open.1.4.1.min.js" type="text/javascript"></script>   
<script src="/js/wijmo/jquery.wijmo-complete.1.4.1.min.js" type="text/javascript"></script>

Start Programming

Now that we have the resources included in our app we can start programming the interface. Since this is a Navigation Application it loads separate files in as fragments into default.html. There is already a page in the project and wired up to load initially called homePage.html located in the html folder. We just need to add a div tag to use as our charting canvas. This will be initialized as a widget at runtime using JavaScript.

<div id="wijpiechart" class="">           
</div>

There is a JavaScript file that compliments the HTML file we are working on called homePage.js located in the js folder. It is essentially the “code behind” for the HTML page. Inside you will see that it has some initialization code. We will add ours to the .when() promise that is fired when the homePage.html is loaded. Here is what that code looks like. I will include the entire function to be more clear.

    function fragmentLoad(elements, options) {
        WinJS.UI.processAll(elements)
            .then(function () {
            // TODO: Initialize the fragment here.
            $("#wijpiechart").wijpiechart({
                height: 600,
                width: 1024,
                seriesList: [{
                    label: "c#",
                    data: 215517
                },
                {
                    label: "java",
                    data: 157301
                },
                {
                    label: "php",
                    data: 145929
                }],
                textStyle: { fill: "#ffffff", "font-family": "Segoe UI Semilight", "font-size": "20pt", stroke: "none" },
                chartLabelStyle: { fill: "#242122", "font-family": "Segoe UI Semilight", "font-size": "20pt", stroke: "none" },
                hint: {
                    contentStyle: { "font-family": "Segoe UI Semilight", "font-size": "24pt", stroke: "none" },
                    content: function () {
                        return this.data.label + " : " + $.format(this.value / this.total, "p2");
                    }
                },
                header: {
                    visible: false
                },
                legend: {visible:false},
                seriesStyles: [{
                    fill: "180-rgb(255,15,3)-rgb(212,10,0)", stroke: "#FFFFFF", "stroke-width": "2"
                }, {
                    fill: "90-rgb(255,102,0)-rgb(255,117,25)", stroke: "#FFFFFF", "stroke-width": "2"
                }, {
                    fill: "90-rgb(255,158,1)-rgb(255,177,53)", stroke: "#FFFFFF", "stroke-width": "2"
                }]
             });
        });
    }

I only put 3 slices in the seriesList to make this more concise. The data is also hard coded and not data bound. I will save that for a later post.

Fast & Fluid

That’s it. Hit F5 and you have an immersive Metro application that is fast and responsive and alive with activity (sorry, I couldn’t resist). Our interactive SVG chart render beautifully in the Metro app and it could not be easier to implement them. If you are a Web Developer like myself you can make a Windows 8 app.

Wijmo Charts in a Windows 8 Metro App

Fork It

I just pushed this source code to GitHub. Feel free to download it, fork it and have some fun! https://github.com/banzor/Wijmo-in-Windows-8

We sat down to interview Cam Worth of Red Tiki at South by Southwest Interactive. Cam has been using Wijmo to enhance CMS systems with Grids and Charts. He has a lot to say about his experience with using Wijmo. His company Red Tiki is at SXSW Interactive because they are finalists in the South by Southwest Interactive Web Awards!

Video

About Red Tiki

Red Tiki is a team of experienced design professionals working together for the love of the web and animation.

• Website: http://www.redtiki.com.au/
• Twitter: @RedTikiKing