Charting/Dataseries requires an observalbe

How-to Discussions
1

Hi,
I’m getting some errors with this code. And I’m suspecting that it’s something to do with dataseries usage within each keyword?

var graphs = Observable (
				{
					id: 0
					name: "data serie 1",
					host: "http://192.168.84.128",
					port: 1212,					
					data: [(3,2,1,3,5)]
				},
				{
					id: 2
					name: "data serie 2",
					host: "http://192.168.84.128",
					port: 1212,					
					data: [
				        { y: 11, label: "Talks" },
				        { y: 2, label: "Exhibitions" },
				        { y: 7, label: "Music" },
				        { y: 4, label: "Workshops" },
				        { y: 5, label: "Comedy" }]
				});

module.exports = {
				graphs: graphs,
				someOtherExports: someOtherExports
			};

and UX part

<Each Items="{graphs}" >
	<Panel MaxHeight="150" xmlns:c="Fuse.Charting">
		<c:Plot Background="Green" XAxisMetric="Count" >			
			<c:DataSeries Data="{data}" />			
			<Curve StrokeWidth="3" StrokeColor="#008">
				<c:PlotData>
						<c:PlotCurvePoint/>
				</c:PlotData>
			</Curve>			
		</c:Plot >
	</Panel>	
</Each>

I’m getting this error :

DataSeries.Data should be an Observable

When I put another exported mock data in which is exact same values as is in data keys with Observable or even non observable javascript array, it works just fine. But it’s not the case for graphs[i].data

I also made graphs non-observalbe and it gives the same error for only dataseries.data part. Other fields are working.

Am I missing something?

2

I got it working but with different way.

Created javascript object list that returns graphs fields and its data value as observable. Just how error log asks. However if I don’t use it in each it doesn’t ask for it to be observable.

And each keyword with dataseries are working now. But still I like to know reasons if that’s makes sense.

3

I’ve added a feature request to make DataSeries.Data accept arrays from JavaScript as well as Observables.

For now you can wrap them in an Observable though – nested Observables are supported.

4

edA-qa mort-ora-y wrote:

I’ve added a feature request to make DataSeries.Data accept arrays from JavaScript as well as Observables.

For now you can wrap them in an Observable though – nested Observables are supported.

I’m positive DataSeries.Data already accepts plain array javascript object as value. Not required to be observable.

I think the problem is in literally created array of javascript object(observable or not), that each of the objects has own fields and as well as data value as javascript array(observable or not), makes it log, that DataSeries.Data should be an Observable. And it doesn’t accept the value.

If I plain do this,


var graphs = 	{
					id: 0
					name: "data serie 1",
					host: "http://192.168.84.128",
					port: 1212,					
					data: [(3,2,1,3,5)]
			}

I believe it will work without each keyword.

5

Do you have a full example that shows the error? I’m not quite following what data setup is causing the problem.

6

Nope, I rewrote the entire file over.

But in the first post, you can reproduce the error just by copying that code alone.

In official Alive.UX example project, there’s a chart that I copied the data structure. So I was able to use the structure, but when I switched to populate multiple graphs with each method and using array of graph model objects, it gives this error.