Column Chart

Jul 16, 2013 at 3:11 PM
Hi,
can i see how to create a column chart using sparrow toolkit for WP8
Coordinator
Jul 16, 2013 at 8:47 PM
Hi,

You can create column chart in Windows Phone 8 as like in the below code snippet
//Create a model
public class Model
    {
        public string X { get; set; }
        public double Y { get; set; }
       
        public Model(string x,double y)
        {
            X = x;
            Y = y;           
        }      
    }

// Create a ViewModel
public class ViewModel
    {
        public ObservableCollection<Model> Collection { get; set; }
        public ViewModel()
        {
            Collection = new ObservableCollection<Model>();
            GenerateDatas();
        }
        private void GenerateDatas()
        {
            this.Collection.Add(new Model("Data 0", 1));
            this.Collection.Add(new Model("Data 1", 2));
            this.Collection.Add(new Model("Data 2", 3));
            this.Collection.Add(new Model("Data 3", 4));
        }
    }

//Use the viewmodel in the Sparrow Chart
<sparrow:SparrowChart>
       <sparrow:SparrowChart.DataContext> 
              <local:ViewModel/>
      </sparrow:SparrowChart.DataContext>
            <sparrow:SparrowChart.XAxis>
                    <sparrow:CategoryXAxis/>
            </sparrow:SparrowChart.XAxis>
            <sparrow:SparrowChart.YAxis>
                    <sparrow:LinearYAxis/>
            </sparrow:SparrowChart.YAxis>
           <sparrow:ColumnSeries PointsSource={Binding Collection} XPath="X" YPath="Y"/>
</sparrow:SparrowChart>
Thanks,
Vinoth Kumar J
Jul 17, 2013 at 11:36 AM
thank you vinothsparrow for reply,
i have implement your code in this way :
// the view model
 public class GraphViewModel
    {
        public DateTime Date { get; set; }

        public string CatName { get; set; }

        public double Exchange { get; set; }
    }

 private ObservableCollection<GraphViewModel> graphViewModels;
        public ObservableCollection<GraphViewModel> GraphViewModels
        {
            get
            {
                return graphViewModels;
            }
            set
            {
                if (graphViewModels != value)
                {
                    graphViewModels = value;
                    NotifyPropertyChanged("GraphViewModels");
                }
            }
        }

// fill view model list
GraphViewModels = Fill();

//spChart is the chart name
spChart.Visibility = Visibility.Visible;
spChart.DataContext = GraphViewModels;

// the sparrow control
<sparrow:SparrowChart x:Name="spChart"   Visibility="Collapsed">
                   
                    <sparrow:SparrowChart.XAxis>
                        <sparrow:CategoryXAxis Header="Categories"/>
                    </sparrow:SparrowChart.XAxis>
                    <sparrow:SparrowChart.YAxis>
                        <sparrow:LinearYAxis Header="Exchanges"/>
                    </sparrow:SparrowChart.YAxis>
                    <sparrow:ColumnSeries PointsSource="{Binding GraphViewModels}" XPath="CatName" YPath="Exchange"/>
                </sparrow:SparrowChart>
and i have tho following exception message :
base = {System.Windows.LayoutCycleException: Layout cycle detected. Layout could not complete.}

and thankx for your help
Coordinator
Jul 17, 2013 at 6:02 PM
Hi,

Thanks for the update.

Change your XAML code as like in the below code snippet.
                 <sparrow:SparrowChart x:Name="spChart"   Visibility="Collapsed">                   
                    <sparrow:SparrowChart.XAxis>
                        <sparrow:CategoryXAxis Header="Categories"/>
                    </sparrow:SparrowChart.XAxis>
                    <sparrow:SparrowChart.YAxis>
                        <sparrow:LinearYAxis Header="Exchanges"/>
                    </sparrow:SparrowChart.YAxis>
                    <sparrow:ColumnSeries PointsSource="{Binding}" XPath="CatName" YPath="Exchange"/>
                </sparrow:SparrowChart>
Thanks,
Vinoth Kumar
Jul 18, 2013 at 8:46 PM
Hi, vinothsparrow
i have updated my code as your snippet and still receiving the same exception
Jul 23, 2013 at 2:53 PM
Hi,
ready, you found the error?

I do ...
Occurs when the name of X are very long.
how I can fix that?
Jul 24, 2013 at 4:17 AM
Finally, I was able to solve this
problem.
Jul 27, 2013 at 11:31 AM
hi, dacopan
thanks for reply
how did you solve this problem ?
Jul 27, 2013 at 12:54 PM
oh, thanks dacopan for the hint
it is working now
Jul 27, 2013 at 3:03 PM
yes, when de name of xaxis its more tan 4 letters you can put an angle to the label...
so, I can learn how chnge the colors for each series