Make same colors on 2 charts with legend

3 posts, 0 answers
  1. Egor
    Egor avatar
    8 posts
    Member since:
    Aug 2017

    Posted 07 Sep Link to this post

    Hello. My target is make 2 charts with same colors of the items. I make this

    <link rel="stylesheet" href="/analyticsRes/jsCharts/css/kendo.common.min.css" />
        <link rel="stylesheet" href="/analyticsRes/jsCharts/css/kendo.default.min.css" />
        <link rel="stylesheet" href="/analyticsRes/jsCharts/css/kendo.default.mobile.min.css" />
        <script src="/analyticsRes/jsCharts/js/kendo.all.min.js"></script>
     
    <div id="chart-top" style="width:600px;height:350px;"></div>
     
    <script>
    $(function() {
     
        $('.top-td').closest('table').attr('id', 'top-table');
        $('.top-td').closest('tr').addClass('top-tr');
        $('.top-td').closest('.CVView').css('display', 'none');
        $('#top-table colgroup').remove();
        $('#top-table .PTColSizingCell').remove();
     
        $('#top-table tr').each(function() {
            if ($(this).hasClass('top-tr')) {} else {
                $(this).remove();
            }
        });
     
        var TopList = new Array();
        var tr = document.getElementById("top-table").getElementsByTagName("tr");
        for (var i = 0; i < tr.length; i++) {
            var td = tr.item(i).getElementsByTagName("td");
            TopList[i] = new Object();
            for (var j = 0; j < td.length; j++) {
                if (j == 0) {
                    TopList[i]["category"] = td.item(0).innerText;
                    TopList[i]["name"] = i;
                }
                if (j == 1) {
                    TopList[i]["value"] = parseFloat(td.item(1).innerText.replace(/,/, '.'));
                }
                if (j == 2) {
                    var id = td.item(2).innerText;
                    if (id === "K_22") { TopList[i]["color"] = "#3f51b5" }
                    if (id === "K_21") { TopList[i]["color"] = "#03a9f4" }
                    if (id === "K_01") { TopList[i]["color"] = "#4caf50" }
                    if (id === "K_11") { TopList[i]["color"] = "#f9ce1d" }
                    if (id === "K_13") { TopList[i]["color"] = "#ff9800" }
                    if (id === "K_88") { TopList[i]["color"] = "#ff5722" }
                    if (id === "K_12") { TopList[i]["color"] = "#56ff22" }
                    if (id === "K_10") { TopList[i]["color"] = "#e222ff" }
                    if (id === "K_31") { TopList[i]["color"] = "#8d22ff" }
                }
            }
        }
     
     
        TopList.sort(function(a, b) {
            if (a.value < b.value) {
                return 1;
            }
            if (a.value > b.value) {
                return -1;
            }
            return 0;
        });
     
    console.log(TopList);
     
        $("#chart-top").kendoChart({
            title: "Предложений по предприятиям",
            theme: "Material",
            dataSource: {
                data: TopList,
                group: {
                    field: "name"
                },
                sort: {
                    field: "category",
                    dir: "asc"
                }
            },
            legend: {
                visible: true,
                position: "bottom"
            },
            seriesDefaults: {
                type: "column",
                gap: 0.1,
                spacing: 0.2
            },
            series: [{
                field: "value",
                colorField: "color",
                labels: {
                    font: "14px Arial,Helvetica,sans-serif",
                    template: "#= value #",
                    visible: true
                },
                name: "#: group.items[0].category #"
            }],
    seriesColors: ["#3f51b5", "#03a9f4", "#4caf50", "#f9ce1d", "#ff9800", "#ff5722", "#56ff22", "#e222ff", "#8d22ff"],
            valueAxis: {
                majorGridLines: {
                    visible: false
                },
                visible: false,
            },
            categoryAxis: {
                majorGridLines: {
                    visible: false
                },
                line: {
                    visible: false
                },
                visible: false
            },
            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #"
            }
        });
    });
    </script>
    for one chart and the same code for the second chart. Finally the items of the charts has the same colors, but the legend has diffrent colors. How i can solve my problem? Thanks
  2. Egor
    Egor avatar
    8 posts
    Member since:
    Aug 2017

    Posted 07 Sep in reply to Egor Link to this post

    i make a dojo for example

    http://dojo.telerik.com/OXACo

  3. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 11 Sep Link to this post

    Hi Egor,

    The difference in the colors is due to the following:
    - By design the chart legend shows the series colors;
    - The colorField option is intended for setting color to a particular item in the series (not to the entire series).

    Hence to achieve the expected result remove the colorField definitions (and the "color" fields) and use the seriesColors array. For your convenience here is the modified dojo.

    Regards,
    Iliana Nikolova
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 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