Search code examples
wpfsilverlightwpf-controlssilverlight-toolkit

How to create disconnected line graph?

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. enter image description here

Solution

  • 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.

    enter image description here