ailon's DevBlog: Development related stuff in my life

Book Preview: Essential Silverlight 2 (Up-to-Date)

5/28/2008 12:30:24 PM

Essential Silverlight 2 Got a copy of Christian Wenz's "Essential Silverlight 2" (Up-to-Date) I ordered from Amazon. It arrived in 20 days which is quite fast provided that Amazon predicted it would take 4-6 weeks. Obviously I haven't read it yet but I just wanted to blog about the "Up-to-Date" concept from O'Reilly.

With Up-to-Date books you get a book looking like binder and once book's subject is updated the book is updated and you can download new/changed pages, print them (or order pre-printed updated pages from O'Reilly) and add/replace pages in the binder. Looks good on paper.

As I wrote the book is essentially a binder. There are about 200 printed pages (100 sheets) and about 100 sheets of plain pre-punched paper to print updates on. I went right to O'Reilly site and registered my book. There was an update already with 80 pages of new and updated content based on Silverlight 2 Beta 1. You can download 4 versions of PDF pages: 2 to print on provided sheets (either single-side or double-side) and 2 for standard Letter/A4 with cut-out and punch markers.

My first question was can I use prepunched paper with our HP LaserJet 1300? After some RTFM'ing I found a statement in HP's user guide saying

Do not use paper with cutouts or perforations other than standard 3-hole punched paper.

whatever "standard" means in this context. And what would happen if I had a 2 or 4-hole punched paper? Anyway I decided that it would be ok.

IMAG0017 The next challenge was to fit the content perfectly to the page. The title of the PDF for precut pages says "Pre-cut 7x9 Single-sided". But in reality the paper is 7.17"x10.12" (182mm x 257mm) which is actually B5. It took me some time to figure this out. But even when I knew the right size I couldn't make it fit perfectly. All the new pages have printed tabs saying "Update 1 (Beta 1)" and I couldn't make these fit.

Maybe that was my fault, maybe O'Reilly's, maybe Adobe's, maybe HP's. Who knows? It is not a very crucial information but I decided to not take a risk losing useful info on some pages and just shrink the pages a little to make them fit. The font on "my" pages is a little smaller now than on original pages but it's ok.

All-in-all I've spent about 2 hours updating the book. Since my printer can't print on both sides automatically I had to use single-side approach and spent like 80% of bundled paper. So I don't think I'll have enough paper for another update.

IMAG0012

Btw, the holes on the blank paper are not exactly at the same distance from the edge as on original pages so it was a little difficult to assemble the binder back and it doesn't look very pretty.

IMAG0015

And why use B5 for these series? I know it looks like a real book this way but I doubt I can get punched or even not punched B5 paper here in reasonable quantities and for reasonable price. And when using Letter/A4 you have to cut from all 4 sides which is a total overkill. And shipping of pre-printed updates to Lithuania is $19+. Add $4 for the updates themselves and you get the price of the whole book.

