This is a migrated thread and some comments may be shown as answers.

[Solved] WIndows8 Samples Not working

3 Answers 59 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Jabeer asked on 16 Jan 2013, 05:51 AM

i wanted to try the telerik windows 8 controls for my new windows8 project
but the problem is that when tried to execute the sample code from chart it is not working..
first it was giving me the error that SDK is missing..but when i added the reference that problem has been resolved..

but still i am not getting the actual output which i was suppose to get as shown in 'Telerik Controls Examples HTML' windows8 app
(i copyd the code from the same app whcih they given for the chart in view code section)

the code is

default.html
---------------

<!DOCTYPE html>
<html>
<head>
    <title>RadChart - First Look</title>
    
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    
    <link href="///Telerik.UI/css/common.css" rel="stylesheet" />
    <link href="///Telerik.UI/css/dark.css" rel="stylesheet" />
    <script src="///Telerik.UI/js/jquery.js"></script>
    <script src="///Telerik.UI/js/ui.js"></script>

    <link rel="stylesheet" href="default.css" />
    <script src="default.js"></script>
</head>
<body>
    <div class="exampleChartFirstLook">
        <div class="indicators">
            <div id="indicator1" class="indicator"><span class="indicatorBlue"> </span>Revenues<br />
                <span class="indicatorText"></span></div>
            <div id="indicator2" class="indicator"><span class="indicatorBlue"> </span>Actual vs <span class="indicatorOrange"> </span>Target<br />
                <span class="indicatorArrow"></span><span class="indicatorText"></span></div>
            <div id="indicator3" class="indicator"><span class="indicatorBlue"> </span>Actual vs <span class="indicatorOrange"> </span>Last Year<br />
                <span class="indicatorArrow"></span><span class="indicatorText"></span></div>
        </div>
        <div class="revenueChart">
            <h3>REVENUE <span>($thousand)</span></h3>
            <div id="revenueLineChart" style="height: 200px; " data-win-control="Telerik.UI.RadChart" data-win-options="{
            theme: 'dark',
            legend: { visible: false },
            valueAxis: {
                labels: {
                    format: '{0:0}'
                },
                majorUnit:300
            },
            tooltip: {
                visible: false
            },
            categoryAxis: {
                categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
            },
            onseriesclick: Telerik.QSF.HTML.Examples.Chart.FirstLook.serieshover,
            onserieshover: Telerik.QSF.HTML.Examples.Chart.FirstLook.serieshover
        }"></div>
        </div>
        <div class="revenueProductChart">
            <h3>REVENUE <span>by</span> PRODUCT <span>(% of total)</span></h3>
            <div id="revenuePieChart" style="height: 230px; width: 200px;" data-win-control="Telerik.UI.RadChart" data-win-options="{
            theme: 'dark',
            legend: {
                position: 'bottom'
            },
            seriesDefaults: {
                labels: {
                    visible: true,
                    format: '{0:0} %',
                    distance: 1
                }
            },
            tooltip: {
                visible: false
            }
        }">
            </div>
        </div>
        <div class="revenueStoreChart">
            <h3>REVENUE <span>by</span> STORE <span>($thousand)</span></h3>
            <div id="revenueColumnChart" style="height: 200px;" data-win-control="Telerik.UI.RadChart" data-win-options="{
            theme: 'dark',
            legend: { visible: false },
            valueAxis: {
                labels: {
                    format: '{0:0}',
                    skip:1
                },
                majorUnit:500
            },
            tooltip: {
                visible: false
            }
        }">
            </div>
        </div>
    </div>
</body>
</html>

2)default.js
----------------

