LightSwitch HTML 101: Getting Started with the PieChart

In this tutorial, I will show you how to get started using the brand new LightSwitch HTML PieChart control. It is so incredibly easy, and you will be up and running before you know it. Start by adding your datasource to a new LightSwitch HTML project. Here, I will bind it to a table with car information: Next, add a new Screen to the HTMLClient. Select this Wijmo PieChart Screen, select the data, and give the screen a name. After clicking OK, you will be presented with the Designer: For a PieChart, you will need two columns. 1. The first column will create a pie slice for each individual item. In this case, I will assign this to the model of the car. 2. The second column will be the corresponding value attached to the slice. For this, I want to know the horsepower for each model of car. Using this, you can delete any extraneous columns. Give your project a run, and check out your brand new PieChart. Let’s do a little customization now using Wijmo. In your Solution Explorer, switch to FileView, and open up the JavaScript file associated with the screen you created: In here, you will see the JavaScript to initialize the PieChart control. Some default settings will be here, and you can always change/add new properties. Let’s change the rendering angle of the start of the chart by using the startAngle property. Add the following code:

div.wijpiechart({  
            textStyle: {  
                "font-family": c1ls.fontFamily  
            },  
            footer: {  
                visible: false,  
                text: "Chart Footer",  
                textStyle: { fill: color, "font-size": 18 }  
            },  
            legend: {  
                visible: true,  
                style: { stroke: color },  
                textStyle: { fill: color, "font-size": 10, "font-weight": "bold" }  
            },  
            showChartLabels: false,  
            seriesList: chart.Series,  
            click: chart.OnClick,  
            hint: chart.Hint,  
            **startAngle: 180**  
        });  

Give it another run, and see that the angle is now 180 degress from where it started previously. Want to change where the legend is rendered? Let’s move it to the left of the chart by editing the legend option with the following:

            legend: {  
                visible: true,  
                style: { stroke: color },  
                textStyle: { fill: color, "font-size": 10, "font-weight": "bold" },  
               ** compass:"west"**  
            },  

The possibilities are endless, and you can use the properties from the Wijmo PieChart here. Check out the all new Studio for LightSwitch HTML and get coding now! It is the must-have companion for any LightSwitch Web application.