Fixing jqPlot chart to toggle (show and hide) slices in Pie charts.

I found a question on stackoverflow where one guy found out that the enhancedLegendRenderer plugin didn’t work with jqPlot Pie Charts. He also posted a jsFiddle example where you can show/hide lines in the Line chart by clicking on legend items, but it doesn’t work with the Pie chart. I decided to investigate why it happens.

By looking at jqPlot source code I found out that the EnhancedLegendRenderer generates items 1:1 to chart series.

    if (idx < series.length) {
        s = series[idx];

Let’s look at the example. The Line chart with 6 lines has 6 series (series.length = 6).

data.push([[1,1.0] , [2,6.0] , [3,9.0] , [4,8.0]]); // #1
data.push([[1,4.0] , [2,3.0] , [3,1.0] , [4,2.0]]); // #2
data.push([[1,6.0] , [2,2.0] , [3,4.0] , [4,1.0]]); // #3
data.push([[1,1.0] , [2,2.0] , [3,3.0] , [4,4.0]]); // #4
data.push([[1,4.0] , [2,3.0] , [3,2.0] , [4,1.0]]); // #5
data.push([[1,8.0] , [2,2.0] , [3,6.0] , [4,3.0]]); // #6

But the Pie chart has only 1 series (series.length = 1).

[['Sony',7], ['Samsung',13.3], ['LG',14.7], ['Vizio',5.2], ['Insignia', 1.2]]; // #1

The EnhancedLegendRenderer would generate only 1 item for the Pie chart. This wouldn’t look good,and jqPlot automatically disabled EnhancedLegendRenderer and applied PieLegendRenderer instead which doesn’t have much functionality.

I rewrote this renderer for Pie charts and called it EnhancedPieLegendRenderer. Here is the final result:

jqplot pie chart with enhanced legend

The link to fixed *.js files will be posted at the end of this article.
Read more of this post

Windows 8 calendar control

As far as I see, lot of people search how to add the calendar or datepicker control to their windows 8 applications. Though there is a control which is called WinJS.UI.DatePicker, it is actually not a date picker, it is just 3 comboboxes in one row. But because of the fact that Windows Store apps can be written by using HTML, CSS and Javascript, you can use any HTML controls which was designed for web sites in the internet. Here is a link to a short review of 21 free HTML datepickers.

In this post I will show how to use the most popular JQuery UI Datepicker. You should build your Windows Store app by using Javascript, because for obvious reasons it won’t work with XAML and C# (though you can try to use this control for C# apps, but I’m not sure that it will work).
Here is the screenshot of the app running on the simulator:

win8-calendar

At first, it is necessary to download 3 files. Though it is possible for internet web sites to refer to javascript libraries without downloading them, windows store applications can’t do this, they can use only offline javascript files.
1. jQuery 1.8.3 (the latest stable version at the moment of writing this post, but you can use any other version)
2. jQuery UI
3. jQuery UI style sheet

The first thing that you should do is to modify the jQuery 1.8.3 library. You should add 1 line at the beginning of the file and 1 line at the end:

MSApp.execUnsafeLocalFunction(function () {
// the original file
});

Like this:

win8-jquery-modified

Then add these 3 files to appropriate folders of the project:

winstore_datepicker_sample_solution_explorer

Add links to these files to the head section and add an input element with javascript code to the body section. The whole file looks so:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>DatePicker Sample</title>

    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    
    <script src="/js/jquery-1.8.3.js"></script>
    <script src="/js/jquery-ui.js"></script>
    <link href="/css/jquery-ui.css" rel="stylesheet" />

<!-- These links are not necessary in my application, but they can be useful in other applications -->
<!--<link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>-->
</head>
<body>
    <h1>DatePicker Sample</h1>
    <p>Date: <input type="text" id="datepicker" /></p>

    <script type="text/javascript">
        $("#datepicker").datepicker();
    </script>
</body>
</html>

The source code of the sample application: WinStoreDatepickerSample.zip

Just passed 70-480 exam Programming in HTML5 with JavaScript and CSS3

Recently I’ve found out that it is possible to pass 70-480 exam for free if you have the promo code. The promo code is HTMLJMP and I’ve found it here: Microsoft virtual academy.

Though I post in this blog more about Windows development, I have lot of experience with web development as well, so it’s been easy for me to pass this exam.
Before taking this exam, I learned some new features of HTML5:

  1. CSS Grid and Flexbox layouts. Yyou don’t need to use difficult floats and absolute positioning any more, everything is as easy as using StackPanel and Grid controls in XAML.
  2. Javascript web workers which run in a real background thread. But I don’t know where they can be useful, it is good only for service calls which are already aynchronous and ajax calls don’t require any background javascript threads.
  3. New HTML tags like <nab>, <aside> and others, which must be useful for search engines, but they don’t seem to be different from ordinary <div>.
  4. Storage API where you can store data instead of cookies. For example, you can save comments which users type and if they accidentally close the browser and don’t post anything, you can restore entered text after they visited the site once again, which is very convenient.

I will not post examples of questions, because you can find them on the famous free website examcollection. Although they have correct questions, sometimes they have incorrect answers, so you should know the subject, certification of which you are going to pass.

Now I can pass other exams and receive MCSD title.
There are 2 of them related to web development:

And 1 related to Windows development:

 

As you can see, 2 certifications are almost the same. So what they promised became true: you can develop Windows applications by using HTML and Javascript instead of C# and XAML.
I wouldn’t say that it is bad, because actually Javascript is an easy language, and it is much easier to perform UI manipulations by using CSS and Javascript instead of XAML. If you tried to design custom controls, you know how horrible XAML is, it is much more inferior in comparison with CSS. On the other hand C# is much better than Javascript.
So I hope that there will be a way to use HTML and C# together while developing Windows store apps, as it is already possible with web sites and ASP.Net MVC.