(function () {
    "use strict";
    //categories (months)
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

    //by product/month
    var pieData = [
{ product: "food & drinks", revenueByMonth: [427, 483, 520, 471, 484, 412, 418, 420, 461, 484, 452, 526, 5558] },
{ product: "clothing & accessories", revenueByMonth: [333, 345, 351, 336, 366, 356, 365, 374, 398, 370, 352, 384, 4330] },
{ product: "electronic & appliances", revenueByMonth: [307, 311, 350, 316, 331, 298, 287, 292, 314, 339, 309, 352, 3806] },
{ product: "homeware", revenueByMonth: [102.1, 113.8, 92, 91.2, 120.4, 78.8, 118.6, 121.1, 102.8, 131.1, 168.7, 104.6, 1345.2] },
    ];

    //by country/store/month
    var chartData = [
        { country: "Italy", store: "Greenings", revenueByMonth: [102, 113, 120, 109, 117, 95, 87, 100, 110, 114, 114, 121], targetRevenue: 1300.0, lastYearRevenue: 1202.0 },
        { country: "Italy", store: "Perfecto", revenueByMonth: [133, 139, 149, 138, 151, 136, 148.3, 151, 162, 158, 152, 165], targetRevenue: 1850.0, lastYearRevenue: 1642.1 },
        { country: "Italy", store: "Your store", revenueByMonth: [80, 93, 103, 91, 89, 77, 83, 86, 94, 110.3, 98, 111], targetRevenue: 1100.0, lastYearRevenue: 1103.6 },
        { country: "Italy", store: "The Hit", revenueByMonth: [71, 79, 88, 70, 88, 77, 76, 73, 77.4, 88, 76, 91], targetRevenue: 1040.0, lastYearRevenue: 833.1 },
        { country: "Italy", store: "NearBy", revenueByMonth: [108, 118, 128, 117, 126, 118, 113, 112, 117, 121, 122, 121], targetRevenue: 1550.0, lastYearRevenue: 1455.0 },
        { country: "Spain", store: "Ellinor", revenueByMonth: [101.1, 93.2, 88, 79, 88.7, 80, 83, 89, 112, 104.5, 91, 89], targetRevenue: 1250.0, lastYearRevenue: 999.2 },
        { country: "Spain", store: "Family Store", revenueByMonth: [102, 120, 113, 107, 112, 106, 111, 111, 115, 122.3, 121, 126], targetRevenue: 1500.0, lastYearRevenue: 1411.2 },
        { country: "Spain", store: "Shopper", revenueByMonth: [53, 49, 52, 60, 65, 57.2, 62, 60.4, 47, 48, 46, 54], targetRevenue: 650.0, lastYearRevenue: 694.6 },
        { country: "Portugal", store: "Fresh & Green", revenueByMonth: [54, 56.6, 53, 59.2, 57.7, 42, 46, 48.4, 53, 54, 55.2, 56.6], targetRevenue: 650.0, lastYearRevenue: 580.7 },
        { country: "Portugal", store: "Variety", revenueByMonth: [79, 74, 79, 76, 73, 70, 67.3, 60, 65, 69, 73, 75], targetRevenue: 750.0, lastYearRevenue: 801.9 }
    ];
    //by month
    var revenueData = [883.1, 934.8, 973, 906.2, 967.4, 858.2, 876.6, 890.8, 952.4, 989.1, 948.2, 1009.6];
    var targetData = [1150, 1250, 1300, 1200, 1250, 1300, 1330, 1330, 1250, 1300, 1330, 1350];
    var lastYearData = [756.2, 885.2, 896, 812.8, 991.7, 880.1, 875.4, 888.6, 900.1, 945.9, 935.9, 955.5]

    function bindPieChart(pie) {
        var pieSeries = new Telerik.UI.Chart.PieSeries();
        pieSeries.connectors.width = 0;
        var total = 0;
        for (var i = 0, len = pieData.length; i < len; i++) {
            var category = pieData[i].product;
            var value = 0;
            pieData[i].revenueByMonth.forEach(function (item) { value += item; });
            total += value;
            pieSeries.data.push({ category: category, value: value });
        }
        pieSeries.data.forEach(function (item) { item.value = (item.value / total) * 100; });
        pie.series.push(pieSeries);
        pie.refresh();
    }

    function bindColumnChart(chart) {
        var options = {
            theme: 'dark',
            legend: { visible: false },
            valueAxis: {
                labels: {
                    format: '{0:0}',
                    step: 500
                }
            },
            tooltip: {
                visible: true,
                format: '{0:0}'
            }
        };
        var categories = [], data = [];
        chartData.forEach(function (item) {
            categories.push(item.store);
            var value = 0;
            item.revenueByMonth.forEach(function (storeItem) { value += storeItem; });
            data.push(value);
        });
        chart.categoryAxis.categories = categories;
        var columnSeries = new Telerik.UI.Chart.ColumnSeries();
        columnSeries.data = data;
        chart.series.push(columnSeries);
        chart.refresh();

    }

    function indicatorClicked(args) {
        if (args && args.target) {
            var realTarget = args.target;
            while (realTarget && !realTarget.id) realTarget = realTarget.parentNode;
            if (!realTarget) return;
            switch (realTarget.id) {
                case "indicator1":
                    activateRevenues(args.target.ownerDocument);
                    break;
                case "indicator2":
                    activateTarget(args.target.ownerDocument);
                    break;
                case "indicator3":
                    activateLastYear(args.target.ownerDocument);
                    break;
            }
        }
    }

    function setupIndicators(parentElement) {
        parentElement.querySelector(".indicators").onclick = indicatorClicked;
        activateRevenues(parentElement);
    }

    function activateRevenues(parentElement) {
        WinJS.Utilities.query(".indicator", parentElement).removeClass("selected");
        WinJS.Utilities.query("#indicator1", parentElement).addClass("selected");

        var lineChart = parentElement.querySelector("#revenueLineChart").winControl;
        lineChart.series = [];

        var areaSeries = new Telerik.UI.Chart.AreaSeries();
        areaSeries.data = revenueData;
        lineChart.series.push(areaSeries);
        lineChart.refresh();
    }

    function activateLastYear(parentElement) {
        WinJS.Utilities.query(".indicator", parentElement).removeClass("selected");
        WinJS.Utilities.query("#indicator3", parentElement).addClass("selected");
        var lineChart = parentElement.querySelector("#revenueLineChart").winControl;
        lineChart.series = [];

        var columnSeries1 = new Telerik.UI.Chart.ColumnSeries();
        var columnSeries2 = new Telerik.UI.Chart.ColumnSeries();
        columnSeries1.data = revenueData;
        columnSeries2.data = lastYearData;
        lineChart.series.push(columnSeries1);
        lineChart.series.push(columnSeries2);
        lineChart.refresh();
    }

    function activateTarget(parentElement) {
        WinJS.Utilities.query(".indicator", parentElement).removeClass("selected");
        WinJS.Utilities.query("#indicator2", parentElement).addClass("selected");
        var lineChart = parentElement.querySelector("#revenueLineChart").winControl;
        lineChart.series = [];

        var columnSeries = new Telerik.UI.Chart.ColumnSeries();
        columnSeries.data = revenueData;
        lineChart.series.push(columnSeries);
        var lineSeries = new Telerik.UI.Chart.LineSeries();
        lineSeries.data = targetData;
        lineChart.series.push(lineSeries);
        lineChart.refresh();
    }

    WinJS.UI.Pages.define("/examples/Chart/FirstLook/default.html", {
        processed: function (element, options) {
            bindPieChart(element.querySelector("#revenuePieChart").winControl);
            bindColumnChart(element.querySelector("#revenueColumnChart").winControl);
            setupIndicators(element);
            updateIndicators(0, element);
        },
        updateLayout: function (element, viewState, lastViewState) {
            element.querySelector("#revenueLineChart").winControl.redraw();
            element.querySelector("#revenuePieChart").winControl.redraw();
            element.querySelector("#revenueColumnChart").winControl.redraw();
        }
    });

    function updateIndicators(index, parent) {
        var ind1 = parent.querySelector("#indicator1 .indicatorText");
        if (!ind1) return;
        ind1.innerText = revenueData[index];

        var isGood = revenueData[index] >= targetData[index];
        _updateIndicator("#indicator2", index, isGood, parent);

        isGood = revenueData[index] >= lastYearData[index];
        _updateIndicator("#indicator3", index, isGood, parent);
    }

    function _updateIndicator(indName, index, isGood, parent) {
        var ind3 = parent.querySelector(indName + " .indicatorText");
        var val = Math.round(Math.abs((1 - (isGood ? lastYearData[index] / revenueData[index] : revenueData[index] / lastYearData[index])) * 100) * 100) / 100;
        ind3.innerText = (isGood ? "+" : "-") + val + "%";
        ind3.style.color = isGood ? "green" : "red";

        var ind3arr = parent.querySelector(indName + " .indicatorArrow");
        ind3arr.style.color = isGood ? "green" : "red";
        ind3arr.innerHTML = isGood ? "▲" : "▼";
    }

    function serieshover(args) {
        var index = months.indexOf(args.category);
        if (index != -1)
            updateIndicators(index, document);
    }
    serieshover.supportedForProcessing = true;

    WinJS.Namespace.define("Telerik.QSF.HTML.Examples.Chart.FirstLook", {
        serieshover: serieshover
    });
})();

