Questions on Kendo UI for jQuery Forum

6 answers

114 views

I've been trying to use chart and sparkline.

I have a few questions:
1) I've read in the forum that there should be no difference between the two except visual differences (http://www.telerik.com/forums/sparkline-vs-chart-efficiency-).
This doesn't seem to be the case: http://plnkr.co/edit/12gvS94rPTrR7t35wCCH?p=preview
I've created a chart (http://plnkr.co/edit/12gvS94rPTrR7t35wCCH?p=preview) and then a sparkLine (http://plnkr.co/edit/6LRb16QIgUuoWAbxLuyq?p=preview) with the same configuration (same datasource and same options file) and it gives an error when creating the sparkline but not when creating the chart.
2) How can I get the "sparkLine" effect in a "chart", or if it's easier, how to make the "sparkLine" look as good as a chart?
3) I've read these posts:
http://www.telerik.com/forums/get-chart-coordinates-for-mouse-position
http://www.telerik.com/forums/mouse-position---data---position-are-not-the-same-values
They show how to get mouse position in Silverlight and WPF.
How can I get the mouse coordinates using javascript/jQuery?

Thanks

Sparkline

answered on 10 Apr 2014

1 answer

44 views

Sparkline being clipped

I am raising this in the forums because the support ticket page keeps giving me a 'server had an error' response page.

I was previously running Kendo version 2013.3.1324. I have been developing a column in the Kendo grid to have a sparkline in it's template. This was displaying correctly in that version. I have since upgrade to version 2014.1.318 to attempt to fix an issue we have with the Kendo grid where it freezes (I can explain the details in another support ticket to the Grid team). Now we have upgraded the sparkline is no longer rendering properly. The top and bottom appear to be clipped. I have attached a screenshot showing the problem. I have compared the Html output by both version and something new has been added. It is the svg / defs / clippath / path element. It seems the new version puts a path element in the clippath node, removing this in the development tools on chrome fixes the display.
Why was it added and how can I fix the new version to display correctly.

I am also using angular-kendo.js. Although I believe this wouldn't affect the html rendered. My sparkline options are:
{
chartArea: {
background: "",
width: 110
},
tooltip: {
visible: false,
},
categoryAxis: {
crosshair: {
visible: false,
},
},

seriesDefaults: {
line: {
color: "#5889AD",
width: 1,
},
markers: {
visible: true,
size: 1,
border: {
color: "#d52b1e",
width: 2,
}
}
}
};

Sparkline

answered on 02 Apr 2014

3 answers

34 views

Sparkline DataViz requires DataViz themes in the custom download

I am using the custom download kendo tool to download a single build of kendo for my projects needs. I will run this on tablets so I want the minimal amount of JavaScript. I'm using Sparklines DataViz and noticed that I have to also download DataViz themes to get them to show in IE 10. I wasn't expecting this because the tool appeared to manage dependencies for me. That is, if I select an item and it depends on other items, kendo automatically selects those other items for me.

Image attached.

Sparkline

answered on 28 Mar 2014

1 answer

175 views

Sparkline Height Issues

Hi,

I have struggled for hours to change the sparkline height, with the latest commercial version of Kendo UI Complete v.2014.1.318.

I have poured through the demos and forums and the references to setting line-height inline; none of these solutions work! I have since found a solution, that is font-size, if you set the font-size to the desired height the sparkline indeed takes the correct height. Hopefully this saves someone else wasting hours! Is this a bug or the intended method of setting the height of a sparkline?

<!DOCTYPE html>

<html>

<head>

<title>Test</title>

<script src="scripts/jquery.min.js"></script>

<!--

