Line change color in group

6 posts, 1 answers
  1. Robson
    Robson avatar
    18 posts
    Member since:
    May 2012

    Posted 12 Jan Link to this post

    Hi, 

    I would like each line had its specific color . 

    Mi Result consult:

     

     

    $(id).kendoChart({
            dataSource: {
                transport: {
                    read: {
                        url: "/Faturamento/GetFaturamentoGrupoGrafico?" + form,
                        dataType: "json"
                    }
                },
                sort: {
                    field: "Ano",
                    dir: "asc",
     
                },
                group: {
                    field: "Grupo",
                    
                },
            },
            theme: $(document).data("kendoSkin") || "blueopal",
     
     
            legend: {
     
            },
            seriesDefaults: {
                type: "line"
            },
            series: [{
                field: "Qtde",           
     
            }],
            categoryAxis: {
                field: "Ano",
            },
            valueAxis: {
                labels: {
                    format: "N0"
                },
                // majorUnit: 10000
            },
            tooltip: {
                visible: true,
                 
                 template: "#= series.name #: #=kendo.format('{0:N0}', value)  #"
            }
        });     

  2. Robson
    Robson avatar
    18 posts
    Member since:
    May 2012

    Posted 12 Jan Link to this post

    Json.
     
    [{"Grupo":"ANEL","Qtde":817251,"Valor":24125831.37,"CodigoCliente":0,"Ano":2015,"Cor":"Red"},{"Grupo":"BRINCO","Qtde":492578,"Valor":14061106.15,"CodigoCliente":0,"Ano":2015,"Cor":"Yellow"},{"Grupo":"CORDAO","Qtde":541779,"Valor":16214282.46,"CodigoCliente":0,"Ano":2015,"Cor":"Green"},{"Grupo":"PINGENTE","Qtde":37747,"Valor":1036999.56,"CodigoCliente":0,"Ano":2015,"Cor":"Black"},{"Grupo":"PULSEIRA","Qtde":280991,"Valor":7971583.25,"CodigoCliente":0,"Ano":2015,"Cor":"Orange"},{"Grupo":"ANEL","Qtde":413,"Valor":12476.98,"CodigoCliente":0,"Ano":2016,"Cor":"Red"},{"Grupo":"BRINCO","Qtde":897,"Valor":26770.93,"CodigoCliente":0,"Ano":2016,"Cor":"Yellow"},{"Grupo":"CORDAO","Qtde":1069,"Valor":31621.26,"CodigoCliente":0,"Ano":2016,"Cor":"Green"},{"Grupo":"PULSEIRA","Qtde":356,"Valor":10366.07,"CodigoCliente":0,"Ano":2016,"Cor":"Orange"},{"Grupo":"PINGENTE","Qtde":14,"Valor":384.88,"CodigoCliente":0,"Ano":2016,"Cor":"Black"}]

     

     

     

     

  3. Kendo UI is VS 2017 Ready
  4. EZ
    EZ avatar
    60 posts
    Member since:
    May 2015

    Posted 12 Jan in reply to Robson Link to this post

    Here is a DOJO with your data:

     http://dojo.telerik.com/@ezanker/eruJE

     The lines have different colors. Can you explain in more detail what result you expect?

  5. Robson
    Robson avatar
    18 posts
    Member since:
    May 2012

    Posted 12 Jan Link to this post

    Hi Ez,

     

    I have the property "Cor" in the json with colors names, This colors, i want whatever the line colors.

    Exemple:

    Anel - Red line

    Brinco-Yellow

    CORDAO-Green

    PINGENTE-Black

     

     

     

     

     

     

     

  6. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 15 Jan Link to this post

    Hi Robson,

    For this scenario I would suggest attaching a handler to the dataBound event and set the color via the chart.options. For your convenience here is a dojo which demonstrates the suggested approach in action.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Robson
    Robson avatar
    18 posts
    Member since:
    May 2012

    Posted 15 Jan in reply to Iliana Nikolova Link to this post

    Thanks Iliana Nikolova , perfect!!!
Back to Top
Kendo UI is VS 2017 Ready