Legend not being displayed

3 posts, 1 answers
  1. Chris
    Chris avatar
    16 posts
    Member since:
    Dec 2015

    Posted 01 Jun Link to this post

    <div class="chart-cell">
        <div id="chart" />
    </div>

    $.get("/chart/GetCustomPlotData", data, function (response) {
        if (response.Success) {
            var result = response.Result;
     
            if (result.IsAggregated) {
                $("#data-point-count").text(result.DataSet.ChannelData[0].Data.length + " of " + result.DataSet.DataPointsInFile);
            }
            else {
                $("#data-point-count").text(result.DataSet.ChannelData[0].Data.length);
            }
     
            // Format the data then generate the graphs
            var seriesData = [];
            for (var i = 0; i < result.DataSet.ChannelData.length; ++i) {
                var data = []
                for (var j = 0; j < result.DataSet.ChannelData[i].Data.length; ++j) {
                    data[j] = { Time: new Date(FormatUtsDate(result.DataSet.ChannelData[i].Data[j].Time)), Value: result.DataSet.ChannelData[i].Data[j].Value }
                }
     
                seriesData[i] = {
                    name: result.DataSet.ChannelData[i].Title !== "" ? result.DataSet.ChannelData[i].Title : result.DataSet.ChannelData[i].ChannelName,
                    visibleInLegend: false,
                    tooltip: {
                        template: "value: #= value.y #, time: #= FormatDate(value.x) #",
                        visible: true
                    },
                    type: "scatterLine",
                    xField: "Time",
                    yField: "Value",
                    data: data,
                    markers: {
                        visible: false
                    }
                }
            }
     
            $("#chart").kendoChart({
                series: seriesData,
                chartArea: {
                    @* There is probably a better way to do this, but I can't think of it right now.
                    This occurs before the divs are rendered so their widths at this point are not
                    what they will be after rendering *@
                    //width: 1074
                },
                xAxis: [{
                    type: "date",
                    baseUnit: "seconds",
                    labels: {
                        step: (result.Columns == 3 ? 2 : 1)
                    }
                }],
                yAxis: [{
                    axisCrossingValue: [-50000]
                }],
                legend:{
                    position: "left",
                    orientation: "horizontal",
                    visible: true
                },
                pannable: true,
                zoomable: true,
            });
     
            kendo.ui.progress($(".chart-loading"), false);
            $("#loading").hide();
            $("#nine-blocker-grid").show();
        }
        else {
            kendo.ui.progress($(".chart-loading"), false);
            $("#loading").hide();
            $("#error-message").text(response.Message);
            $("#error").show();
        }
    });

    All the series are being plotted, but for whatever reason the legend does not display. Just wonder if there is any obvious reason why that might be

    Thanks

  2. Answer
    Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 03 Jun Link to this post

    Hello Chris,

    The legend will not be shown because the visibleInLegend option is set to false in the series configuration:
    seriesData[i] = {
        name: result.DataSet.ChannelData[i].Title !== "" ? result.DataSet.ChannelData[i].Title : result.DataSet.ChannelData[i].ChannelName,
        visibleInLegend: false,
        ...


    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Chris
    Chris avatar
    16 posts
    Member since:
    Dec 2015

    Posted 03 Jun in reply to Daniel Link to this post

    The dreaded pitfall of copy/paste.

    Thanks for the help.

Back to Top