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