Multiple Data Sources: remote and local

3 posts, 0 answers
  1. Adam
    Adam avatar
    3 posts
    Member since:
    Jan 2017

    Posted 23 Jan Link to this post

    In our chart we are building we are attempting to use multiple data sources in the chart, one being a remote json data source and the second being a local one that's values are generated from the remote one.

    this is done so that the data series doesn't continue have values past a certain point and can can be cut off instead of having a slope down to zero to the next category axis point; a downside to an area chart. The effect can be seen in the first attached image. The slope happens at the lubber line, where there can be no data gathered from the future. The black line is the expected trend based on the first value so the data source has indexes extending beyond the current time where all of the other values are zero/null

    The black line can be generated on the user side which fixes the slope to zero at the lubber line problem but the array it is stored in cannot be displayed. We've been following this example but we are having issues applying with to a remote and local data source. Our current chart has the Efficiency Field in the legend but displays no line in the chart, see the second photo for an example of the chart.

    main code:  eff is a local variable

    <p>   var eff = [];<br>        var x = document.getElementById("CheckM");<br>        $("#ChartFullDay-@unique").kendoChart({</p><p>            dataSource: {<br>                data: eff,<br>                transport: {<br>                    read: {<br>                        url: "@Url.Action("ChartData", new { id = "SkillFullDay" })",<br>                        dataType: "json"<br>                    }<br>                },<br>                schema: {<br>                    model: {<br>                        fields: {<br>                            Label: { type: "string" },<br>                            AllValue: { type: "number" },<br>                            MValue: { type: "number" },<br>                            SValue: { type: "number" },<br>                            EValue: { type: "number" },<br>                            OValue: { type: "number" },<br>                            Efficiency: { type: "number"}<br>                        }<br>                    }<br>                },</p><p> },<br>            series: [{<br>                field: "MValue",<br>                name: "M",<br>                color: "red"<br>            }, {<br>                field: "EValue",<br>                name: "E",<br>                color: "green"<br>            }, {<br>                field: "SValue",<br>                name: "S",<br>                color: "blue"<br>            }, {<br>                field: "OValue",<br>                name: "O",<br>                color: "yellow"<br>            }, {<br>                type: "line",<br>                stack: false,<br>                name: "Expected",<br>                data: eff,<br>                field: "EffValue",<br>                color: "black"<br>            }, {<br>                type: "line", <br>                stack: false,<br>                field: "AllValue",<br>                name: "Actual",<br>                color: function () { return winningDayColor; }<br>            }],</p>

    Goals

    • Have a local and remote data source for a graph
    • local datasource values change on user interaction

    Problem

    • Cannot get chart to use values from local array applied in the same way in the example

    Thanks for the help!

  2. Adam
    Adam avatar
    3 posts
    Member since:
    Jan 2017

    Posted 23 Jan in reply to Adam Link to this post

    Code Didn't quite come out how I expected, here is a second try:

     var eff = [];

            var x = document.getElementById("CheckM");
            $("#ChartFullDay-@unique").kendoChart({

     seriesDefaults: {
                    type: "area",
                    stack: true

                },
                dataSource: {
                    data: eff,
                    transport: {
                        read: {
                            url: "@Url.Action("ChartData", new { id = "SkillFullDay" })",
                            dataType: "json"
                        }
                    },
                    schema: {
                        model: {
                            fields: {
                                Label: { type: "string" },
                                AllValue: { type: "number" },
                                MValue: { type: "number" },
                                SValue: { type: "number" },
                                EValue: { type: "number" },
                                OValue: { type: "number" },
                                Efficiency: { type: "number"}
                            }
                        }
                    },
     series: [{
                    field: "MValue",
                    name: "M",
                    color: "red"
                }, {
                    field: "EValue",
                    name: "E",
                    color: "green"
                }, {
                    field: "SValue",
                    name: "S",
                    color: "blue"
                }, {
                    field: "OValue",
                    name: "O",
                    color: "yellow"
                }, {
                    type: "line",
                    stack: false,
                    name: "Expected",
                    data: eff,
                    field: "EffValue",
                    color: "black"
                }, {
                    type: "line", //keep al value at the bottom of the series list to keep things as efficient as possible
                    stack: false,
                    field: "AllValue",
                    name: "Actual",
                    color: function () { return winningDayColor; }
                }]

             

  3. Adam
    Adam avatar
    3 posts
    Member since:
    Jan 2017

    Posted 23 Jan in reply to Adam Link to this post

    This has been solved, it was a matter of removing the field from the local array
Back to Top