Telerik Forums
Kendo UI for jQuery Forum
0 answers
33 views

We have a page with many spark lines, for example:

As the user hovers over the chart we have a toot tip display as you can see in the example above.  The user can click any of the charts at the point that they want to drill into more detail.  For example, in the example above the user has moved the mouse over the Corrective Work Orders spark line and then to the 16th week of 2022.  The tooltip is telling the user there are 55 work orders in that week.

The problem: The click event is not always in line with the tool tip.  In the above example what actually loaded was the data for week 17 (not 16).  It's a very specific issue in that if you click in the top part of the chart it will always load correctly but if you click in the bottom 30% or so of the chart it seems quirky, sometimes it will load the correct week, sometimes the wrong one.  You can see in the diagram the mouse cursor is behind the highlighter line at week 17 (I've circled that line in red), but the tool tip shows week 16.  We could tell users "make sure you click in a perfectly vertical line to the highlighter line" but users do what user do and will expect the tooltip to be accurate to the detail they see when they click.  The problem with this we give the wrong information and something bad happens.  I tried setting absolute heights and widths because it was previously even worse and this got me to the 70% right vs 30% wrong situation I have now but I'd like to fix it.

Has anyone run into this previously and found a solution?  Can anyone recommend any course of action to narrow down the issue further?

Andrew
Top achievements
Rank 1
 asked on 25 Oct 2022
1 answer
25 views

Hi

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

<span class="compliance-dev" data-source="-1,-1,-1,1,1,-1,-1,-1"></span>

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

Daniel
Telerik team
 answered on 28 Aug 2018
1 answer
288 views

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

 

https://dojo.telerik.com/utAxum

Tsvetina
Telerik team
 answered on 15 Feb 2018
11 answers
650 views
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!
Per
Top achievements
Rank 1
 answered on 07 Jan 2017
1 answer
96 views

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>
<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>
 
</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>

 

 

Dimiter Topalov
Telerik team
 answered on 01 Nov 2016
1 answer
42 views

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.

Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 29 Apr 2016
3 answers
137 views
Anyway to change the opacity for the background the sparkline graphs in MVC. I would even accept changing the background color.
Iliana Dyankova
Telerik team
 answered on 04 May 2015
1 answer
107 views

I have two sparkline charts.

A is using dataSource, B is using data.

How do I set the line width of B? (line width in A work fine).

Sparkline A

$(".item-dev-chart", sparkline).kendoSparkline({
    theme: "bootstrap",
    dataSource: itemDevDs,
    series: [{
        type: "line",
        field: "p",
        width: 2
    }],
    tooltip: {
        visible: false
    }
});

Sparkline B:

$t.kendoSparkline({
    theme: "bootstrap",
    data:$t.data("source").split(','),
    type: "line",
    chartArea: {
        background: "#f5f5f5"
    },
    tooltip: {
        visible: false
    }
});

Copying series options from A to B causes B to not show at all.


 

 

 

 

Iliana Dyankova
Telerik team
 answered on 04 May 2015
1 answer
45 views

I have sparklines on my page where I hide all dots except the last one. 

But when I export these sparklines to PDF - all dots become visible for some reasons..

I prepared the demo to reproduce this scenario - http://dojo.telerik.com/@dimaka/OqehE 

Also please see the screenshot attached. 

Please let me know how to keep sparkline dots hidden in exported PDF. 

Thank you!

Mihai
Telerik team
 answered on 13 Apr 2015
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?