Amcharts SerialChart has several line graphs with different categories of category values ​​(Silverlight)

Question

EDIT I rewrote my question to make it clearer after talking below with Tony (thanks!).

PURPOSE To display several lines (for example, 2) in one diagram. Graphs have different pairs of x / y values. For one x-value, I do not know both y-values.

I am using Silverlight. SerialChart and LineGraph classes are available for this. The data source for both charts is the same and is set at the SerialChart level. The property name for the x axis is also defined there for both plots ( CategoryValueMemberPath ).

As suggested in the amCharts documentation, we need to create objects that have a property for the category axis (x axis), and then one property per graph. Let them be called "Graph1" and "Graph2". So the data source looks something like this:

 List<MyClass> data = new List<MyClass>() { new MyClass() { Category = 0.1, Graph1 = 0.14, Graph2 = ??? } ,new MyClass() { Category = 0.15, Graph1 = ???, Graph2 = 0.05 } ,new MyClass() { Category = 0.2, Graph1 = 0.35, Graph2 = ??? } ,new MyClass() { Category = 0.18, Graph1 = ???, Graph2 = 0.12 } ... and so on ... } 

PROBLEM What should I do with "???" values? I have no actual value for this graph for this category value.

If I do not set the value, the default value is assumed to be 0.0, and it picks up a burst along the x axis. If I set the previously known value Graph1 / Graph2, then it creates a horizontal connection where there should not be one. I basically change the schedule, which leads to the wrong result.

So how can I solve this? I get the feeling that amCharts do not support this scenario.

Answer 1

You need to add two “value” axes, one in the X direction and one in the Y direction (imagine as a bubble chart).

 // AXES // X var xAxis = new AmCharts.ValueAxis(); xAxis.position = "bottom"; xAxis.gridAlpha = 0.1; xAxis.autoGridCount = true; chart.addValueAxis(xAxis); // Y var yAxis = new AmCharts.ValueAxis(); yAxis.position = "left"; yAxis.gridAlpha = 0.1; yAxis.autoGridCount = true; chart.addValueAxis(yAxis); 

Combine all your data points into a single array with the common name of the X axis (in my example, “x”), for the points on line 1, add the property “line1” with its value, and for the points on line 2, add the property 'line2' .

For example, your data will look like this:

 var chartData = [ {x:0.1,line1:0.25}, {x:0.246,line1:0.342}, {x:0.12,line2:0.16}, {x:0.3,line2:0.485} ]; 

Then add a “graph” for each row in your chart, indicating where to get the value from the array of objects.

 // GRAPHS var graph = new AmCharts.AmGraph(); graph.xField = "x"; graph.yField = "line1"; graph.lineAlpha = 1; graph.lineColor = '#FF9E01'; chart.addGraph(graph); var graph2 = new AmCharts.AmGraph(); graph2.xField = "x"; graph2.yField = "line2"; graph.lineAlpha = 1; graph2.lineColor = '#9EFF01'; chart.addGraph(graph2); 

I put it all in Fiddle for you - http://jsfiddle.net/64EWx/