or
1 answer
84 views
Can I have a sample application with Angular-Kendo Sparkline control under Angular ng-repeat directive.?
Thanks,
K K
Thanks,
K K
Burke
Telerik team
answered
on
26 Jul 2013
4 answers
66 views
I have several sparklines in my HTML and they're being populated by a web service. It seems that they don't always fill out; I refresh and a few fill out, I refresh again and others fill out. The only way I've been able to fill them all out is by displaying an 'ALERT' for every function called. It seems it's a problem with a refresh.
Is it possible that I'm calling the web service too many times and it has become erratic?
Here's the code:
Is it possible that I'm calling the web service too many times and it has become erratic?
Here's the code:
<!DOCTYPE html><html><head> <title></title> <link href="styles/kendo.common.min.css" rel="stylesheet" /> <link href="styles/kendo.rtl.min.css" rel="stylesheet" /> <link href="styles/kendo.default.min.css" rel="stylesheet" /> <link href="styles/kendo.dataviz.min.css" rel="stylesheet" /> <link href="styles/kendo.dataviz.default.min.css" rel="stylesheet" /> <script src="js/jquery.min.js"></script> <script src="js/kendo.all.min.js"></script> </head><body> <div> <table class="history" > <tr> <td class="style7">Department C 1</td> <td class="spark" style="width: 210px;"><span id="hum-log"></span></td> <td class="style6">Department C 1</td> <td class="spark" style="width: 210px;"><span id="press-log" style="line-height: 60px"></span></td> </tr> <tr> <td class="style7">Department C 2</td> <td class="spark" style="width: 210px;"><span id="2c-log" style="line-height: 60px"></span></td> <td class="style6">Department C 2</td> <td class="spark" style="width: 210px;"><span id="temp-log" style="line-height: 60px"></span></td> </tr> <tr> <td class="style7">Department C 3</td> <td class="spark" style="width: 210px;"><span id="3c-log" style="line-height: 60px"></span></td> </tr> <tr> <td class="style7">Department C 4</td> <td class="spark" style="width: 210px;"><span id="4c-log" style="line-height: 60px"></span></td> </tr> <tr> <td class="style7">Department C 5</td> <td class="spark" style="width: 210px;"><span id="5c-log" style="line-height: 60px"></span></td> </tr> </table> </div> <script> function createSparklinesDepartment1C() { // Binding directly to an array alert('Entered'); var rowDataSource = new kendo.data.DataSource({ transport: { read: { url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=1", type: 'GET', jsonpCallback: 'callback', dataType: "jsonp" } } }); $("#press-log").kendoSparkline({ dataSource: rowDataSource, series: [{ type: "area", field: "count", color: "Green" }] }); //second one // Third one // Binding directly to an array } $(document).ready(createSparklinesDepartment1C); $("#example").bind("kendo:skinChange", createSparklinesDepartment1C); </script> <script> function createSparklinesDepartment2C() { alert('Entered 2c'); var rowDataSource2 = new kendo.data.DataSource({ transport: { read: { url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=2", type: 'GET', jsonpCallback: 'callback', dataType: "jsonp" } } }); $("#temp-log").kendoSparkline({ dataSource: rowDataSource2, series: [{ type: "area", field: "count", color: "Red" }] }); } $(document).ready(createSparklinesDepartment2C); $("#example").bind("kendo:skinChange", createSparklinesDepartment2C); </script> <script> function createSparklinesDepartment1C() { alert('Entered 3c'); var rowDataSource3 = new kendo.data.DataSource({ transport: { read: { url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=1", type: 'GET', jsonpCallback: 'callback', dataType: "jsonp" } } }); $("#hum-log").kendoSparkline({ dataSource: rowDataSource3, series: [{ type: "area", field: "count", color: "Black" }] }); } $(document).ready(createSparklinesDepartment1C); $("#example").bind("kendo:skinChange", createSparklinesDepartment1C); </script><!-- The new ones --> <script> function createSparklinesDepartment2C() { alert('Entered 3c'); var rowDataSource3 = new kendo.data.DataSource({ transport: { read: { url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=2", type: 'GET', jsonpCallback: 'callback', dataType: "jsonp" } } }); $("#2c-log").kendoSparkline({ dataSource: rowDataSource3, series: [{ type: "area", field: "count", color: "Blue" }] }); } $(document).ready(createSparklinesDepartment2C); $("#example").bind("kendo:skinChange", createSparklinesDepartment2C); </script> <script> function createSparklinesDepartment3C() { alert('Entered 3c'); var rowDataSource3 = new kendo.data.DataSource({ transport: { read: { url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=3", type: 'GET', jsonpCallback: 'callback', dataType: "jsonp" } } }); $("#3c-log").kendoSparkline({ dataSource: rowDataSource3, series: [{ type: "area", field: "count", color: "Purple" }] }); } $(document).ready(createSparklinesDepartment3C); $("#example").bind("kendo:skinChange", createSparklinesDepartment3C); </script> <script> function createSparklinesDepartment4C() { alert('Entered 3c'); var rowDataSource3 = new kendo.data.DataSource({ transport: { read: { url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=4", type: 'GET', jsonpCallback: 'callback', dataType: "jsonp" } } }); $("#4c-log").kendoSparkline({ dataSource: rowDataSource3, series: [{ type: "area", field: "count", color: "Orange" }] }); } $(document).ready(createSparklinesDepartment4C); $("#example").bind("kendo:skinChange", createSparklinesDepartment4C); </script> <script> function createSparklinesDepartment5C() { alert('Entered 3c'); var rowDataSource3 = new kendo.data.DataSource({ transport: { read: { url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=5", type: 'GET', jsonpCallback: 'callback', dataType: "jsonp" } } }); $("#5c-log").kendoSparkline({ dataSource: rowDataSource3, series: [{ type: "area", field: "count", color: "Magenta" }] }); } $(document).ready(createSparklinesDepartment5C); $("#example").bind("kendo:skinChange", createSparklinesDepartment5C); </script> <style scoped> .chart-wrapper { width: 200px; height: 100%; margin: 0 auto 30px auto; padding: 0 0 30px 0; font-weight: bold; text-transform: uppercase; } .climate, .temperature, .conditioner { margin: 0 30px; padding: 30px 0 0 0; } h1 { margin-bottom: 20px; font-size: 1.2em; } .history { border-collapse: collapse; width: 480px; height: 248px; } .history td { padding: 0; } .history td.item { text-align: right; line-height: normal; vertical-align: bottom; } .history td.spark { text-align: left; line-height: 50px; padding: 0 5px; } .history td.value { font-size: 2em; font-weight: normal; line-height: normal; vertical-align: bottom; } .history td.value span { font-size: .5em; vertical-align: top; } .stats { text-align: center; } #temp-range { width: 400px; line-height: 50px; } .style6 { width: 59px; font-family: Calibri; } .style7 { width: 100px; font-family: Calibri; } </style></body></html>
Vaughn Myers
Top achievements
Rank 1
Rank 1
answered
on
22 Jul 2013
1 answer
71 views
I'm trying to figure out how to bind the data to Kendo Sparkline through AngularJS, which works fine with normal HTML page by including all the required kendo styles and scirpting files to that page. Here is the original code that I have been working...
HTML Code
<table class="table">
<tbody>
<tr>
<td>
<span id="press-log"></span>
</td>
</tr>
</tbody>
</table>
Angular Controller Code:
<script type="text/javascript">
angular.module('demoApp').controller('cc', ['$scope', function ($scope) {
$scope.createSparklines = function () {
$("#press-log").kendoSparkline({
type: "area",
data: [
71, 70, 69, 68, 65, 60, 55, 55, 50, 52,
73, 72, 72, 71, 68, 63, 57, 58, 53, 55,
63, 59, 61, 64, 58, 53, 48, 48, 45, 45,
63, 64, 63, 67, 58, 56, 53, 59, 51, 54
]
});
}
$scope.createSparklines();
} ]);
</script>
The Sparkline doesn't fires with the static values and even with an array object, Can you help me on this.
HTML Code
<table class="table">
<tbody>
<tr>
<td>
<span id="press-log"></span>
</td>
</tr>
</tbody>
</table>
Angular Controller Code:
<script type="text/javascript">
angular.module('demoApp').controller('cc', ['$scope', function ($scope) {
$scope.createSparklines = function () {
$("#press-log").kendoSparkline({
type: "area",
data: [
71, 70, 69, 68, 65, 60, 55, 55, 50, 52,
73, 72, 72, 71, 68, 63, 57, 58, 53, 55,
63, 59, 61, 64, 58, 53, 48, 48, 45, 45,
63, 64, 63, 67, 58, 56, 53, 59, 51, 54
]
});
}
$scope.createSparklines();
} ]);
</script>
The Sparkline doesn't fires with the static values and even with an array object, Can you help me on this.
Burke
Telerik team
answered
on
19 Jul 2013
2 answers
112 views
Hi there,
After successfully creating a sparkline with localdata, i am trying to then change the data in the spark line and refresh it.
I have tried setting the data directly and then using refresh as well as using the setDataSource method but have had no luck so far.
I have created an example in the link below which demonstrates the issue.
So when you click the "refresh new data" the data in the sparkline does not change.
http://jsbin.com/atezoj/36/edit
Is it possible to do this or do i need to dispose of the sparkline and create a new one with new data?
Thanks,
Rob
After successfully creating a sparkline with localdata, i am trying to then change the data in the spark line and refresh it.
I have tried setting the data directly and then using refresh as well as using the setDataSource method but have had no luck so far.
I have created an example in the link below which demonstrates the issue.
So when you click the "refresh new data" the data in the sparkline does not change.
http://jsbin.com/atezoj/36/edit
Is it possible to do this or do i need to dispose of the sparkline and create a new one with new data?
Thanks,
Rob
1 answer
49 views
I'm trying to figure out how to change the height of a basic sparkline. I've tried the following:
But it did not seem to make a difference.
01.$("#hum-log").kendoSparkline({02. type: "area",03. data: [04. 71, 70, 69, 68, 65, 60, 55, 55, 50, 52,05. 73, 72, 72, 71, 68, 63, 57, 58, 53, 55,06. 63, 59, 61, 64, 58, 53, 48, 48, 45, 45,07. 63, 64, 63, 67, 58, 56, 53, 59, 51, 5408. ],09. height: 50,10. tooltip: {11. format: "{0} %"12. }13. });
Iliana Dyankova
Telerik team
answered
on
26 Jun 2013
1 answer
95 views
General sparklines question:
We're considering implementing sparklines in some of our forms, where we currently are implementing various DataViz charts (e.g. line, bar, area, etc.). One thing that's been pointed out is that we can implement spark lines in a way now by rendering a small regular chart configured without the axes or grid lines visible.
Besides some visual differences, are there any performance/overhead differences between sparklines and full charts? Or do they pretty much use the same engine for rendering?
We're considering implementing sparklines in some of our forms, where we currently are implementing various DataViz charts (e.g. line, bar, area, etc.). One thing that's been pointed out is that we can implement spark lines in a way now by rendering a small regular chart configured without the axes or grid lines visible.
Besides some visual differences, are there any performance/overhead differences between sparklines and full charts? Or do they pretty much use the same engine for rendering?
T. Tsonev
Telerik team
answered
on
21 May 2013
2 answers
94 views
Is there a way to set the rotation of the tooltip apart from the rotation of the chart?
I rotated my chart 90 degrees, to make it vertical, which works fine. However the tooltip, is now sideways and I can't see a way to rotate the tooltip as well to be horizontal again. If it is not possible I can just disable the tooltip, although I would prefer to have it if possible. Thanks
I rotated my chart 90 degrees, to make it vertical, which works fine. However the tooltip, is now sideways and I can't see a way to rotate the tooltip as well to be horizontal again. If it is not possible I can just disable the tooltip, although I would prefer to have it if possible. Thanks
1 answer
86 views
I want to use the Sparkline functionality within a dashboard web page using the DotNetNuke 6.2 framework.
When I use the sample code snippet below within the DNN framework the height of the sparkline is rendered as 14px. When I use the same code in a stand alone html file it renders at the specified 50px. There are no javascript errors thrown in either case.
My only thought is that an internal error is occurring when attempting to find the height and the default render height is 14px. Debugging the spark line java script using the minimized js files is not working for me.
HTML to render:
<div class='k-content' style='position: relative; width:400px; height:275px;'><table style='height: 100%; vertical-align: top;'> <tr> <td style="width:150px; text-align:middle; line-height: 50px;"> <span id='htmlsparkline_32ac' style="width: 150px; height: 50px; "></span> </td> <td style="width:40%; text-align:left;"><span class='ads-summaryvalue'>56795</span> <span>Refund</span></td> </tr></table></div><script type="text/javascript"> try { $('#htmlsparkline_32ac').kendoSparkline({ data: [1069, 8792, 7078, 6355, 8078, 8066, 9293, 3296, 7559, 56795], type: 'area', theme: 'black' }); } catch (e) { alert('SparkError: ' + e.message); }</script>Code Rendered by kendoSparkline, starting on line 02.
01.<span class="k-sparkline" id="htmlsparkline_32ac" style="width: 150px; height: 50px; position: relative; -ms-touch-action: double-tap-zoom pinch-zoom;" data-role="sparkline">02.<span style="width: 150px; height: 14px;">03.<!--?xml version='1.0' ?-->04.<svg xmlns="http://www.w3.org/2000/svg" style="left: -0.81px; top: -0.83px; display: inline; position: relative;" width="150px" height="14px" version="1.1">05.<defs id="k10027" />06.<path style="display: block;" fill="#3d3d3d" fill-opacity="1" stroke="" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="1" stroke-width="0" d="M 0 0 L 150 0 L 150 14 L 0 14 Z" />07.<path style="display: block;" fill="none" fill-opacity="1" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="1" stroke-width="0.1" d="M 2 2 L 147 2 L 147 11 L 2 11 Z" />08.<path id="k10026" style="display: none;" fill="none" fill-opacity="1" stroke="#8e8e8e" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="1" stroke-width="1" d="M 2 2 L 2 11" />09.<path id="k10000" style="display: block;" fill="#fff" fill-opacity="0" stroke="" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="1" d="M 2 2 L 147 2 L 147 11 L 2 11 Z" data-model-id="k10001" />10.<g id="k10002"><g>11.<path id="k10024" style="display: block;" fill="#0081da" fill-opacity="0.4" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="1" d="M 2 11 L 2 10.863 L 18.111 9.87 L 34.222 10.09 L 50.333 10.183 L 66.444 9.961 L 82.556 9.963 L 98.667 9.805 L 114.778 10.576 L 130.889 10.028 L 147 3.698 L 147 11" data-model-id="k10025" />12.<path style="display: block;" fill="none" fill-opacity="1" stroke="#0081da" stroke-linecap="butt" stroke-linejoin="round" stroke-opacity="1" stroke-width="0.5" d="M 2 10.863 L 18.111 9.87 L 34.222 10.09 L 50.333 10.183 L 66.444 9.961 L 82.556 9.963 L 98.667 9.805 L 114.778 10.576 L 130.889 10.028 L 147 3.698" data-model-id="k10025" />13.</g></g>14.</svg>15.</span>16.<div class="k-tooltip" style="font: 12px/normal Arial,Helvetica,sans-serif; border: 1px solid rgb(0, 129, 218); left: 34px; top: -15px; display: none; position: absolute; font-size-adjust: none; font-stretch: normal; opacity: 1; background-color: rgb(0, 129, 218);">17.<table><tbody><tr><th colspan="2"></th><tr><td>7078</td></tr></tbody></table>18.</div>19.</span>On line 2 and 4 the height is set to 14px.
Any help would be appreciated.
Alexander Valchev
Telerik team
answered
on
05 Apr 2013
