Create code to supply and populate the data

  • Chart title, subtitle and series names can be either bound to or supplied with values.
  • Each series must have a different name.
  • A 'Display Member' and 'Value Member' (x-axis and y-axis values) need to be specified when binding the data in the series.
  • If more than one series are defined the series will be overlayed on top of each other. The series should have the same number of elements and the same display members. If they have different display members you will get more datapoints than you expect in each series.
Note : If you have different display members (or leave some out), all of the points will be shown in each series and those that are not in the series will default to a value of 0. If you are careful this could actually be a powerful way of minimising the amount of data you need to supply. However, the tooltips will not show as you want as these are linked to the display member and values

Example code

The below code is a cut-down version of the code used the the test application provided.
  • GraphSeriesInformation - contains the series title and the list of datapoints for the series
  • GraphSeriesDataPoint - contains the two values for the data-points, in this case called 'date' and 'amount'

    public class GraphSeriesInformation 
    {
        private string _seriesDisplayName;
        public string seriesDisplayName
        {
            get
            {
                return _seriesDisplayName;
            }
            set
            {
                if (_seriesDisplayName != value)
                {
                    _seriesDisplayName = value;
                }
            }
        }

        public ObservableCollection<GraphSeriesDataPoint> Items { get; set; }
    }

 public class GraphSeriesDataPoint
        {
            private string _date;
            public string date
            {
                get
                {
                    return _date;
                }
                set
                {
                    if (_date != value)
                    {
                        _date = value;
                    }
                }
            }

            private double _amount;
            public double amount
            {
                get
                {
                    return _amount;
                }
                set
                {
                    if (_amount != value)
                    {
                        _amount = value;
                    }
                }
            }
        }
  • Populate the data
        private GraphSeriesInformation _scatterData;
        public GraphSeriesInformation scatterData
        {
            get
            {
                return _scatterData;
            }
            set
            {
                if (_scatterData != value)
                {
                    _scatterData = value;
                }
            }
        }

        private GraphSeriesInformation _scatterData1;
        public GraphSeriesInformation scatterData1
        {
            get
            {
                return _scatterData1;
            }
            set
            {
                if (_scatterData1 != value)
                {
                    _scatterData1 = value;
                    RaisePropertyChanged("scatterData1");
                }
            }
        }

        private GraphSeriesInformation _scatterData2;
        public GraphSeriesInformation scatterData2
        {
            get
            {
                return _scatterData2;
            }
            set
            {
                if (_scatterData2 != value)
                {
                    _scatterData2 = value;
                    RaisePropertyChanged("scatterData2");
                }
            }
        }

        public MainViewModel()
        {
            
         
            scatterData = new GraphSeriesInformation();
            scatterData.seriesDisplayName = "Series 1";
            scatterData.Items.Add(new GraphSeriesDataPoint("mon", 7));
            scatterData.Items.Add(new GraphSeriesDataPoint("tue", 3.3));
            scatterData.Items.Add(new GraphSeriesDataPoint("wed", 4.5));
            scatterData.Items.Add(new GraphSeriesDataPoint("thur", 5.2));
            scatterData.Items.Add(new GraphSeriesDataPoint("fri", 3.3));
            scatterData.Items.Add(new GraphSeriesDataPoint("sat", 1));
            scatterData.Items.Add(new GraphSeriesDataPoint("sun", 1));

            scatterData1 = new GraphSeriesInformation();
            scatterData1.seriesDisplayName = "Series 2";
            scatterData1.Items.Add(new GraphSeriesDataPoint("mon", 1));
            scatterData1.Items.Add(new GraphSeriesDataPoint("tue", 2));
            scatterData1.Items.Add(new GraphSeriesDataPoint("wed", 4.0));
            scatterData1.Items.Add(new GraphSeriesDataPoint("thur", 9));
            scatterData1.Items.Add(new GraphSeriesDataPoint("fri", 2.8));
            scatterData1.Items.Add(new GraphSeriesDataPoint("sat", 3));
            scatterData1.Items.Add(new GraphSeriesDataPoint("sun", 0));

            scatterData2 = new GraphSeriesInformation();
            scatterData2.seriesDisplayName = "Series 3";
            scatterData2.Items.Add(new GraphSeriesDataPoint("mon", 10));
            scatterData2.Items.Add(new GraphSeriesDataPoint("tue", 23));
            scatterData2.Items.Add(new GraphSeriesDataPoint("wed", 20));
            scatterData2.Items.Add(new GraphSeriesDataPoint("thur", 19));
            scatterData2.Items.Add(new GraphSeriesDataPoint("fri", 7));
            scatterData2.Items.Add(new GraphSeriesDataPoint("sat", 0));
            scatterData2.Items.Add(new GraphSeriesDataPoint("sun", 10));
}

Last edited Aug 8, 2015 at 1:22 AM by gravityapps, version 3