Set a Value Field

To set the value field name, assign it to the valueField property. Similarly to the argumentField property, valueField is set differently depending on the UI component in use.

• Chart
  If you have only one series in your chart, specify the valueField property within the series object.

  JavaScript

  var chartOptions = {
      //...
      series: {
          valueField: 'year',
          // ...
      }
  };

  If you have several series in your chart, assign an array of objects to the series property and specify an individual value field for each object of this array.

  JavaScript

  var chartOptions = {
      //...
      series: [{
          valueField: 'copper',
          // ...
      }, {
          valueField: 'nickel',
          // ...
      }]
  };

  Certain series types require several value fields to be specified for one series. In these instances, data source fields must be set using properties particular to a specific series type. For example, the following code snippet shows how to specify value fields for a range series.

  JavaScript

  var rangeDataSource = [
      { month: 'January', min1: 36, max1: 43.29, min2:  42.12, max2: 49.91 },
      //...
  ];
  var chartOptions = {
      //...
      dataSource: rangeDataSource,
      commonSeriesSettings: {
          type: 'rangebar' // type: 'rangearea'
      },
      series: [
          { rangeValue1Field: 'min1', rangeValue2Field: 'max1' },
          { rangeValue1Field: 'min2', rangeValue2Field: 'max2' }
      ]
  };

  The following code demonstrates how to set value fields for a financial series.

  JavaScript

  var stockDataSource = [
      { date: new Date(1994,2,1), lowPrice: 24.00, highPrice: 25.00, openPrice: 25.00, closePrice: 24.875 },
      //...
  ];
  var chartOptions = {
      //...
      dataSource: stockDataSource,
      commonSeriesSettings: {
          type: 'stock' // type: 'candlestick',
      },
      series: {         
           openValueField: 'openPrice',
           closeValueField: 'closePrice',
           lowValueField: 'lowPrice',
           highValueField: 'highPrice'
      }
  };

  Series of the Bubble type slightly differ from other series. Along with the value field, they require the size field to be specified. The code below illustrates how to specify the value and size fields for the bubble series.

  JavaScript

  var dataSource = [
      { month: 'January', val1: 24, size1: 25, val2: 14, size2: 31  },
      //...
  ];
  var chartOptions = {
      //...
      dataSource: dataSource,
      commonSeriesSettings: {
          type: 'bubble'
      },
      series: [
          { valueField: 'val1', sizeField: 'size1' },
          { valueField: 'val2', sizeField: 'size2' }
      ]
  });

• PieChart
  To specify the value field for a series in the PieChart UI component, set the valueField property within the series object.

  JavaScript

  $("#pieChartContainer").dxPieChart({
      //...
      series: {
          valueField: 'copper',
          // ...
      }
  });

• Sparkline
  The valueField property for the Sparkline UI component must be specified in the root configuration object.

  JavaScript

  $("#sparklineContainer").dxSparkline({
      //...
      valueField: 'year'
  });

At this point, you have created a data source and configured data-binding settings of your UI component. If your data source is supposed to be invariable, these actions are sufficient to support a correct operation of your UI component. But you may have a scenario that requires a data source to be changed dynamically, and these changes must be reflected in your UI component. Refer to the next topic to learn the approaches you can use for updating data in that case.