LightSwitch HTML 101: BarChart and the Radial Gauge

In this tutorial, we will learn some of the basics of the barchart and the radial gauge, and then tie the two together using some JavaScript. These concepts are terrific if you want to create an interactive and dynamic interface for your end users. As in the past few blogs, I will be using my cars table as my datasource. We will start by creating a new Wijmo Chart Screen, giving it a name, and attached it to the data. For simplicity, I am going to edit my query to only pull in a few makes of cars. Much like the PieChart tutorial, the BarChart requires two different fields: 1st Column- The X axis variable. I will set this to the model of the car. 2nd Column- The Y axis variable. I will set this to the corresponding horsepower of each model. I will also set the Width of the Wijmo Collection Control to a fixed size (500px). Give the project a run to see the newly created BarChart. Now, let’s do a little customization of the chart using JavaScript. I will change the rotation of the X-axis labels, and also add titles to each access. The modified JS file will look like this:

myapp.CarsChart.WijmoChart_render = function (element, contentItem) {  

    var div = $("<div/>");  
    div.appendTo($(element));  
    div.attr("style", "height: 400px");  

    contentItem.value.oncollectionchange = function () {  
        var chart = c1ls.getChartContent(contentItem);  
        var color = "#999999";  

        div.wijbarchart({ // also works with wijlinechart and wijscatterchart  
            textStyle: {  
                "font-family": c1ls.fontFamily  
            },  
            header: {  
                visible: false,  
                text: "Chart Header",  
                textStyle: { fill: color }  
            },  
            legend: {  
                visible: true,  
                style: { stroke: color },  
                textStyle: { fill: color, "font-size": 10, "font-weight": "bold" }  
            },  
           ** axis: {  
                x: {  
                    text: "Model",  
                    labels: {  
                        style: {  
                            rotation: 270  
                        }  
                    }  
                },  
                y: { text: "Horsepower", autoMin: false, min: 0, labels: { style: { fill: color }, textAlign: "near" } }  
            },**  
            horizontal: false,  
            stacked: false,  
            showChartLabels: false,  
            seriesList: chart.Series,  
            click: chart.OnClick,  
            hint: chart.Hint  
        });  
    };  
};  

Great! Now let’s work with the JS file further and add a RadialGauge. To add the RadialGauge, create a new div within the same container as the BarChart. Here is the code I added with some initial properties set:

    var div2 = $("<div/>");  

    div2.appendTo($(element));  

    div2.attr("style", "width: 350px; height: 350px;margin-left:80px; ");    setTimeout(function () {  

        div2.wijradialgauge({  

            value: 0,  

            min: 0,  

            tickMajor:{interval:100},  

            max: 1000,  

            radius: "auto",  

            startAngle: -45,  

            sweepAngle: 270,  

            labels: {offset:38}  

        });  

    }, 500);  

Give your project another run to see the new RadialGauge right underneath your BarChart. Now we will tie the gauge to the data within the grid using pure JavaScript. The BarChart has a mouseOver event that gets fired whenever the mouse hovers over any bar. We will use this to grab the Y-axis value of the bar, and then set it to the value of the Gauge. Back in the JS file, we will create a new function for the BarChart:

    ….  
            showChartLabels: false,  
            seriesList: chart.Series,  
            click: chart.OnClick,  
            hint: chart.Hint,  
            **mouseOver: function (e, data) {  
                var pos = data.index;  
                var d = data.data.y[pos];  
                div2.wijradialgauge({ value: d });  
            }**  
        });  

Give your project one final run: And that’s it! The gauge will change dynamically based on the hover value of your end user, all done in JavaScript. Get going with Studio for LightSwitch HTML today!