Tooltip, Zoom and Drag features are not working on Kendo Grid using VS2010

5 posts, 0 answers
  1. Nadhir
    Nadhir avatar
    5 posts
    Member since:
    Feb 2013

    Posted 10 Jun 2015 Link to this post

    I'm working on ASP.NET MVC 4 project developed in C# under Visual Studio 2010 and I'm trying to add tooltips, zoom and drag features to my Kendo Chart using the "Kendo UI v2014.3.1119" version. Below the JavaScript code and DataSource i'm currently using:

    •  JavaScript:

    001.createChart: function () {
    002.    var $this = this;
    003.    $("." + $this.chartContainerID).kendoChart({
    004.        //renderAs: "canvas",
    005.        dataSource: {
    006.            data: barData,
    007.            value: "#={0}!=null"
    008.        },
    009.        panes: [{
    010.            title: "Future / Cash",
    011.            height: 300
    012.        }, {
    013.            name: "premiumPane",
    014.            title: "Premium",
    015.            padding: "3",
    016.            height: 120
    017.        }],
    018.        categoryAxis: {
    019.            pane: "premiumPane"
    020.        },
    021.        valueAxis: [{
    022.            // Default axis
    023.            line: {
    024.                visible: false
    025.            },
    026.            labels: {
    027.                format: "${0}"
    028.            }
    029.        }, {
    030.            // Premium Axis
    031.            name: "premiumAxis",
    032.            pane: "premiumPane",
    033.            visible: true,
    034.            narrowRange: true,
    035.            labels: {
    036.                step: 3
    037.            }
    038.        }],
    039.        series: [{
    040.            // Candlestick serie
    041.            type: "candlestick",
    042.            openField: "open",
    043.            highField: "high",
    044.            lowField: "low",
    045.            closeField: "close",
    046.            color: "green",
    047.            downColor: "red",
    048.            opacity: 0.3,
    049.            line: {
    050.                opacity: 0.8,
    051.                color: "black"
    052.            },
    053.            tooltip: {
    054.                visible: true,
    055.                format: "{4}<br />Open: {0:C}<br />High: {1:C}<br />Low: {2:C}<br />Close: {3:C}"
    056.            }
    057.        }, {
    058.            // Cash price serie
    059.            type: "line",
    060.            name: "Cash Price",
    061.            missingValues: "interpolate",
    062.            field: "cash",
    063.            color: "rgb(70, 80, 140)",
    064.            opacity: 1,
    065.            tooltip: {
    066.                visible: true,
    067.                template: "#= kendo.format('{0:dd/MM/yyyy}', category) # <br /> Cash Prix: #= kendo.format('{0:C}',value) #"
    068.            }
    069.        }, {
    070.            // Premium serie
    071.            type: "line",
    072.            field: "prim",
    073.            axis: "premiumAxis",
    074.            tooltip: {
    075.                visible: true,
    076.                template: "#= kendo.format('{0:dd/MM/yyyy}', category) # <br /> Premium Prix: #= kendo.format('{0:C}',value) #"
    077. 
    078.            }
    079.        }
    080.        ],
    081.        categoryAxis: {
    082.            categoryField: "date",
    083.            field: "date",
    084.            baseUnitStep: "auto",
    085. 
    086.            missingValues: "interpolate",
    087. 
    088.            labels: {
    089.                step: 20 // Render every second label
    090.            }
    091.        },
    092.        legend: {
    093.            position: "top"
    094.        },
    095.        transitions: false,
    096.        drag: $this.onDrag,
    097.        dragEnd: $this.onDragEnd,
    098.        zoom: $this.onZoom
    099.    });
    100.},
    101.// Drag handler
    102.onDrag: function (e) {
    103.    debugger;
    104.    var chart = e.sender;
    105.    var ds = chart.dataSource;
    106.    var delta = Math.round(e.originalEvent.x.initialDelta / DRAG_THR);
    107. 
    108.    if (delta != 0) {
    109.        newStart = Math.max(0, viewStart - delta);
    110.        newStart = Math.min(barData.length - viewSize, newStart);
    111.        ds.query({
    112.            skip: newStart,
    113.            page: 0,
    114.            pageSize: viewSize,
    115.            sort: SORT
    116.        });
    117.    }
    118.},
    119.onDragEnd: function () {
    120.    debugger;
    121.    viewStart = newStart;
    122.},
    123.// Zoom handler
    124.onZoom: function (e) {
    125.    debugger;
    126.    var chart = e.sender;
    127.    var ds = chart.dataSource;
    128.    viewSize = Math.min(Math.max(viewSize + e.delta, MIN_SIZE), MAX_SIZE);
    129.    ds.query({
    130.        skip: viewStart,
    131.        page: 0,
    132.        pageSize: viewSize,
    133.        sort: SORT
    134.    });
    135. 
    136.    // Prevent document scrolling
    137.    e.originalEvent.preventDefault();
    138.}
    ​​

    • DataSource:

    01.var barData = [
    02.    { day: 1, date: "2015/05/01", open: 13, high: 19, low: 9, close: 16, cash: 18, prim: 2 },
    03.    { day: 2, date: "2015/05/02", open: 14, high: 16, low: 11, close: 16, cash: 18, prim: 2 },
    04.    { day: 3, date: "2015/05/03", open: 16, high: 21, low: 12, close: 18, cash: 16, prim: -2 },
    05.    { day: 4, date: "2015/05/04", open: 18, high: 40, low: 11, close: 30, cash: 33, prim: 3 },
    06.    { day: 5, date: "2015/05/07", open: 30, high: 45, low: 26, close: 40, cash: 42, prim: 2 },
    07.    { day: 6, date: "2015/05/08", open: 40, high: 80, low: 30, close: 70, cash: 66, prim: -4 },
    08.    { day: 7, date: "2015/05/09", open: 70, high: 80, low: 40, close: 55, cash: 57, prim: 2 },
    09.    { day: 8, date: "2015/05/10", open: 55, high: 65, low: 11, close: 30, cash: 35, prim: 5 },
    10.    { day: 9, date: "2015/05/11", open: 30, high: 45, low: 16, close: 20, cash: 18, prim: -2 },
    11.    { day: 10, date: "2015/05/12", open: 30, high: 45, low: 16, close: 20, cash: 18, prim: -2 },
    12.    { day: 11, date: "2015/05/13", open: 40, high: 80, low: 30, close: 70, cash: 66, prim: -4 },
    13.    {day: 14, date: "2015/05/16", open: 30, high: 45, low: 23, close: 40, cash: 43, prim: 4 },
    14.    { day: 15, date: "2015/05/17", open: 40, high: 80, low: 30, close: 70, cash: 73, prim: 3 },
    15.    { day: 16, date: "2015/05/18", open: 70, high: 80, low: 40, close: 55, cash: 56, prim: 1 },
    16.    { day: 17, date: "2015/05/19", open: 55, high: 65, low: 11, close: 30, cash: 33, prim: 3 },
    17.    { day: 18, date: "2015/05/20", open: 30, high: 45, low: 26, close: 40, cash: 42, prim: 2 },
    18.    { day: 19, date: "2015/05/21", open: 40, high: 80, low: 30, close: 70, cash: 72, prim: 2 },
    19.    { day: 20, date: "2015/05/22", open: 70, high: 80, low: 40, close: 55, cash: 57, prim: 2 },
    20.    { day: 21, date: "2015/05/23", open: 70, high: 80, low: 40, close: 55, cash: 56, prim: 1 },
    21.    { day: 22, date: "2015/05/24", open: 55, high: 65, low: 11, close: 30, cash: 33, prim: 3 },
    22.    { day: 23, date: "2015/05/25", open: 30, high: 45, low: 26, close: 40, cash: 42, prim: 2 },
    23.    { day: 24, date: "2015/05/26", open: 40, high: 80, low: 30, close: 70, cash: 72, prim: 2 },
    24.    { day: 25, date: "2015/05/27", open: 70, high: 80, low: 40, close: 55, cash: 57, prim: 2 },
    25.    { day: 26, date: "2015/05/28", open: 55, high: 65, low: 11, close: 30, cash: 33, prim: 3 },
    26.    { day: 27, date: "2015/05/29", open: 30, high: 45, low: 26, close: 40, cash: 42, prim: 2 },
    27.    { day: 28, date: "2015/05/30", open: 40, high: 80, low: 30, close: 70, cash: 72, prim: 2 },
    28.    { day: 29, date: "2015/05/31", open: 70, high: 80, low: 40, close: 55, cash: 57, prim: 2 }
    29.];
    ​​

    My issue is that tooltips, zoom and drag features are not displayed / working but my kendo chart is well displayed.

    Could anyone help me, please?

    Thanks.

    Regards,

  2. Daniel
    Admin
    Daniel avatar
    2230 posts

    Posted 12 Jun 2015 Link to this post

    Hello,

    Could you check if there are any JavaScript errors? If there aren't any then could you check this example and let me know if it works as expected or if I am missing something?


    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Nadhir
    Nadhir avatar
    5 posts
    Member since:
    Feb 2013

    Posted 12 Jun 2015 Link to this post

    Hello Daniel,

    Thank you for your reply.

    Yes, it worked as expected. In my case, there are no javascript errors but when I use this code, the "onDrag", "onDragEnd" and "onZoom"functions are unreachable.

    However, when I replaced the 3 following lines:

    drag: $this.onDrag,
    dragEnd: $this.onDragEnd,
    zoom: $this.onZoom

    by

    drag: $this.onDrag(xxx),
    dragEnd: $this.onDragEnd,
    zoom: $this.onZoom(xxx)

    I reached the "onDrag", "onDragEnd" and "onZoom" functions but they crash because "e" was undefined.

    I think if I find the relevant parameter (event) to replace the "xxx", my issue will be solved.

    Do you have any idea, please?

    Thanks in advance.

    Best regards,

    Nadhir

    P.S.: When I test the example in a new ASP.NET project, it worked (tooltips, zoom, drag) but when I did the same thing into my main project, it didn't.

  4. Nadhir
    Nadhir avatar
    5 posts
    Member since:
    Feb 2013

    Posted 15 Jun 2015 Link to this post

    Hi,

    I forgot to note that I'm trying to display my charts on a "Kendo Window" (the problem comes from here). Indeed, my charts are well displayed and drag, zoom & tooltips work perfectly when I display the chart on the main interface (not on the popup (Kendo Window)).

    Does anyone know if there is a specific code to add to enable tooltips, drag & zoom on charts into Kendo Window, please?

    Thank you in advance.

    Best regards,

    Nadhir

  5. Nadhir
    Nadhir avatar
    5 posts
    Member since:
    Feb 2013

    Posted 15 Jun 2015 Link to this post

    Hi all,

    The issue has been solved.

    I post my solution if it could be helpful for someone facing the same issue.

    The issue comes from the Kendo Window definition used at the beginning as follows:

    • Old Cshtml code

    <div class="k-chart k-stockchart" style="display: none;">
      @(Html.Kendo().Window()
          .Name("chartsWindow")
          .Title("")
          .Content("")
          .Iframe(true)
          .Draggable()
       )
      <div id="chartContainer" style="width: 780px;">
      </div>
    </div>

    In this case, the Kendo Chart is well displayed but tooltip, zoom & drag features don't work.

    So, I replaced the code above by the following:

    • New Cshtml code

    <div id="chartsWindow" style="display: none;">
          <div id="chartContainer" style="width: 760px; height: 500px;">
          </div>
    </div>

    • New JavaScript code

    $("#chartsWindow").kendoWindow({
                title: "Courbes des Cash, Futures et/ou Primes",
                width: 800,
                height: 540,
                actions: ['Refresh', 'Close'],
                visible: false,
                draggable: false,
                //iframe: true
                modal: true,
                resizable: false
            });
     
            var window = $('#chartsWindow').data('kendoWindow').center();
     
            window.open();

    Regards,

     

Back to Top