This is a migrated thread and some comments may be shown as answers.

sparkline missbehaving

1 Answer 105 Views
Sparkline
This is a migrated thread and some comments may be shown as answers.
cp
Top achievements
Rank 1
cp asked on 17 Jul 2014, 05:55 AM
Hi,
I have duplicated the angular js example from telerik's website (http://demos.telerik.com/kendo-ui/sparklines/angular), but I am having some trouble rendering the chart. At times it will render correctly, whereas at other times the width and height seem to be way off.

Here is my code:
module.controller('TestController', ['$scope', '$timeout', function ($scope, $timeout) {
            $scope.weather = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "test_json/weather.json",
                        dataType: "json"
                    }
                }
            });
        }])

<div data-kendo-sparkline
                                 data-k-series="[{
                                   type: 'column',
                                   field: 'TMax',
                                   color: '#ff0000',
                                   negativeColor: '#0099ff'
                                 }]"
                                 data-k-tooltip="{ visible: false, shared: false }"
                                 data-k-data-source="weather"
                                 data-k-chart-area="{ background: 'transparent' }"
                                 style="height:50px;"></div>

Any ideas why sometimes it will be ok, whereas other times it will not, and this happens in Chrome, FF and IE.

Thanks,

1 Answer, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 18 Jul 2014, 01:52 PM
Hello,

I'm not sure why this is happening, but it looks like the container size is different in some cases.
Please, try replacing the sparkline element with a span, as it is normally an inline element:
      <span kendo-sparkline
           k-series="[{
                     type: 'column',
                     field: 'TMax',
                     color: '#ff0000',
                     negativeColor: '#0099ff'
                     }]"
           k-tooltip="{ visible: false, shared: false }"
           k-data-source="weather"
           style="line-height:30px;"/>


Another option would be to specify explicit width through the style.

Regards,
T. Tsonev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Sparkline
Asked by
cp
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Share this question
or