Highchart – Pie charts Sample

Scenario:
Highcharts is a charting library written in pure javascript, offering an easy way of adding interactive charts to your web site or web application. It works in all modern browsers including the iPhone/iPad and Internet Explorer from version 6.
One of the key features of Highcharts is that under any of the licenses, you are allowed to download the source code and make your own edits. This allows for personal modifications and a great flexibility. it does not need any plugins like flash or java. One of my recent project has a requirement to show output on chart and hence exploring few samples using Highcharts. Please find sample pie chart below.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<h2>High Chart</h2>
<div class="panel-body" style="text-align: center;">
    <div id="container" style="min-width: 300px; height: 412px; max-width: 600px; margin: 0 auto; clear: both;"></div>
    <div style="clear: both;"></div>
</div>
<script>
    var sampleChart;
    function PopulateChart(chartType, chartName, chartData, chartFormat, allowClick) {
        sampleChart = new window.Highcharts.Chart({
            chart: {
                renderTo: "container",
                type: chartType
            },
            title: {
                text: "My Contracts"
            },
            tooltip: {
                pointFormat: chartFormat
            },
            plotOptions: {
                pie: {
                    allowPointSelect: allowClick,
                    cursor: "pointer",
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: "pie",
                name: "Contract Info",
                data: chartData
            }]
        });
    }

    $(document).ready(function () {
        var pieData = [
            ["Chase", 16.8],
            ["Wells Fargo", 26.8],
            ["Emlem Health", 8.5],
            ["Barclays", 6.2],
            ["Others", 0.7]
        ];
        PopulateChart("pie", "Contract Info", pieData, "{series.name}: <b>{point.y}%</b>", false);
    });

</script>

Metrostyle Dashboard

There was a requirement from a corporate client to create a metro style dashboard (don’t confuse with metro style apps) for there existing application created in WPF platform. When you say Metro Style Dash board it should looks like windows 8 looks like tile based user interface.
Good news is that Dev Express and Infragistics have already come up with controls that support Tile based metro style dashboards. Developers don’t need to re invent the tile based programming. Rather than come up with custom coding with high malignance and lots of coding we can experiment these cool features provided by DevExpress and Infragistics.
Dev Express – Dev Express Tile Layout Control provides a frame work where we can easily develop tile based UI with few line of code. Please check the link –

  • http://documentation.devexpress.com/#WPF/CustomDocument10996
  • Infragistics – also has XamTilemanager with encapsulate most of the complexity of tile based development. We can have a nice tile managed UI with few line of code with dynamic loading and drag and drop functionalities. Please check the link –

  • http://www.infragistics.com/community/blogs/atanas_dyulgerov/archive/2011/01/01/xamtilemanager-new-control-in-the-xaml-line-of-business-product-shipped-with-the-11-2-release.aspx