Why not just use Letter/A4? I know the book would be a little clunky this way but it would make life of the customers who bought this book to be able to update it themselves (which is the idea, isn't it?) much much easier.

Conclusion

The concept is interesting and it's really nice to have an actual book on the product that is still in beta and know that you can update the book to the latest version. But the "maintenance" of the book is too painful to my taste.

kick it on DotNetKicks.com

Tags: , ,

ASP.NET and Oracle Setup

5/27/2008 10:37:40 AM

Got hit by this error today.

System.Data.OracleClient requires Oracle client software version 8.1.7 or greater.

I remember getting it earlier but forgot the cause and the solution, so I want to document it now.

Basically this happens because IIS user has no permissions to read & execute files in Oracle's directory. So the solution is to manually grant the permissions.

Details in this Roy Tore Gurskevik's post.

Tags: ,

BlogEngine.NET Extension: In-line Tags

5/7/2008 5:40:25 PM

One more BE.NET extension from me. I decided to write it since Diarist works with BlogEngine.NET now but it doesn't let you attach tags to your post. And I think that's not the only one way to post to your blog without the ability to specify tags.

So this extension allows you to specify your tags in the content of your post. Simply place a code like this in your post:


This post for example would have a string like this


Download InlineTags Extension (1.5kb)

kick it on DotNetKicks.com

Tags: , , ,

Slug Transliterator Extension for BlogEngine.NET

4/28/2008 3:17:51 PM

While I'm at it, I decided to write another extension for BlogEngine.NET. Those writing in English or in other Latin alphabet language only aren't probably familiar with this issue but everyone else is (I think).

When you create a post in Russian (for example) with title like "Привет, мир!" ("Hello, World!") you get automatic slug and (as a result your post link) looking like this:

/blog/post/2008/04/d09fd180d0b8d0b2d0b5d1822c-d0bcd0b8d180!.aspx

This doesn't look much better then the GUID version if you ask me. So, this is where SlugTransliterator comes to rescue. After this post passes through this extension this URL will look like this:

/blog/post/2008/04/Privet--mir!.aspx

A little better, don't you think? I don't know if it has any positive effect on SEO related aspects but it's definitely much more readable and rememberable (is this a word?).

By default SlugTransliterator is configured to transliterate from Russian (Cyrillic) and Lithuanian (Baltic) titles. But it can be configured to do any sort of char-to-char translation using Extension Manager.

Download

SlugTransliterator for BlogEngine.NET v.1.0 (2.5kb)

Installation

Just copy SlugTransliterator.cs to your App_Code/Extensions directory and configure in the admin section as you see fit.

Hope this helps someone. If not, I did it for myself anyway :P

kick it on DotNetKicks.com

P.S.: you may also want to use this extension to transliterate * symbol which results in bad URL in current (1.3) version of BE. Default configuration translates "*" to "-"

Tags: , ,

Cross-post to LJ 1.0

4/25/2008 12:27:06 PM

Just a quick note for those who subscribe to my RSS feed and who's reader doesn't show updated posts:

I've released an updated version of Cross-post to LiveJournal Extension for BlogEngine.net.

Tags: , ,

Cross-post to LiveJournal Extension for BlogEngine.NET

4/24/2008 7:07:00 PM

Some time ago I decided to cross-post all my blog posts from various blogs to my blog at LiveJournal. I used cross-posting plugin for Windows Live Writer by Daniel Cazzulino for some time but then it stopped working with newer releases of WLW. So after toying with idea for some months I decided to write an extension for BlogEngine.NET to do this automatically.

Update: 2008-04-25: I've updated the extension to version 1.0. Here's what was added/fixed

  1. FEATURE ADDED: username, password, xml-rpc url and prepended text could now be edited in Extension Manager
  2. FEATURE ADDED: tags are now cross-posted along with the post
  3. BUGFIX: LiveJournal assumed that posts are in ASCII. Though they were stored and displayed just fine, it wasn't possible to correctly edit them in LJ. Added ver=1 protocol version number.

Note that you will need to configure the extension in Extension Manager after installation

Download it: BECrossPostToLJ-1.0.zip (2kb)

I've used excellent XML-RPC.NET library by Charles Cook so you'll need that too.

Installation

  1. Download XML-RPC.NET library from http://www.xml-rpc.net/
  2. Copy bin/CookComputing.XmlRpcV2.dll to Bin directory of your BlogEngine.NET installation
  3. Upload the files in App_Code/Extensions/ directory to the App_Code/Extensions/ of your BlogEngine.NET installation
  4. Configure the extension in Extension Manager

Known limitations/issues

  • In case your post includes relative URLs in links or image source attributes they wont work. I use WindowsLiveWriter for most of my posts and it inserts images with absolute URLs so this is a minor problem in my case
  • Only new posts are being cross-posted. Cross-posting updates adds too much overhead in tracking IDs, etc. so I don't plan to do this in the nearest future.

Other APIs

I plan to create similar extension for MetaWeblog API if someone needs it. So, again, let me know if you do, so I don't waste time for no reason.

kick it on DotNetKicks.com

P.S.: here's this post cross-posted to LiveJournal using this extension.

Tags: , ,

Add Interactive Flash Charts to Your ASP.NET Web Application. Part 3: Auto-reloading Data

3/28/2008 1:38:57 PM

This is the third part in the series of tutorials showing how to add dynamic, interactive, data-driven charts to your ASP.NET web applications. These tutorials use amCharts Flash charting components and "ASP.NET Controls for amCharts" for ASP.NET integration.

In the first two parts of the series we've learned how to add a simple pie chart to your pages and how to bind the chart to real data. This time we will learn the way of making the chart reload it's data in specified intervals and see more options for visual customization.

External Data Source

To make our pie chart reload it's data we need to create an external data source for it. The nicer way of doing this would be to implement IHttpHandler interface but since the objective of this tutorial is to show you the main relevant principles, we will do it with a web form pretending to be an XML file.

So, let's start by creating our dynamic data file. Add a new web form to your web site and call it ExternalDataForPieChart.aspx. In the web form source remove all the contents except the @Page directive so it looks like this:

<%@ Page Language="C#" AutoEventWireup="true" 
CodeFile="ExternalDataForPieChart.aspx.cs"
Inherits="ExternalDataForPieChart" ContentType="text/xml" %>

Notice the ContentType="text/xml" attribute. In the code-behind file add using am.Charts; directive and implement the Page_Load() handler like this:

protected void Page_Load(object sender, EventArgs e)
{
    PieChart myChart = new PieChart();

    // get a random value for Clinton votes
    Random rnd = new Random();
    int clintonValue = rnd.Next(80000, 120000);
    
    // add items to pie chart

    // Hillary Clinton's slice
    myChart.Items.Add(new PieChartDataItem("Hillary Clinton", clintonValue, // title and value
        "http://www.hillaryclinton.com/", "Votes for Hillary Clinton", // url and description
        (byte)(clintonValue < 50 ? 70 : 90), // opacity: make leading candidates slice solid and losing candidates semi-transparent
        (clintonValue > 50 ? true : false) // make leading candidates slice pulled out
    ));
    
    // Barack Obama's slice
    myChart.Items.Add(new PieChartDataItem("Barack Obama", 200000 - clintonValue, // title and value
        "http://www.barackobama.com/", "Votes for Barack Obama", // url and description
        (byte)(clintonValue > 50 ? 70 : 90), // opacity: make leading candidates slice solid and losing candidates semi-transparent
        (clintonValue < 50 ? true : false) // make leading candidates slice pulled out
    ));

    // output data xml to response stream
    Response.Write(myChart.Items.GetItemsXml().OuterXml);
}

As you can probably see from the code for the sake of simplicity we are going to generate random data imitating the live voting process in the 2008 Democratic US Presidential primaries.

We create a PieChart instance and add 2 PieChartDataItems to it with random values. Basically you can create this items using only 2 arguments: first for the title of the slice and second for the value. Here we've used another version of constructor which lets us specify a link URL, description, opacity, and pull-out flag for each slice.

Finally we get the XML data for our data items and just output it to response stream. That's it for our data file.

The Chart

Now let's create our main chart page. Add an new web form to your site called PieChartWithExternalData.aspx and drop a PieChart control on it.

All you need to do is specify the external data settings:

external_data_settings

We've selected our data file for the ExternalDataFileUrl property, set AddTimeStamp property to True (to prevent unwanted caching issues) and set ReloadDataInterval to 30 seconds.

If we run this page now we will see something like this:

 default_settings

And the chart will be refreshed every 30 seconds to show the new data.

The mark-up for this chart is as simple as this:

<cc1:piechart id="PieChart1" runat="server" addtimestamp="True"
    externaldatafileurl="~/ExternalDataForPieChart.aspx" reloaddatainterval="30">
</cc1:piechart>

Spice It Up 

Now when we have our initial goal achieved let's add some bells and whistles to our chart. Without going into detail about every possible setting let's see the code we've got for the beautified chart (all of these properties could be set in designer):

<cc1:piechart id="PieChart1" runat="server" addtimestamp="True" 
    backgroundfile="../../images/usa_flag_by_freefotouk_520.jpg"
    colors="Blue,Red" externaldatafileurl="~/ExternalDataForPieChart.aspx"
    height="340px" pieangle="30" pieheight="15"
    reloaddatainterval="30" slicelinktarget="_blank" 
    DataLabelLineColor="#FFFFC0" ForeColor="#FFFFC0" LegendBackgroundAlpha="30" LegendColor="Black">
    <Labels>
        <cc1:ChartLabel Align="Right" Text="The 2008 Democratic Primaries" TextColor="#FFFFC0"
            TextSize="20" Width="500" />
        <cc1:ChartLabel Align="Right" Text="Live Voting Results in State X" TextColor="White"
            TextSize="14" Width="500" />
    </Labels>
</cc1:piechart>

In two words what we've done here is added a background image, changed font and pie slice colors, made the pie three dimensional and added a couple of labels.

And the result looks like this:

final_result

Photo of the flag by freefotouk.

As they say a picture is worth a thousand words, but a live demo is worth a thousand pictures. Click here to see this example in action.

That's it for today and for pie charts in general. In the next parts we will move on to other chart types.

kick it on DotNetKicks.com

Tags: , ,

Add Interactive Flash Charts to Your ASP.NET Web Application. Part 2: Data binding

3/26/2008 5:05:47 PM

This is the second part in the series of tutorials showing how to add dynamic, interactive, data-driven charts to your ASP.NET web applications. These tutorials use amCharts Flash charting components and "ASP.NET Controls for amCharts" for ASP.NET integration.

In the first part of the series we have looked at how to setup your Visual Studio environment to use amCharts and how to add a simple pie chart based on static data. That was easy but by using such dynamic environments as ASP.NET and Adobe Flash most likely you weren't looking for a way to display static hard-coded data. So in this part we will look at how to bind our pie chart to a real data source plus we will cover a couple of visual enhancement options.

Pie chart looking from data binding point is the simplest of all chart forms (at least in amCharts lineup). Column, Line and XY charts can have more than one graph drawn on a single chart but Pie chart can't. This makes it a perfect starting point to learn how to bind amCharts to data.

Data source

We will be using sample Northwind database included with MS SQL Server. Unfortunately it's not included with SQL Server Express Edition but here's an article on how to set it up with Express. You can use MS Access version of Northwind if you like.

We will start by adding a new Web Form page to our web site. Let's call it DataboundPieChart.aspx. First we will add an SqlDataSource object to our page by dragging and dropping it from the toolbox

sqldatasource

Now we need to configure it. Press "Configure Data Source..." link in the Smart Tag and configuration dialog will appear.

choose_your_connection

Create a new connection to your SQL Server or select an existing connection from the dropdown and press "Next". Let's save the connection string in web.config for future reference

save_connection_string

Let's call it "NorthwindConnectionString" and press "Next". Now we need to select a table or view containing our data.

configure_select_statement

We will use the one called "Category Sales for 1997". On the next screen we just press "Test" to make sure that our simple query works and press "Finish".

test_query

Let's rename the data source from generic SqlDataSource1 to a more meaningful CategorySalesSource

Data-bound pie chart 

Now that we have our data source configured, it's time to add a pie chart by drag-n-dropping the PieChart control from the toolbox. All we need to do is to specify our datasource object and associate the fields in datasource with chart properties.

databinding_properties

We set DataSourceID to CategorySalesSource, DataTitleField (this would be the title of a pie slice) to CategoryName and DataValueField to CategorySales. And that basically it.

One more thing we want to do is disable chart legend because there will be too much slices in our chart and the legend would take too much space without making much sense. To do that we set LegendEnabled property to false.

disable_legend

Now if we run our project our pie chart would look like this

databound_piechart

Some tweaks 

Default chart looks just fine but suppose we want to add a little 3D effect to it. This is done by setting the PieAngle property to a value different from 0

pie_properties

We've also set PieHeight property so our pie has some volume and decided to make it a donut instead of a pie by setting PieInnerRadius to 30 (in other words this is the radius of the hole).

One more thing we want to do is highlight our top selling categories by grouping our slow-sellers into one slice called "Others". To do that we set grouping properties to group all the slices with value less than 10% of the total into one slice. This is done by setting GroupPercent property to 10.

grouping_properties

Let's make the others slice pulled out of the donut on load. Set GroupPullOut to true.

Let's run the project and see what we got. This is a screenshot of our pie with mouse hovering over the "Confections" slice.

tilted_grouped_donut

That's it for Today. In the next part we will talk about feeding the data to our chart from external data source and forcing the chart to refresh itself every now and then.

P.S.: thanks for linking, "kicking" and promoting these tutorials in other ways!

kick it on DotNetKicks.com

Tags: , ,

Add Interactive Flash Charts to Your ASP.NET Web Application. Part1: Basics

3/21/2008 4:26:22 PM

This is the first part in the series of tutorials showing how to add dynamic, interactive, data-driven charts to your ASP.NET web applications. These tutorials use amCharts Flash charting components and "ASP.NET Controls for amCharts" for ASP.NET integration.

In this first installment I will show you how to add ASP.NET Controls for amCharts into your Visual Studio toolbox and add a simplest form of pie chart to your page.

Setup

First we need to download amCharts controls and setup our environment. To download amCharts navigate to http://www.amcharts.com/download . Today we will need "Pie & Donut" chart and "ASP.NET Controls for amCharts". Download the files and extract the archives to your preferred location.

Now let's create a new web site in Visual Studio/Visual Web Developer Express and add amCharts to the Toolbox and the site.

To add ASP.NET Controls for amCharts to your Visual Studio toolbox select "Choose Toolbox Items ..." from Tools menu.

choose_toolbox_items_dialog

There select "Browse..." and navigate to the directory were you extracted "ASP.NET Controls for amCharts". Select am.Charts.dll and press "Open".

dll

Press "OK" and you should see 4 new controls added to your toolbox

 toolbox

Now we need to add Flash files for amCharts Pie & Donut chart to our web site. To do that we will create a directory called "amcharts" under the root of our web application and copy the directory "ampie" from the downloaded Pie & Donut chart archive and all of it's contents under that directory.

ampie_files

This is were ASP.NET Controls for amCharts assume to find amPie files. This location could be changed in your web.config file or in your code. See documentation for details.

We are all set to start adding pie charts to our pages.

Basic pie chart

Today we are going to add a simple, static pie chart. To do that we drag the PieChart control from the toolbox to the designer surface and drop it there.

design_pane

We want to add a title to our chart. In amCharts this is done by adding a label. You can add virtually unlimited number of labels but we only want one this time. In the properties window locate a property called "Labels" and press "..." button next to it.

 properties_labels

Collection editor opens. Press "Add" and add label text (title in our case) and modify other properties if you want. We will change color of our title, make it bigger and right-align it.

label_editor

Press "OK". Now let's add our data items. In the properties window locate "Items" and press "...".

properties_items

In the opened window press "Add" to add our first data item.

dataitemeditor

Type in Title (this will be shown in the legend and next to the slice), Value (this doesn't have to be in percents, amCharts will calculate the percents automatically). We'll make our first slice pulled out. To do this we set PullOut to True. Press "Add" to add another item and modify appropriate properties. Press "OK" and save your page.

That's it. In the source view this looks like this:

<cc1:PieChart ID="PieChart1" runat="server">
    <Items>
        <cc1:PieChartDataItem PullOut="True" Title="Yes" Value="32" />
        <cc1:PieChartDataItem Title="No" Value="68" />
    </Items>
    <Labels>
        <cc1:ChartLabel Align="Right" Text="Do you smoke?" TextColor="#FF8000" TextSize="20" />
    </Labels>
</cc1:PieChart>

and when we run our project it looks this way

in_browser

In the next part I'll show you how to bind pie chart to data.

kick it on DotNetKicks.com

Tags: , ,

ASP.NET Controls for amCharts Released

3/18/2008 4:13:13 PM

Recently I've been working on a product called "ASP.NET Controls for amCharts". For those who don't know - amCharts is the best interactive web charting software available and ASP.NET Controls for amCharts make it easier to generate and customize the charts from ASP.NET/Visual Studio.

Today we have finally released version 1.0 of the controls.

Download ASP.NET controls for amCharts.

Tags: ,

Copyright © 2003 - 2018 Alan Mendelevich
Powered by BlogEngine.NET 2.5.0.6