In the previous Html + jQuery vs Silverlight blogposts (1) (2) I discussed animations and how the two technologies compared to each other. Now we will see how the two measure up when displaying statistical data.
For the Silverlight side I will be using the Silverlight toolkit. Granted that there are better solutions but most of these have a price tag assigned to them. For the jQuery I will be using jqPlot. I’m not sure whether this is the best solution but there are so many of these libraries out there that it is impossible to try them all out. If you find that you have a better alternative than by all means post it.
The datasource I will be using for both examples is a fictional list of visitors for a blog.
So let’s start building. As usual I’ll be starting with Silverlight since this is the technology I have the most experience with.
So at first we create a datasource for the graphs to be able to bind to:
Resources.Add("PageViews", new List<PageView>()
{
new PageView(){Amount = 5000, Date = new DateTime(2011,1,1)},
new PageView(){Amount = 6000, Date = new DateTime(2011,2,1)},
new PageView(){Amount = 7000, Date = new DateTime(2011,3,1)},
new PageView(){Amount = 7500, Date = new DateTime(2011,4,1)},
new PageView(){Amount = 8100, Date = new DateTime(2011,5,1)}
});
Now that this is done we create our graphs in the page and databind to our datasource:
<toolkit:Chart Grid.Row="0">
<toolkit:Chart.Series>
<toolkit:ColumnSeries
ItemsSource="{StaticResource PageViews}"
IndependentValueBinding="{Binding Date}"
DependentValueBinding="{Binding Amount}"/>
</toolkit:Chart.Series>
</toolkit:Chart>
<toolkit:Chart Grid.Row="1">
<toolkit:Chart.Series>
<toolkit:PieSeries
ItemsSource="{StaticResource PageViews}"
IndependentValueBinding="{Binding Date}"
DependentValueBinding="{Binding Amount}"/>
</toolkit:Chart.Series>
</toolkit:Chart>
<toolkit:Chart Grid.Row="2">
<toolkit:Chart.Series>
<toolkit:LineSeries
ItemsSource="{StaticResource PageViews}"
IndependentValueBinding="{Binding Date}"
DependentValueBinding="{Binding Amount}"/>
</toolkit:Chart.Series>
</toolkit:Chart>
So that's it for Silverlight. How does jQuery compare towards this slick implementation? Not that different!
Again we create our datasource:
var data = [['2011-01-01', 5000], ['2011-02-01', 6000], ['2011-03-01', 7000], ['2011-04-01', 7500], ['2011-05-01', 8100]];
Then we speak to our third party library to plot the graphs:
var line = $.jqplot('chart1', [[5000,6000,7000,7500,8100]], {
cursor: { show: true },
highlighter: { show: true },
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: { fillToZero: true }
},
axesDefaults: {
labelOptions: {
fontSize: '13pt'
}
}
});
var pie = $.jqplot('chart2', [data], {
series: [{
renderer: $.jqplot.PieRenderer,
rendererOptions: {
sliceMargin: 3,
showDataLabels: true,
dataLabelNudge: 20
}
}],
legend: {
show: true
}
});
var bar = $.jqplot('chart3', [data], {
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
labelOptions: {
fontSize: '13pt'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
The chart1, chart2 and chart3 identifiers are from 3 divs declared in the body:
<div id="chart1" style="height: 300px; width: 600px;">
</div>
<div id="chart2" style="height: 340px; width: 500px;">
</div>
<div id="chart3" style="height: 340px; width: 500px;">
</div>
So both implementations are pretty smooth, although it is pretty obvious that the XAML is way more expressive than the jQuery. Why would you favor jQuery over Silverlight then? The usual Achilles heel of Silverlight is the plugin so I’m not bothering elaborating that even further.
Rendering
This was a remark I made in the previous post but in this library I can’t say the Silverlight implementation is that much better than the jQuery implementation. It does have some better rounded edges and the rendering has no difference in between browsers but besides that they both look nice.
Browser support:
It was fun to see that both examples worked in all browsers for both solution soI have no problem here.
Performance:
The drawing is pretty much identical on both technologies, yet if you opt for the Silverlight solution then you have the drawback of downloading the XAP. The size of the XAP when fully stripped of all unnecessary assemblies is 360 KB, while the jquery solution with all scripts would account for 210 KB. That’s not a big difference! The problem however is that the XAP still needs to be processed and loaded into the runtime. For that reason the Silverlight solution takes around 3 times longer to load then the jQuery solution.
To conclude I would say that this round is favored for jQuery. It’s much faster (to load) and there is a whole arsenal of free libraries at your disposal. The rendering is pretty much the same and you don't need a plugin.
Till next time!
Geen opmerkingen:
Een reactie posten