How to create disconnected line graph? [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance. Closed 10 years ago.

I am working with Silverlight and WPF stock exchange application. I'm trying to create a 开发者_运维百科graph like scattered line graph.

How can I draw this chart? Can it be done by Silverlight Toolkit graph? Or can any one suggest me any easy but nice looking charting library?

I have drawn the chart image in paint for your reference.

---

You can create the above chart easily using Visifire. I have attached the following XAML code for the same.

<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Theme="Theme1" Width="500" Height="300">

            <vc:Chart.Series>
                <vc:DataSeries RenderAs="Line">
                    <vc:DataSeries.DataPoints>
                        <vc:DataPoint XValue="1" YValue="6"></vc:DataPoint>
                        <vc:DataPoint XValue="2" YValue="10"></vc:DataPoint>
                        <vc:DataPoint XValue="1.5" YValue="" ></vc:DataPoint>
                        <vc:DataPoint XValue="1.5" YValue="5" ></vc:DataPoint>
                        <vc:DataPoint XValue="3" YValue="3" ></vc:DataPoint>
                        <vc:DataPoint XValue="2.8" YValue="" ></vc:DataPoint>
                        <vc:DataPoint XValue="2.8" YValue="8" ></vc:DataPoint>
                        <vc:DataPoint XValue="3.5" YValue="12" ></vc:DataPoint>
                        <vc:DataPoint XValue="3.5" YValue="" ></vc:DataPoint>
                        <vc:DataPoint XValue="3.5" YValue="8" ></vc:DataPoint>
                        <vc:DataPoint XValue="4.2" YValue="12" ></vc:DataPoint>
                        <vc:DataPoint XValue="4" YValue="" ></vc:DataPoint>
                        <vc:DataPoint XValue="4" YValue="8" ></vc:DataPoint>
                        <vc:DataPoint XValue="5" YValue="6" ></vc:DataPoint>
                    </vc:DataSeries.DataPoints>
                </vc:DataSeries>
            </vc:Chart.Series>
        </vc:Chart>

As you can see, I have used single series here with broken lines.

Below is the image for the above chart XAML.

---

Why not just use the standard WPF/Silverlight drawing methods? Since your requirements are not too complex, you could just throw a canvas with some lines and rectangles:

private void AddEdge(Point from, Point to, int nodeWidth)
{
    Line line = new Line()
    {
        X1 = from.X,
        Y1 = from.Y,
        X2 = to.X,
        Y2 = to.Y,
        Stroke = Brushes.Black,
    };

    Rectangle nodeFrom = new Rectangle()
    {
        Height = nodeWidth,
        Width = nodeWidth,
        Fill = Brushes.Black,
    };
    Canvas.SetLeft(nodeFrom, from.X - nodeWidth / 2);
    Canvas.SetTop(nodeFrom, from.Y - nodeWidth / 2);

    Rectangle nodeTo = new Rectangle()
    {
        Height = nodeWidth,
        Width = nodeWidth,
        Fill = Brushes.Black,
    };
    Canvas.SetLeft(nodeTo, to.X - nodeWidth / 2);
    Canvas.SetTop(nodeTo, to.Y - nodeWidth / 2);

    LayoutRoot.Children.Add(line);
    LayoutRoot.Children.Add(nodeFrom);
    LayoutRoot.Children.Add(nodeTo);
}

Then you can add edges easily:

Point from = new Point(15, 15);
Point to = new Point(100, 200);

AddEdge(from, to, 8);

You can also customize the styles of the nodes and lines as you want by only changing the brushes.

Hope it helps!

---

You want beautiful chart right? Then I Suggest you to look into Visifire. You can have a look to the following example from Visifire Chart Gallery.

http://visifire.com/silverlight_spline_charts_gallery.php