3)deafault.css
------------------------

.exampleChartFirstLook {
    -ms-grid-rows: 260px 260px;
    -ms-grid-columns: 250px 1fr;
    display: -ms-grid;
}

    .exampleChartFirstLook h3 span {
        font-weight: lighter;
        font-family:'Segoe UI Light';
    }

    .exampleChartFirstLook .indicators {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
    }

    .exampleChartFirstLook .revenueChart {
        -ms-grid-column: 2;
        -ms-grid-row: 1;
    }

    .exampleChartFirstLook .revenueProductChart {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
    }

    .exampleChartFirstLook .revenueStoreChart {
        -ms-grid-column: 2;
        -ms-grid-row: 2;
    }

    .exampleChartFirstLook .indicator {
        width: 220px;
        height: 70px;
        background-image: url(images/bggray.png);
        background-repeat: no-repeat;
        margin-top: 5px;
        padding-top: 6px;
        padding-left: 2px;
        margin-bottom: 10px;
    }
    .exampleChartFirstLook .indicator:hover {
        background-image: url(images/bgover.png);
    }
        .exampleChartFirstLook .indicator.selected {
            background-image: url(images/bgblue.png);
        }

    .exampleChartFirstLook .indicatorBlue {
        display: inline-block;
        height: 10px;
        width: 10px;
        background-color: #1f7db8;
        position: relative;
        top: 6px;
        margin-right: 5px;
        margin-left: 10px;
    }

    .exampleChartFirstLook .indicatorOrange {
        display: inline-block;
        height: 10px;
        width: 10px;
        background-color: #FFC500;
        position: relative;
        top: 6px;
        margin-right: 5px;
    }

    .exampleChartFirstLook .red {
        color: red;
    }

    .exampleChartFirstLook .green {
        color: green;
    }

    .exampleChartFirstLook .indicatorText {
        font-size: 22px;
        margin-left: 10px;
        font-weight: bolder;
    }

    .exampleChartFirstLook .indicatorArrow {
        margin-left: 10px;
        font-size: 22px;
        position: relative;
        text-align: right;
    }

