Large collection of Free Microsoft eBooks

Large collection of Free Microsoft eBooks for you, including: SharePoint, Visual Studio, Windows Phone, Windows 8, Office 365, Office 2010, SQL Server 2012, Azure, and more.

            

Eric Ligman

Microsoft

MSFT, Partner

103,428 Points334

Recent Achievements

Blog Commentator IIIBlog Commentator IIBlogs All-Star

View Profile

27 Jul 2012 10:27 AM

Throughout the year I try to share resources and information with you that I think will be helpful for you. Often times these resources will include links to free eBooks that we make available on a variety of topics. Today, I thought I would post a large collection of eBooks for you here so that you can find them in one place and consume them as you see fit. Also, if you find this list helpful, please share it with your peers and colleagues so that they too can benefit from these resources.


Access the whole list of these free books HERE.

A Comparison of Canvas and SVG

By Patrick_Dengler | 26 Oct 2011
This article is an extract of the original one from The Code Project. These articles are intended to provide you with information on products and services that we consider useful and of value to developers.

Canvas and SVG are two exciting graphics features introduced in Internet Explorer 9 and are hardware accelerated. These technologies can be used to address a range of graphic scenarios on the modern Web.

The following is a high-level summary of Canvas and SVG meant to frame a discussion of when to use one particular vector graphic technology over the other.

A Comparison of Canvas and SVG
Canvas	SVG
Pixel-based (canvas is essentially an image element with a drawing API)	Object Model-based (SVG elements are similar to HTML elements)
Single HTML element similar <IMG>  to in behavior	Multiple graphical elements which become part of the Document Object Model (DOM)
Visual presentation created and modified programmatically through script	Visual presentation created with markup and modified by CSS or programmatically through script
Event model/user interaction is coarse—at the canvas element only; interactions must be manually programmed from mouse coordinates	Event model/user interaction is object-based at the level of primitive graphic elements—lines, rectangles, paths
API does not support accessibility; markup-based techniques must be used in addition to canvas	SVG markup and object model directly supports accessibility

SVG is known as a retained mode graphics model persisting in an in-memory model. Analogous to HTML, SVG builds an object model of elements, attributes, and styles. When the Canvas is a bitmap with an immediate mode graphics application programming interface (API) for drawing on it. Canvas is a “fire and forget” model that renders its graphics directly to its bitmap and then subsequently has no sense of the shapes that were drawn; only the resulting bitmap stays around.

One way to think of these is that Canvas resembles the Windows GDI API, where you programmatically draw graphics to a window, and SVG resembles HTML markup with elements, styles, events, and DOM-based programmability. Canvas is procedural whereas SVG is declarative.


Example of code using CANVAS:


function GreenScreenAtoB(a, b) {
   var aImageData = a.getImageData(0, 0, a.canvas.width, a.canvas.height);
   var bImageData = b.getImageData(0, 0, b.canvas.width, b.canvas.height);
   var aPixels = aImageData.data;
   var bPixels = bImageData.data;

if (aPixels.length != bPixels.length) {
window.alert("Canvases do not have the same number of pixels");
return bImageData;
}

var pixelCount = bPixels.length;
for (var pixelIndex = 0; pixelIndex < pixelcount; pixelIndex += 4) {
// grab the RGBA components of each pixel in b
var r = bPixels[pixelIndex + 0];
var g = bPixels[pixelIndex + 1];
var b = bPixels[pixelIndex + 2];
var a = bPixels[pixelIndex + 3];

// if the b pixel is green, replace it with a pixel from a
if (r == 0 && g == 255 && b == 0 && a == 255) {
bPixels[pixelIndex + 0] = aPixels[pixelIndex + 0];
bPixels[pixelIndex + 1] = aPixels[pixelIndex + 1];
bPixels[pixelIndex + 2] = aPixels[pixelIndex + 2];
bPixels[pixelIndex + 3] = aPixels[pixelIndex + 3];
}
}

return bImageData;
}

READ MORE HERE >>>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

EJS Charts parameters

EJS Chart may be a solution, if you need a JavaScript charting to put it on your web application. It means that you don't need to install any plugin, like Adobe Flash Player; you just need to enable the JS scripts for your browser.

This particular library is a little obsolete, it seems that the last touch was in 2009 -- so I wouldn't recommend it, if you start a brand new application. But for the older ones, which are already using it, I have some tips:

Configuration of the chart (create, choose settings, formatters etc) is done strictly in JavaScript. So if you use the GWT, you need to write your JSI native wrappers, like I did :)

Data  can be passed to the chart in 3 formats:

• JSON objects
• XML format
• CSV format

JSON and XML are pretty simple and easy to understand, but the CSV documentation is poor. So, if you need for example to format your balloon tips (tooltip) you have access to some variables, which are defined in the data structure, like it's shown below.

CSV formats are the following (where the separators are | and , with these meaning: | for the separating the attributes for one point, and comma for separating the points):

• Pie:                      x | label

Example: 12|point 1|,13|point2 will define the slices (12, point 1) and (13, point 2).

• Bar vertical:       x | y | label

Example: point 1|12|label1,point2|13|label2 will define the bars (12, point 1, label 1) and (13, point 2, label 2).

• Bar horizontal:       x | y | label    

Example: 12|point 1|label1,13|point2|label2  will define the bars (12, point 1, label 1) and (13, point 2, label 2).

• Line:                     x | y | label

Example: x_val1|y_val1|label1,x_val2|y_val2|label2 will define the points (x1, y1, label1) and (x2, y2, label2).

Note that the string values which are components of the CSV data must be sure that are escaped, in order to don't break the parsing of it.  Also, there is something called "userdata", if you need to configure some URL links, to follow when you click on a slice, bar or line point. I haven't use it, so I'm not talking about it.

Escaping the separator characters is done like this:

,  =  & # 44 ;

| =  & # 124 ;

Also the labels support simple HTML tags, like &lt;label>, &lt;br/>, &lt;b>, &lt;u>, &lt;i>.

So, if you need custom tooltips, then use the "label" variable, which can be passed through attribute hint_string for the bar and line, but not for the pie (perhaps because of some bug, whatever you put here it's ignored).

Anyways, In pie case there is a workaround, you have to define the function onShowHint(), like this:

var chart = new EJSC.Chart (...);

...

chart.onShowHint = function() {

    return '<label>[parent_title]</label><br/>[series_title]: [x]<br/>[label] ([percent]%) ';

};

For the other chart types (bar and line) you can do it like below, set the hint_string in the definition of the series:

    hint_string='[label] ([percent]%)'

The known variables are, which can be used in formatting the tooltips:

• pie: [x], [label], [percent], [total], [series_title], [parent_title], [min], [max]
• bar: [x], [y], [label], [percent], [total], [series_title], [parent_title], [min], [max], [xaxis], [yaxis]
• line: [x], [y], [label], [percent], [total], [series_title], [parent_title], [min], [max], [xaxis], [yaxis]

So, having said these, I hope you are better informed about EJS Charts!

Happy charting!