stretch line data

May 4, 2008 at 12:34 PM
I'm trying to draw a simple line chart where the line data starts at the far left and ends at the far right. It seems like this should be a setting, but I've been unsuccessful at locating it. Is this something that is currently supported or am I just missing it?

I've made some attempts as you can see below, but I've only made matters worse for now.

http://cid-c688f004988cec3c.skydrive.live.com/self.aspx/images/silverlight-chart.png

I'd appreciate any tips.
Coordinator
May 6, 2008 at 1:58 AM
Looks like you are using XY Line chart. If you want the far right to coincide with end of the chart, the MaxXValue in the model should match the maximum of your x values in the data
May 6, 2008 at 10:50 AM
Thank you for the reply. It's greatly appreciated.

Well, I've set the chart type as follows:

Chart.ChartType.LINE;

I don't think this is an XY Line. In fact, if you look at the examples you provide, the standard line chart does not extend flush to the right or the left. I could not find a setting to make it do that.


venkata wrote:
Looks like you are using XY Line chart. If you want the far right to coincide with end of the chart, the MaxXValue in the model should match the maximum of your x values in the data

Coordinator
May 7, 2008 at 4:58 PM
The line chart is displayed based on yValues, The x axis is labeled based on the groupLabels. So each value in the line chart is a value for the group, Hence the dot and the start of the line is at the center of the group. It can be easily change so that the start of the line is at the start of the x axis. I have seen line charts that do it either way. I wonder if this should be some kind of attribute or a L&F property on the chart
May 7, 2008 at 8:28 PM
I suppose some kind of setting would be nice. I give it a try to make it work the way I wanted, but was unsuccessful. If you want to point me in the right direction or if it's really simple for you, make the change, I sure would appreciate it. Nothing pressing though, I'm just having fun with it for now.
Coordinator
May 8, 2008 at 4:12 PM
Can You please give me your project/data so that I can tinker with it? It would also be nice if you can let me know what is your desired outcome (maybe a picture?)

May 8, 2008 at 4:52 PM
Sure thing!

Here's my project file in its entirety.

http://29u07a.blu.livefilestore.com/y1pZHdUtA0hiZWMLlM7JBKYLm0u-MXqozEKDIGnmjMw1vZJeicA5bJq7dzmoAfC28WOF8LF5l6jXJeepZ0Yxgrf3A/FreeSilverlightChart.zip?download

And here's the chart I'm trying to mimic.

http://29u07a.blu.livefilestore.com/y1pZHdUtA0hiZUiHWgfD9_LWSTgA9lD1zccQoHW7RjlXSi7yRjOCUL-TvEhQr8A-xhCM76kgtxppSER7nHHHl8oOQ/desired-chart.png
Coordinator
May 11, 2008 at 6:21 AM

I fixed a few bugs in the XYLine chart. After that Here is the code that should mimic the chart:


 

 

private ChartModel LoadChartModel()

 

{

 

string title = "This is the title of chart";

 

 

double[,] chartYValues = {

 

{-50}, {-50}, {-50}, {-50}, {-47} , {-40}, {-37}, {-25}, {0},{50},{100},{150},{250},{300},{325},{340}, {350}, {350}

};

 

double[,] chartXValues = {

 

{ 24 }, { 25 }, { 26 }, { 27 }, { 28 }, { 29 }, { 30 }, { 31 },{32},{33},{34},{35},{36},{37},{38},{39},{40}, {41}

};

 

ChartModel model = new ChartModel(new string[] { "data" }, null, chartYValues, chartXValues, title, null, null, null);

 

model.MaxYValue = 400;

model.MaxXValue = 41;

model.MinYValue = -100;

model.MinXValue = 24;

 

return model;

 

}

 

 

 

 

public void LoadChart(object sender, RoutedEventArgs args)

 

