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


How I use Google Analytics for Mobile Apps

Google Analytics is a service that collects information about web site visits and then displays it in the form of charts and tables. In this post I will enumerate reports and pages that I use for my Android application.

Visits by country

It is the main report and it can be seen by using Audience->Geo->Location. It will display the countries on the map as well as in the table.
Also if you click on any country in the list, it will display the list of areas (or states) and the list of cities.
It is very similar to the Google Play statistics which shows installs by country:
But Google Analytics has more data and shows real usage instead of one-time installs.
Read more of this post

Silverlight video player. YouTube style.

In the previous article I explained how to implement a simple video player with some controls. It works well, but it has a generic style. In this article I’ll explain how to restyle the video player so that it looks the same as YouTube player.

The final result is in the picture below, and at this link you can see how it looked before.

Read more of this post

Silverlight MediaElement tutorial. Creating a video and audio player.

Video in Silverlight is played by using the built-in MediaElement class. You might have seen some video frameworks like Silverlight Media Framework, Expression Encoder Player or Open Video Player, they all are based on this class. Though these frameworks look quite complex, in reality they are just wrappers around the built-in MediaElement or SmoothStreamingMediaElement classes and all that they do is adding design, control buttons and some extra functionality like advertisement and diagnostics. So you can build such video player by yourself.

The simplest media player

Here is the simplest code which will work:

    Source="" />

It will start playing video as soon as the page is loaded and the video fills the entire page uniformly (keeping its aspect ratio).

If it doesn’t work, make sure that the address of your page looks like `http://…` and not `file://…`. You can fix the url in this way by adding a web application project to your solution and running it.

Now I will explain how to improve the code above so that it looks more like a video player.
Read more of this post

Windows Phone select and upload image to a website over HTTP POST

You have often seen photo sharing websites where you can attach images and after clicking the submit button the local images will be uploaded to the server. It is implemented by using HTML forms which send HTTP requests automatically. But if your application is not a web application written in HTML, you should write HTTP requests by yourself. You should do that in Windows Phone too.

So the full sequence consists of 2 actions: 1 – select an image, 2 – upload it to the server.
Read more of this post

Silverlight sparkline chart

According to Wikipedia

A sparkline is a very small line chart, typically drawn without axes or coordinates.

Though this chart is not included by default to the Silverlight Toolkit library, it is very easy to implement such chart by styling the built-in Line chart. Here is an example which I’ve implemented:


At first I’ve changed the default control template of the Chart control, I’ve removed all paddings, the chart title, and reduced the minimum height and width of the chart. Also I’ve changed the DataPoint template (made them invisible) and the Polyline template (reduced its thickness). Here is the XAML code:

    <Style x:Key="ChartWithoutPaddings" TargetType="chart:Chart">
        <Setter Property="Padding" Value="0" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="ChartAreaStyle">
                <Style TargetType="Panel">
                    <Setter Property="MinWidth" Value="100" />
                    <Setter Property="MinHeight" Value="20" />
        <Setter Property="PlotAreaStyle">
                <Style TargetType="Grid">
                    <Setter Property="Background" Value="Transparent" />
        <Setter Property="Template">
                <ControlTemplate TargetType="chart:Chart">
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                        <chartingprimitives:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}">
                            <Grid Canvas.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}" />

    <Style x:Key="EmptyDataPoint" TargetType="Control">
        <Setter Property="Background" Value="Black" />
        <Setter Property="Template" Value="{x:Null}" />

    <Style x:Key="OnePixelLine" TargetType="Polyline">
        <Setter Property="StrokeThickness" Value="1" />

This code is almost all that you need to create a sparkline chart. All that is left is to remove axes. It wasn’t a trivial thing, so I used some kind of a hack: I set their width (for Y axis) and height (for X axis) to zero.

<chart:Chart Style="{StaticResource ChartWithoutPaddings}">
    <chart:LineSeries ItemsSource="{Binding FirstIndexItems}" IndependentValuePath="Number" DependentValuePath="Value" 
                        DataPointStyle="{StaticResource EmptyDataPoint}" 
                        PolylineStyle="{StaticResource OnePixelLine}"  />
        <chart:LinearAxis Orientation="X" Height="0" Opacity="0" />
        <chart:LinearAxis Orientation="Y" Width="0" Opacity="0" />

Source code:

19 invitations to giveaway

Maybe will be useful for someone, so I have 19 invitations that I don’t need. Just click at this link: accept invitation.

invitations carreer stackexchange

The proposal remains valid as long as you see this post. If I don’t have invitations, I will delete the post.