Line chart showing time, how to do?

5 posts, 2 answers
  1. Luiz
    Luiz avatar
    3 posts
    Member since:
    Jan 2018

    Posted 24 Jan Link to this post

    I'd like to show the average attendance time in a line graph.
    How can I feed the graph via javascript with these values (string or timestmap)?
    I am sending an image with the type of graphic i want.
    Can you help me?
  2. Luiz
    Luiz avatar
    3 posts
    Member since:
    Jan 2018

    Posted 24 Jan in reply to Luiz Link to this post

    more explanation: the seriesdata as the values that i need to show only the time

    var seriesData = [            { day: "Seg", sales1:  new Date("2018/01/01 08:40:56").getTime()/1000, sales2: new Date("2018/01/01 06:33:58").getTime()/1000 },            { day: "Ter", sales1:  new Date("2018/01/01 08:40:05").getTime()/1000, sales2: new Date("2018/01/01 06:59:55").getTime()/1000 },            { day: "Qua", sales1:  new Date("2018/01/01 08:05:33").getTime()/1000, sales2: new Date("2018/01/01 07:38:29").getTime()/1000 },            { day: "Qui", sales1:  new Date("2018/01/01 09:42:34").getTime()/1000, sales2: new Date("2018/01/01 08:32:18").getTime()/1000 },            { day: "Sex", sales1:  new Date("2018/01/01 09:48:15").getTime()/1000, sales2: new Date("2018/01/01 08:25:27").getTime()/1000 },            { day: "Sab", sales1:  new Date("2018/01/01 08:33:26").getTime()/1000, sales2: new Date("2018/01/01 09:02:39").getTime()/1000 },            { day: "Dom", sales1:  new Date("2018/01/01 07:55:10").getTime()/1000, sales2: new Date("2018/01/01 08:10:47").getTime()/1000 },            { day: "Doma", sales1: new Date("2018/01/01 08:10:11").getTime()/1000, sales2: new Date("2018/01/01 07:24:50").getTime()/1000 },             ];

    $("#CompGraficoTMAC").kendoChart({                title: {                    text: "TMAC - Tempo Médio Atendimento ao Cliente(horas)"                },                legend: {                    position: "bottom"                },                seriesDefaults: {                    labels: {                        visible: true                    }                },                series: [                    {                        name: "TMAC FÁBRICA",                        type: "line",                        color: "Blue",                        data: seriesData,                        field: "sales1"                    }, {                        name: "TMAC CLIENTE",                        type: "line",                        color: "#ff0000",                        data: seriesData,                        field: "sales2"                    }],                categoryAxis: {                    categories: [lbl01, lbl02, lbl03, lbl04, lbl05, lbl06, lbl07, lbl08]                },                tooltip: {                    visible: true                }            });

  3. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    2238 posts

    Posted 25 Jan Link to this post

    Hello Luiz,

    If you remove the division by 1000 from the dates, you can get the time to show by using a label template like this:
    series: [                   
      {                       
        name: "TMAC FÁBRICA",                       
        type: "line",                       
        color: "Blue",                       
        data: seriesData,                       
        field: "sales1",    
        labels: {
          template: "#:getTime(value)#"
        }
      }, {                       
        name: "TMAC CLIENTE",                       
        type: "line",                       
        color: "#ff0000",                       
        data: seriesData,                       
        field: "sales2",    
        labels: {
          template: "#:getTime(value)#"
                         
      }]

    function getTime(value){
      var minutes = value.getMinutes().toString().length == 2 ? value.getMinutes(): "0" + value.getMinutes();
      var seconds = value.getSeconds().toString().length == 2 ? value.getSeconds(): "0" + value.getSeconds();
      return value.getHours() + ":" + minutes + ":" + seconds;
    }

    Here is a Dojo demonstrating the result:
    http://dojo.telerik.com/@tsveti/iRaLew/2

    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Luiz
    Luiz avatar
    3 posts
    Member since:
    Jan 2018

    Posted 25 Jan in reply to Tsvetina Link to this post

    Thank you very much for your reply.
    I did it this way:

    01.$("#CompGraficoTMAC").kendoChart({
    02.    title: {
    03.        text: "TMAC - Tempo Médio Atendimento ao Cliente(horas)"
    04.    },
    05.    legend: {
    06.        position: "bottom"
    07.    },
    08.    seriesDefaults: {
    09.        labels: {
    10.            visible: true,
    11.            template: "#= kendo.format('{0:HH:mm}', new Date(value)) #"
    12.        }
    13.    },
    14.    series: [
    15.        {
    16.            name: "TMAC FÁBRICA",
    17.            type: "line",
    18.            color: "Blue",
    19.            data: seriesData,
    20.            field: "sales1"
    21.        }, {
    22.            name: "TMAC CLIENTE",
    23.            type: "line",
    24.            color: "#ff0000",
    25.            data: seriesData,
    26.            field: "sales2"
    27.        }],
    28.    valueAxis: {
    29.        labels: {
    30.            template: "#= kendo.format('{0:HH:mm}', new Date(value)) #"
    31.        },
    32.        min: new Date("2018/01/01").getTime(),
    33.        majorUnit: 60 * 60 * 1000 // 60 minutes step
    34.    },
    35.    tooltip: {
    36.        visible: true,
    37.        template: "#= kendo.format('{0:HH:mm}', new Date(value)) #"
    38.         
    39.    },
    40.    categoryAxis: {
    41.        categories: [lbl01, lbl02, lbl03, lbl04, lbl05, lbl06, lbl07, lbl08]
    42.    }
    43.});
  5. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    2238 posts

    Posted 25 Jan Link to this post

    Hello Luiz,

    Indeed, your approach is cleaner. Now when I though about formats, for the series specifically you don't even need to use a template:
    seriesDefaults: {
        labels: {
          visible: true,
          format: "{0:hh:mm:ss}"
        }
    }


    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top