{

 

//the default type of the chart is vertical bar-chart.

 

 

 

 

 

Chart.ChartType chartType = Chart.ChartType.XYLINE;

 

 

//set all the information of the chart.

 

 

 

 

 

ChartModel model = LoadChartModel();

 

 

// create the chart

 

 

 

 

chart =

Chart.CreateChart(chartType, model);

 

 

//set the chart to be in 2D or in 3D

 

 

 

 

chart.IsPerspective =

false;

 

 

//set the position of the series labels

 

 

 

 

chart.LegendPosition =

Chart.LegendLocation.NONE;

 

 

//set the duration of the animation

 

 

 

 

chart.AnimationDuration = 0.0;

 

//set the formate of the

 

 

 

 

chart.Format =

"n2";

 

chart.XMajorGridCount = 16;

chart.YMajorGridCount = 4;

 

//set the size of the chart area.

 

 

 

 

chart.SetBounds(

new Rect(0, 0, canvasLineChart.Width, canvasLineChart.Height));

 

 

// add the custom component

 

 

 

 

canvasLineChart.Children.Add(chart);

 

// setup the event handler so that when mouse enter show show the information of the bar.

 

 

 

 

 

//chart.ChartClicked += new ChartEventHandler(ChartClicked);

 

 

 

 

chart.MouseMove +=

new MouseEventHandler(chart_MouseMove);

 

 

// now draw it

 

 

 

 

chart.Draw();

}

 

If you want to draw extra artifacts in the XYLine chart, you can extend the XYLineChart and draw the artifacts by overriding the draw the method.

 

May 11, 2008 at 3:19 PM
Excellent!  Thank you.  I'll give it a look today.

venkata wrote:

I fixed a few bugs in the XYLine chart. After that Here is the code that should mimic the chart:


 

 

private ChartModel LoadChartModel()

 

{

 

 

string title = "This is the title of chart";

 

 

 

double[,] chartYValues = {

 

{-50}, {-50}, {-50}, {-50}, {-47} , {-40}, {-37}, {-25}, {0},{50},{100},{150},{250},{300},{325},{340}, {350}, {350}

};

 

 

double[,] chartXValues = {

 

{ 24 }, { 25 }, { 26 }, { 27 }, { 28 }, { 29 }, { 30 }, { 31 },{32},{33},{34},{35},{36},{37},{38},{39},{40}, {41}

};

 

 

ChartModel model = new ChartModel(new string[] { "data" }, null, chartYValues, chartXValues, title, null, null, null);

 

model.MaxYValue = 400;

model.MaxXValue = 41;

model.MinYValue = -100;

model.MinXValue = 24;

 

 

return model;

 

}

 

 

 

 

 

 

public void LoadChart(object sender, RoutedEventArgs args)

 

{

 

 

//the default type of the chart is vertical bar-chart.

 

 

 

 

 

 

 

Chart.ChartType chartType = Chart.ChartType.XYLINE;

 

 

 

//set all the information of the chart.

 

 

 

 

 

 

 

ChartModel model = LoadChartModel();

 

 

 

// create the chart

 

 

 

 

 

chart =

 

Chart.CreateChart(chartType, model);

 

 

 

//set the chart to be in 2D or in 3D

 

 

 

 

 

chart.IsPerspective =

 

false;

 

 

 

//set the position of the series labels

 

 

 

 

 

chart.LegendPosition =

 

Chart.LegendLocation.NONE;

 

 

 

//set the duration of the animation

 

 

 

 

 

chart.AnimationDuration = 0.0;

 

 

//set the formate of the

 

 

 

 

 

chart.Format =

 

"n2";

 

chart.XMajorGridCount = 16;

chart.YMajorGridCount = 4;

 

 

//set the size of the chart area.

 

 

 

 

 

chart.SetBounds(

 

new Rect(0, 0, canvasLineChart.Width, canvasLineChart.Height));

 

 

 

// add the custom component

 

 

 

 

 

canvasLineChart.Children.Add(chart);

 

 

// setup the event handler so that when mouse enter show show the information of the bar.

 

 

 

 

 

 

 

//chart.ChartClicked += new ChartEventHandler(ChartClicked);

 

 

 

 

 

chart.MouseMove +=

 

new MouseEventHandler(chart_MouseMove);

 

 

 

// now draw it

 

 

 

 

 

chart.Draw();

}

 

 

If you want to draw extra artifacts in the XYLine chart, you can extend the XYLineChart and draw the artifacts by overriding the draw the method.

 

 




Coordinator
May 11, 2008 at 5:47 PM
I forgot to mention that the graph picture that you attached looks like a spline graph. With a line graph you can get close by using a large number of data points. If you decide to extend the XYLineChart. You have to create the chart yourself using new MyChart(type, model). The base class provides you a lot of information for e.g. the marginLeft is the position from which the data points are drawn. You can also add a mouseMove handler to draw the vertical lines for selector etc.