Wijmo Charts Chart Control for Windows 8

With the release of Windows 8 Developer Preview and Visual Studio 11 Preview, attention to Metro-style has gradually increased. The biggest change is that we can use HTML, JavaScript, and CSS to develop Windows applications. This should be the benefit of all Web developers.

As we all know, Wijmo is a JavaScript UI class library. I'm trying to put it in Windows 8. Specifically, I tried to use Wijmo's Charts to implement a Metro UI application under Windows 8. So I started with the following steps:

File-> New Project

Figure 1: JavaScript Project Templates in Visual Studio

I was very excited when I saw JavaScript classification in Visual Studio Project Template. I used the Navigation Application.

 

Default Project Template

Figure 2: Default Project Template for Win8 App

When I open a project, these are automatically loaded by. If you are a Web Developer like me, you must be familiar with these things, such as HTML, CSS, and JavaScript files.

 

Add Wijmo Charts

I need to use the Wijmo Charts chart control, so I need to add necessary references. Mainly jQuery, jQuery UI, Raphael and Wijmo. In this way, a lot of unnecessary code will be added, and we will remove them later. Now we only consider how to use it and whether it is stable.

Figure 3: add the Wijmo and jQuery files to the Project

Note that these files must be packaged into applications, so CDN is unavailable.

 

Add Script Reference

Open default.html in the project, and you will find that VS has added some scripts files from the Metro UI Framework. It took some time to check these files, all of which were already in the framework. If you are interested, you can take a closer look at the standard JavaScript files.

 

The reference file in default.html is as follows:

<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>

Copy code

Start implementation

Write code now. Because this is a Navigation application, he will load the independent files to default.html. The project already contains a page that will be called during initialization. He is named homepage.html in the “html#folder. On this page, we only need to use the price div for the render Wijmo Charts chart control. This will be loaded as a widget during initialization.

<Div id = "wijpiechart" class = "">
</Div> There Is A homepage.js file in the JS folder for the homepage.html file that we are working on. In fact, this is equivalent to the "code behind" of the HTML page ". The js file contains some initialization code. We need to add our code to. when (), which can be called when the homepage.html file is loaded. The code for the entire function is as follows. Function fragmentLoad (elements, options ){

WinJS. UI. processAll (elements)

. Then (function (){

// TODO: Initialize the fragment here.

$ ("# Wijpiechart"). wijpiechart ({

Height: 600,

Width: 1024,

SeriesList :[{

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"

}]

});

});

}

Copy code

I only added three pieces of data to the seriesList. The data is also hard code and is not bound to the data source. This is just to make it easier to see the effect.

 

Press F5, you know! A Metro app immediately appears (Hold it !) A beautiful SVG Chart (vector Chart) appears. If you are a Web programmer like me, now you have created a Windows 8 app.

 

 

Reference resources

Source code download: http://www.bkjia.com/uploadfile/2012/0105/20120105022654118.zip
 

From the grape city control technical team blog