This is a migrated thread and some comments may be shown as answers.

Multiple Data Sources: remote and local

2 Answers 81 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Adam
Top achievements
Rank 1
Adam asked on 23 Jan 2017, 06:28 PM

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 Answers, 1 is accepted

Sort by
0
Adam
Top achievements
Rank 1
answered on 23 Jan 2017, 06:32 PM

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; }
            }]

         

0
Adam
Top achievements
Rank 1
answered on 23 Jan 2017, 07:51 PM
This has been solved, it was a matter of removing the field from the local array
Tags
Charts
Asked by
Adam
Top achievements
Rank 1
Answers by
Adam
Top achievements
Rank 1
Share this question
or