Amcharts SerialChart multiple line graphs different category value member paths (Silverlight)

Question

EDIT I rewrote my question to make it more understandable after the conversation below with Tony (thanks!).

GOAL Render multiple line graphs (let's say 2) in the same chart. The charts have different x/y value pairs. For one x-value, I do not know both y-values.

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

As suggested by 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's call them "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 am I supposed to do about the "???" values? I do not have the actual value for that graph for that category value.

If I do not set a value, the default value of 0.0 is assumed and it draws a spike to the x-axis. If I set the previously known Graph1/Graph2 value, then it creates a horizontal connection where there is not supposed to be one. I am basically altering the graph which leads to a wrong result.

So how do I solve this? I am getting the feeling that amCharts do not support this scenario.

tonycoupland tonycoupland · Accepted Answer · 2012-10-10T10:09:18

You need to add two 'value' axes, one in the X direction and one in the Y direction (imagine, like 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);

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

For example, your data would 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 line to your chart specifying where to get the value from in the object array.

// 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've put all this into a Fiddle for you - http://jsfiddle.net/64EWx/

Amcharts SerialChart multiple line graphs different category value member paths (Silverlight)

1 Answers