* Kendo UI Complete v2014.1.318 (http://kendoui.com)

-->

<script src="scripts/kendo.all.min.js"></script>

<!--

* Kendo UI Complete v2014.1.318 (http://kendoui.com)

*

-->

<script src="scripts/kendo.dataviz.min.js"></script>

<style>

.k-sparkline span{

font-size: 100px;

}

</style>

</head>

<body>

<span id="spark"></span>

<script type="text/javascript">

jQuery(document).ready(function () {

jQuery("#spark").kendoSparkline({

type: "column",

data: [

16, 17, 18, 19, 20, 21, 21, 22, 23, 22,

20, 18, 17, 17, 16, 16, 17, 18, 19, 20,

21, 22, 23, 25, 24, 24, 22, 22, 23, 22,

22, 21, 16, 15, 15, 16, 19, 20, 20, 21

]

});

</script>

</body>

</html>

Regards,
Nomdeplume

Sparkline

answered on 21 Mar 2014

1 answer

90 views

Sparkline Width Issues - Date Axis

I'm setting the datasource of the sparkline to a json result which has 365 days of data. I plan to use the sparkline to aggregate the data and plot a smaller subset of data points as 365 is not something you'd want to plot in a small area. I set the baseUnit of the date categoryAxis to months so it will plot 12 points, which it does, but the width is out of control... it spans way beyond the confines of my plot area.

I think the problem lies with the width algorithm of sparklines when using baseUnits/aggregate w/ a date category axis. Even though we are only plotting 12 points, the sparkline behaves as if it is plotting 365. Documentation states that, "The width of line, area and column sparklines is determined by the number of data points". Help me understand this... other charts are responsive yet the sparkline is not? The sparkline is not taking the final number of datapoints after baseUnits/aggregates are applied with the date axis.

$("#sparkQtyVehicles").kendoSparkline({

series: [{

name: "QtyVehicles",

aggregate: "avg",

type: "column",

field: "QtyVehicles"

}],

categoryAxis: {

type: "date",

baseUnit: "months",

field: "Date"

},

tooltip: {

visible: true,

shared: false,

template: $('#sparkQtyVehiclesTemplate').html()

},

theme: "bootstrap"

});

Sparkline

answered on 28 Feb 2014

2 answers

287 views

Bar Chart Label Overflow Hidden

I'm experiencing a difference between IE and Chrome with the label overflow on the charts. I'm using the sparkline to create a few barcharts in a table, and the labels are being cut off when viewing it in Chrome, overflow is visible in IE10.

Attached are some screenshots. The bottom bar is 100%, the value = valueAxis.max. The labels are set to "outsideEnd". I've tried "insideEnd" which works when the value is 100%, but when the bar is 0% the "insideEnd" labels are cut off. Not sure if I can make it conditional, display "insideEnd" if bar value is >50% and "outsideEnd" if bar value is <= 50%...

DataViz version is Q3 2013 1119.

The chart hierarchy is in:
<table><tr><td><div><span id="sparkline"></span></div></td></tr></table>
I've tried setting overflow:visible on all of the parent elements.

Sparkline

answered on 15 Jan 2014

1 answer

182 views

Dynamically defining the tooltip format

Hi, I'm trying to generate a ListView with a sparkline for each item. Each sparkline is associated with a metric that is provided by data source. Each metric has the information about the service that provides its data and the datatype. I'm using the datatype to define the format of the tooltip. However, the tooltip format function is bind only when each value of the series and not in the sparkline definitio. So, it uses the information of the last metric for all the sparklines. How I can use the correct datatype to set the tooltip?

This is my code:

01.createChart: function (e) {

02. var list = e.sender;

03. var data = list.dataSource.data();

04. for (var i = 0; i < data.length; i++) {

05. var item = list.wrapper.find("[data-uid='" + data[i].uid + "']");

06. var chart = item.find(".chart");

07. var metric = data[i];

08. this.metrics[data[i].uid] = metric.MetricType;

09. chart.kendoSparkline({

10. type: "column",

11. dataSource: new kendo.data.DataSource({

12. transport: {

13. read: {

14. url: metric.MonthService,

15. dataType: "json"

16. },

17. parameterMap: function (options, operation) {

18. if (operation === "read") {

19. options.hotelId = 2; // _model.get('hotelId');

20. options.year = 2013; //_model.get('date').getYear() + 1900;

21. options.month = 7; //_model.get('date').getMonth() + 1;

22. return options;

23. }

24. return options;

25. }

26. }

27. }),

28. series: [{

29. type: 'column',

30. field: metric.MonthValue,

31. color: '#ff0000',

32. negativeColor: '#0099ff',

33. metricType: metric.MetricType // Hack? or Extension

34. }],

35. tooltip: {

36. format: function () {

37. switch (metric.MetricType) {

38. case 0: // Graduacion

39. return "{0:N2}";

40. break;

41. case 1: // Cantidad

42. return "{0:N0}";

43. break;

44. case 2: // Moneda

45. return "{0:C2}";

46. break;

47. case 3: // Indice

48. return "{0:N2}";

49. break;

50. case 4: // Porcentaje

51. return "{0:P2}";

52. break;

53. case 5: //Clasificacion

54. return "{0}";

55. break;

56. }

57. },

58. visible: true,

59. shared: false

60. }

61. });

62. }

In line 14 I set the url of the service based on the metric information. An in line 37 I trying to use the same approach for defining the tooltip but doesn't work. The last metric info is used for all the tooltips.

Thanks in advance.

Sparkline

answered on 21 Dec 2013

8 answers

217 views

Sparkline - two tooltip styles

Kendo version v2013.3.1119

I have two tooltip types which are appearing on two different sets of sparkline charts. I cant work why they are one way for one and another way for the other set. They charts are displaying using the mvvm patten and pretty much copies of each other apart from the using a different 'field' scope.

1. The common ones are displaying a tooltip in more of a table format (to n amount of series in in the sparkline) while hovering the mouse over the plane:
---------------------------------------------------
| series name | custom template |
| series name | custom template |
---------------------------------------------------
^ the only part of the template i provide is for the custom template. This is easy to use on hovering over, and on tablet as one doesn't have to be precise on hovering or clicking on the series to see the values along the axis.

2. The second (more simple) type of tooltip im getting is more like those found on any of the chart tooltips. But are much harder show as it requires hovering over the series values rather than anywhere along the plane.
----------------------------
| custom template |
----------------------------
^ missing the grid like pattern, and series name has gone walkies, and will only show one series at a time. This makes it hard to compare the many series values together.
This is a pain for tablet use however as selecting that 1px line (of a 40px height) on the sparkline is a frustrating challenge.

Can i ask what is driving its choice about using the two tooltip styles? And then be able to compel it to do what is most appropriate for the scenario.

To me these are pretty much identical, first the sparkline displaying the grid style tooltop:

<div data-role="sparkline"

data-series="[{ 'name': 'Orders', 'type': 'column', 'field': 'Combined.OrderCount' }]"

data-tooltip="{ template: $('#rangeTooltipTemplate').html() }"

data-bind="source: dataSource">

</div>

@using (Html.BeginScripts("Daily.Range.Order.Count"))

{

<script type="text/html" id="rangeTooltipTemplate">

<div>#: kendo.toString(dataItem.Date, 'd')# (#: kendo.toString(dataItem.Date, 'ddd') #)</div>

<div>Count: #: value #</div>

</script>

}

Second the one which is displaying the more simple tooltip. My eyes have pretty much given up on the what is different between the two. The data & schema going into both are identical. The kendo data source is effectively equal and only describes the Date field as a date. There would be different aggregates depending on the page loading:

<div data-role="sparkline"

data-theme="bootstrap"

data-series="[{ 'name': 'Out the door', 'type': 'line', 'field': 'Performance.AvgOutTheDoor' }]"

data-tooltip="{ template: $('#PerformanceToolTipOutTheDoor').html() }"

data-bind="source: dataSource, visible: showCharts">

</div>

@using (Html.BeginScripts("Performance.Range.OutDoorTime", Area.Foot))

{

<script id="PerformanceToolTipOutTheDoor" type="text/template">

<div>#: kendo.toString(dataItem.Date, 'd')# (#: kendo.toString(dataItem.Date, 'ddd') #)</div>

<div>Out the door: #: value #</div>

</script>

}

Any ideas?

Thanks,
Matt

Sparkline

answered on 06 Dec 2013

0 answers

81 views

Important: Tooltips not visible in Q3'13 release

Hello,

A defect is preventing the sparkline tooltips from showing in the official release (v. 2013.3.1119) .
This issue is fixed in internal build v. 2013.3.1121 and later.

Recommended temporary workarounds:

Disable shared tooltips. This will not negatively affect Sparklines with only one series.

$("#hum-log").kendoSparkline({
type: "area",
data: [71, 70, 69],
tooltip: {
format: "{0} %",
shared: false
}
});

Set series names on Sparklines with more than one series:

$("#sparkline").kendoSparkline({
type: "area",
series: [{
name: "Series one",
data: [71, 70, 69, 68, 65, 60, 55, 55, 50, 52]
}, {
name: "Series two",
data: [73, 72, 72, 71, 68, 63, 57, 58, 53, 55]
}],
tooltip: {
format: "{0} %"
}
});

Apologies for the caused inconvenience.

Sparkline

asked on 21 Nov 2013

1 answer

114 views

Sparkline chart height not getting set and unable to display baseline + notes(icons for line information)

I am facing an issue with sparkline chart's height.
It is not set by height,min-height,line-height.
Also the labels and base axis are also not displayed.

Sparkline