araña

para best in class

by Yolanda Robles

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>

<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<div class="chartContainer">
        <div class="chart">
            <div id="chartRadialLine"></div>
        </div>
    </div>
    <table>
        <tr>
            <td id="radialLegend"></td>
        </tr>
    </table>
    <button type="button" class="button">Cambiar</button>
      
      
      
    </submit>

CSS

h2
        {
            width: 100%;
            text-align: center;
        }
        
        .chart
        {
            position: relative;
            float: left;
            margin-right: 10px;
        }

JavaScript

var data = [
{ "Time": "Tapón", "NewYorkCityTemp": 81, "PhiladelphiaTemp": 87, "BestInClass":75.6 },
{ "Time": "KrKp", "NewYorkCityTemp": 89, "PhiladelphiaTemp": 75, "BestInClass":79.6 },
{ "Time": "Botella", "NewYorkCityTemp": 73, "PhiladelphiaTemp": 83, "BestInClass":92 },
{ "Time": "Punto Verde", "NewYorkCityTemp": 61, "PhiladelphiaTemp": 86, "BestInClass":81.3 }
];

var data2 = [
{ "Time": "Tapón", "NewYorkCityTemp": 70, "PhiladelphiaTemp": 83, "BestInClass":62 },
{ "Time": "KrKp", "NewYorkCityTemp": 63, "PhiladelphiaTemp": 91, "BestInClass":90 },
{ "Time": "Botella", "NewYorkCityTemp": 94, "PhiladelphiaTemp": 81, "BestInClass":85 },
{ "Time": "Punto Verde", "NewYorkCityTemp": 65, "PhiladelphiaTemp": 63, "BestInClass":88 }
];


$(function () {

$('.button').click(function () {
		
    alert(data[0]["BestInClass"]);
    data[0]["BestInClass"] = 89;
    
    $("#chartRadialLine").igDataChart("notifyClearItem");
    
    //createChart("#chartRadialLine", "radialLine", data2);

}); 



            function createChart(selector, seriesType, data) {
                $(selector).igDataChart({
                    width: "600px",
                    animateSeriesWhenAxisRangeChanges:true,
                    height: "400px",
                    dataSource: data,
                    legend: { element: "radialLegend" },
                    //title: "New York City vs. Philadelphia",
                    //subtitle: "A comparison of daily temperatures",
                    axes: [{
                        name: "angleAxis",
                        type: "categoryAngle",
                        label: "Time",
                        startAngleOffset: -90,
                        interval: 1
                    }, {
                        name: "radiusAxis",
                        type: "numericRadius",
                        innerRadiusExtentScale: .1,
                        maximumValue: 95,
                        minimumValue: 60,
                        interval: 5,
 ...