or

$("#change-in-temperature").kendoChart({ //dataSource: stocksDataSource, series: [{ name: "Change in temperature", data: [45, 52, 59, 50, 57] }], autoBind: false, seriesDefaults: { type: "line", overlay: { gradient: "none" }, markers: { visible: false }, majorTickSize: 0, opacity: .8 }, seriesColors: defaultSeriesColors, valueAxis: { plotBands: [{ from: -100, to: 0, color: "#000", opacity: 0.9 }], min: -100, max:100, line: { visible: false }, title:{ text: "Change in temperature", color: "#727f8e" }, labels: { format: "{0}", skip: 2, step: 2, color: "#727f8e" }, axisCrossingValue: -100, majorUnit: 10, }, categoryAxis: { //field: "date", categories: [ new Date("2011/12/30"), new Date("2011/12/31"), new Date("2012/01/01"), new Date("2012/01/02"), new Date("2012/01/03") ], labels: { format: "MM/dd", color: "#727f8e" }, line: { visible: false }, majorTicks: { visible: false }, majorGridLines: { visible: false } }, legend: { visible: false }, tooltip: { visible: true, format: "{0:NO}", opacity: 1 }, });@(Html.Kendo().Chart<InfoSource.Requests.Models.Graph>() .Name("myallocation") .Title(title => title .Text("MY ALLOCATION") .Font("16px Oswald") ) .Theme("Silver") .Legend(legend => legend .Visible(false) ) .ChartArea(chartArea => chartArea .Background("transparent") ) .DataSource(ds => ds .Read(read => read.Action("dMyAllocation", "Dashboard", new { area = "InfoSource.Metrics" })) ) .Series(series => { series.Pie(model => model.Value, model => model.Label, null, model => model.Label == "Unassigned" ? true : false) .Labels(labels => labels .Template("${dataItem.Label}") .Visible(true).Position(ChartPieLabelsPosition.InsideEnd) ); }) .Events(events => events .SeriesClick("myallocationClick") ) .Tooltip(tooltip => tooltip .Visible(true) .Template("${dataItem.Label} - ${value}%") ) .HtmlAttributes(new { style = "max-height: 300px;" }) )<div id="CustomerListPage" style="min-width: 500px"> <div style="width: 600px; margin-left: auto; margin-right: auto; text-align: right">Include Inactive?<input id="IncludeInactiveCheckBox" type="checkbox" data-bind="checked: includeInactive, events: {click: includeInactiveChanged}" /></div> <div id="CustomerListGrid" style="width: 600px; height:300px; margin-left: auto; margin-right: auto; margin-top: 10px" data-role="grid" data-selectable="row" data-columns='[{"field":"id", "title":"ID", "width":50}, {"field":"FullName", "title":"Name"}, {"field":"MailingAddressCity", "title":"City", "width":150}, {"field":"MailingAddressState", "title":"ST", "width":50}]' data-bind="source: customers"></div></div>var CustomerListViewModel = kendo.observable({ // properties customers: [], includeInactive: false, includeInactiveChanged: function (val) { this.load(); }, load: function () { var self = this; var dto = new DTO(true, '', new Object({ includeInactive: this.get("includeInactive") })); $.ajax('SysUserWebService.asmx/GetCustomerList', { data: JSON.stringify({ dto: dto }), type: 'post', contentType: 'application/json', success: function (result) { if (result.d.success) { self.set('customers', result.d.payload); } else { alert(result.d.message); }; } }); } });// routes the application based on hash changesvar HashChange = function () { HideAllPages(); var query = location.hash.split("?"); var hash = query[0]; switch (hash) { case '': location.hash = '#MainMenu'; break; case '#MainMenu': $('#MainMenuPage').show(); break; case '#CustomerList': $('#CustomerListPage').show(); kendo.bind($('#CustomerListPage'), window.CustomerListViewModel); window.CustomerListViewModel.load(); break; case '#CrewList': $('#CrewListPage').show(); break; case '#History': $('#HistoryPage').show(); break; };};