3 Answers, 1 is accepted

answered on 16 Jan 2013, 09:17 AM

ChartApp.zip

Hello Jabeer,

I tried the code in a blank app and what I noticed is that the paths to the source files are not updated to fit the different folder structure. On my side I did the following changes, and the charts were shown:

default.html:

<script src="js/default.js"></script>

<link href="css/default.css" rel="stylesheet" />

default.js:

WinJS.UI.Pages.define("/default.html", {

processed: function (element, options) {

In general, a better approach might be to copy only the relevant code, not the whole file content, since your app's structure is usually not the same as that of the QSF app.

For your reference, I am also attaching my blank app that uses the code from your post.

Kind regards,
Tsvetina
the Telerik team

Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.

answered on 16 Jan 2013, 10:22 AM

Thank you thats perfect...
That Problem has been resolved...

Now the problem is,
i wanted to use these components in Visual Studio GridAPp Template

eg:
i want to use chart inside item title1
gauge in item title2 e.t.c

i have all the html pages created for each control....i just wnated to show these pages inside the grid when i clicked the each ItemGrid(tileS)

The Problem is in the default template they created a variable named
var itemContent = "<p>CCCurabitur class vestibulum...................."

and calling from,

var sampleItems = [
{ group: sampleGroups[0], title: "Reports DashBoard", subtitle: "Reports DashBoard", description: itemDescription, content: itemContent , backgroundImage: lightGray },

but it is hardcoded string and cannot replace with html page...
please help me with this...

answered on 16 Jan 2013, 01:01 PM

GridAppWithChart.zip

Hi Jabeer,

One easy approach would be to set only strings defining the wrapper html elements as content. Then, when the detail item gets loaded, you can instantiate the chart and gauge in JavaScript:

data.js

var sampleItems = [

{ group: sampleGroups[0], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: '<div id="chart1"></div>', backgroundImage: lightGray },

{ group: sampleGroups[1], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: '<div id="gauge1"></div>', backgroundImage: darkGray }

];

itemDetail.js, inside the ready function

switch (options.item[0]) {

case "group1":

var barSeriesChartCtrl = new Telerik.UI.RadChart(document.getElementById("chart1"));

var barSeries = new Telerik.UI.Chart.BarSeries();

barSeries.data = [16.7, 20, 15.7, 26.6, 23.5];

barSeries.name = "World";

barSeriesChartCtrl.series.push(barSeries);

barSeriesChartCtrl.refresh();

break;

case "group2":

var rangesPositioningGaugeCtrl = new Telerik.UI.RadRadialGauge(document.getElementById("gauge1"), {

min: 0,

max: 6,

majorUnit: 1,

value: 4,

ranges: [{

from: 5.5,

to: 6,

color: "red"

}, {

from: 4.5,

to: 5.5,

color: "orange"

}]

});

break;

}

To see the result, check the attached sample app. Let us know if it meets your requirements.

Greetings,
Tsvetina
the Telerik team

Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.