Questions on Kendo UI for jQuery Forum

1 answer

319 views

Actually we have kendoUi in angularjs project. which ic giving error in developer console like server not responding 404 error for webcomponentsicon.ttf and webcomponentsicon.woff. because of this icons are not loading. can anyone please help me to clear this issue

ActionSheet

Application

AutoComplete

Hierarchical Data Source

answered on 15 Jun 2022

1 answer

30 views

Column sparkline from string "1,1,1,-1,-1,-1,1,1"

Hi

in a kendo grid column I'm trying to render column sparklines from this markup:

in grid.dataBound I do this:

var $spans = $(".compliance-dev", "#grid");

$.each($spans, function() {
var $span = $(this);
var ds = $span.data("source").split(',');
$span.kendoSparkline({
data: ds,
//series: [{
// type: "column",
// color: "#ff0000",
// negativeColor: "#0099ff"
//}]
});
});

This renders into a sparkline of type line: https://dojo.telerik.com/UsUluTaK

How do I render the sparkline as a column graph?

/Morten

Sparkline

answered on 28 Aug 2018

1 answer

301 views

Sparkline tooltip format

I am finding that the tooltip shown is not what is produced by the tooltip.template.

https://dojo.telerik.com/utAxum

Sparkline

answered on 15 Feb 2018

11 answers

668 views

Sparkline Height and Width issues

Hi,
I am having trouble setting the height and width of a sparkline.

Simplified code:
@{
if (Model.IsTrue) <-- boolean
{
var readUrl = Url.Action("Action", "Controller", new { id= Model.ID});
@(Html.Kendo().Sparkline()
.Name("sparkline-risk-score")
.HtmlAttributes(new { style = "width: 500px; height:400px;" })
.ChartArea(ca => ca.Background(""))
.DataSource(ds => ds.Read(read => read.Url(readUrl)))
.Series(series => series.Line("Risk Score").Color("#C0504D"))
)
}
}

Data from controller method:
[0.5570,0.5570,0.5570,0.5570,0.5570,0.5570,0.5570,0.5570,0.5570]

Output:
http://i.imgur.com/VvpU8Vx.png

Hopefully I'm not missing something really obvious.
Thanks!

Sparkline

answered on 07 Jan 2017

1 answer

103 views

How to get SparkLine to update when changing DataSource URL?

I have a Kendo UI Sparkline as part of my dashboard. I have a dropdown control that has dates in it and I want my Sparkline to change when the date is changed on the date dropdown. I've checked the URL of the datasource and it updates when the dropdown is changed, however the sparkline doesn't make the API call when I perform a datasource sync. How do I get the sparkline to update? I'm trying to mimic the functionality present in the Northwind sample app located here: http://demos.telerik.com/aspnet-mvc/html5-dashboard-sample-app/

Here is my code:

<div class="row">

<div class="col-md-12">

<input type="search" id="sparklineDropdown" style="width: 200px;float:right;"/>

</div>

<div class="row">

<div id="RevenueContainer" class="col-md-4">

<h4>REVENUE</h4>

<p><span style="font-weight:bold;font-size:1.5em;" id="RevenueLabel"></span></p>

<span id="Revenue" class="k-sparkline" style="width: 100%;line-height: 175px;"></span>

<script>

</script>

</div>

<div id="WorkOrderContainer" class="col-md-4">

<h4>WORK ORDERS</h4>

<p><span style="font-weight:bold;font-size:1.5em;" id="WorkOrderLabel"></span></p>

<span id="WorkOrders" class="k-sparkline" style="width: 100%;line-height: 175px;"></span>

</div>

<div class="col-md-4">

<script>

function createChart() {

...

}

$(document).ready(createChart);

$(document).bind("kendo:skinChange", createChart);

</script>

</div>

<div id="grid"></div>

<script>

$(document).ready(function() {

var data = [

{ text: "This month", value: "0" },

{ text: "September 2016", value: "1" },

{ text: "August 2016", value: "2" },

{ text: "July 2016", value: "3" }

];

$("#sparklineDropdown").kendoDropDownList({

dataTextField: "text",

dataValueField: "value",

dataSource: data,

change: onChange

});

function onChange() {

var d = new Date();

d.setMonth(d.getMonth() - $("#sparklineDropdown").val());

var wosparkline = $("#WorkOrders").data("kendoSparkline");

wosparkline.dataSource.transport.options.read.url = "/api/workorder/workordersbymonth/all/" + d.getFullYear() + "/" + (d.getMonth() + 1);

wosparkline.dataSource.sync();

}

function createWOSparklines() {

var workorderDataSource = new kendo.data.DataSource({

type: "json",

transport: {

read: {

url: "/api/workorder/workordersbymonth/all/2016/10",

contentType: "application/json"

}

},

schema: {

data: "Data",

total: "Total",

model: {

fields: {

Date : { type: "date" },

WorkOrders: { type: "number" }

}

});

$("#WorkOrders").kendoSparkline({

theme: "metro",

series: [{

type: "column",

field: "WorkOrders",

color: "#1996e4",

gap: 0.2,

categoryField: "Date",

aggregate: "sum"

}],

categoryAxis: [{

type: "date",

baseUnit: "days"

}],

dataSource: workorderDataSource,

autoBind: true,

dataBound: function onDataBound(e) {

$('#WorkOrderLabel').text(e.sender.dataSource.total());

}

});

}

function createSparklines() {

// Create

var revenueDataSource = new kendo.data.DataSource({

type: "json",

transport: {

read: {

url: "/api/workorder/revenuebymonth/all/2016/10",

contentType: "application/json"

}

},

schema: {

data: "Data",

total: "Total",

model: {

fields: {

Date: { type: "date" },

Revenue: { type: "number" }

}

});

$("#Revenue").kendoSparkline({

theme: "metro",

series: [{

type: "column",

field: "Revenue",

color: "#1996e4",

gap: 0.2,

categoryField: "Date",

aggregate: "sum"

}],

categoryAxis: [{

type: "date",

baseUnit: "days"

}],

dataSource: revenueDataSource,

tooltip: {

format: "{0:c2}"

},

autoBind: true,

dataBound: function onDataBound(e) {

$('#RevenueLabel').text("$" + e.sender.dataSource.total() + ".00");

}

});

}

$(document).ready(createSparklines);

$(document).bind("kendo: skinChange", createSparklines);

$(document).ready(createWOSparklines);

$(document).bind("kendo: skinChange", createWOSparklines);

</script>

Sparkline

answered on 01 Nov 2016

1 answer

49 views

sparkline doesn't fill the space that it is given

Example: http://dojo.telerik.com/AQEWo

I am trying to get a sparkline to be consistent in the amount of space that it uses. The problem can be seen when a sparkline only has two points, it is significantly shorter than the sparkline with many points.

I would expect that the two sparklines be of equal lengths.

Sparkline