416.467.9100 | Dundas Data Visualization | Login
Welcome Guest
Dashboard v5.0

This site makes extensive use of JavaScript.

Please enable JavaScript in your web browser and reload the page before proceeding.

Add, modify, delete values on a data control at runtime

Hide navigation
RSS
Modified on Thu, 06 Mar 2014 11:58 AM Categorized as Chart, Data Controls, Data Grid, Datasets, Design, Script Library, Scripting

Overview

You can manipulate the data on a control at run time using scripting on the dashboard. You can add, modify or delete the data points dynamically. This is useful if you don't want to affect the underlying data in the KPI/Dataset i.e. if you drop the same KPI/Dataset on another data control, it will show the original data result. You can also use this method to perform analytics and calculations on the dashboard.

This article will show the basics involved in all these operations for different types of controls. It will also help you in understanding how to read data from a control. The controls list here is not exhaustive. You may need to modify the properties used depending on the control used.

Only basic properties are shown here. Using this approach, you can change any property of the data control, if they are exposed for scripting. For example, the font color of the text, background, text of the labels etc. For all the available properties related to a control see the related Properties library. The properties of the controls used in here is given in the Related Topics section of this article.

Dataset

The Dataset below will be used for this example. You can also use a KPI. The concept remains the same.

Image

How to read the data on a control

To understand this example, you should have an idea on how the data is linked to a control and how to read the data using script at run-time. For a detailed explanation on this, see this article: Reading the data from a control

DataGrid

A Data Grid lets you display data from your KPI or dataset using a customizable, tabular view. The columns of a data grid are configured automatically when you add data to the control at design-time. A DataGrid from the above dataset will look like this:
Image


Add

To add a row to a DataGrid, you need to first add all the field values to the datapoint and then add the datapoint to the dataresult using the Add() method:

DataPoint dp = new DataPoint();

//Add FieldValues dp.FieldValues.Add(3); dp.FieldValues.Add("Earth"); dp.FieldValues.Add(3000); dp.FieldValues.Add("Planet");

//Add datapoint DataGrid1.DataDescriptors0.DataResult.DataPoints.Add(dp);


If you want to programmatically add a row to a datagrid from another data grid:

foreach (DataPoint dp in DataGrid1.DataDescriptors0.DataResult.DataPoints) //Go through each datapoint in DataGrid1 { if(dp.FieldValues1=="Earth") //Check for a condition { DataGrid2.DataDescriptors0.DataResult.DataPoints.Add(dp); //Add the matching row from DataGrid1 to DataGrid2 } }

When you add the new row you’ll get a result similar to this:
Image


Modify

If you want to modify the values in the existing datagrid, modify the related FieldValues. For example, to modify the row with the Venus:

foreach (DataPoint dp in DataGrid1.DataDescriptors0.DataResult.DataPoints) //Loop through the data points { if(dp.FieldValues1=="Venus") //Check if the value in the second column matches the condition { //Change the values of the row where the condition matches dp.FieldValues0=4; dp.FieldValues1="Mars"; dp.FieldValues2=5000; } }
Image


Refresh grid after modifying DataResult

If the grid does not reflect the changes right away, force it to show new values using the script below.

Create a new interaction in the Interactions List and name it RefreshDataGridColumns. Place the following script in this interaction:

  1. UNSUPPORTED UNLIMITED
    // Description:
    // Modifies the DataMemberPath property of any data-bound column.
    // This forces the data grid to update all the displayed values from the
    // DataPoint it's bound to.
    //
    // Arguments:
    // sender - the DashboardDataGrid or DashboardDataGridColumnGroup to refresh.
    //

DashboardDataGridColumnCollection columns = null; if (sender is DashboardDataGrid) { object columns = ((DashboardDataGrid)sender).Columns; } else if (sender is DashboardDataGridColumnGroup) { object columns = ((DashboardDataGridColumnGroup)sender).Columns; }

if (columns != null) { foreach (DashboardDataGridColumn column in columns) { if (column is DashboardDataGridDataMemberColumn) { // All text columns are bound to a particular element of the data point // (e.g. "FieldValues0"). // Temporarily bind to a different property (the FieldValues array itself) and then // back. DashboardDataGridDataMemberColumn dataColumn = (DashboardDataGridDataMemberColumn)column; string dataMemberPath = dataColumn.DataMemberPath; dataColumn.DataMemberPath = "FieldValues"; dataColumn.DataMemberPath = dataMemberPath; } else if (column is DashboardDataGridColumnGroup) { // Refresh all nested columns. services.RunDashboardInteraction("RefreshDataGridColumns", column, null); } } }


New place the following code in the Row Loaded Interaction after modifying the values. This calls the interaction above from the interactions list and refreshes the grid:



//DataGrid1.DataDescriptors0.DataResult.DataPoints0.FieldValues0 = "4"; //dp.FieldValues0=4;

services.RunDashboardInteraction("RefreshDataGridColumns", DataGrid1, null);


Remove

To remove a row, use the Remove() method on the datapoint after checking for the relevant row. For Example, to remove the row which has "Mars" from the datagrid:

for (int i=0; i0.DataResult.DataPoints.Count;i++) //Loop through all the data points { if (DataGrid1.DataDescriptors0.DataResult.DataPointsi.FieldValues1=="Mars") //Check if the value in the second column matches the condition { DataPoint dp = DataGrid1.DataDescriptors0.DataResult.DataPointsi; DataGrid1.DataDescriptors0.DataResult.DataPoints.Remove(dp); // Remove the row that matches } }

Image






Bar Chart

The Bar Chart is represented by the DashboardBarChart class, which has common chart properties and interactions. It accepts a single metric value from each KPI or dataset and a contextual metric, if added to it, and is represented by the YValues. The metric corresponds to each X axis dimension value represented by the XValue. The datapoints are of DashboardDataPoint type

When you use the dataset with a Bar Chart, you can choose the type of X-axis you want to display. This determines the type of scale on the chart which is of three types: Category, Numeric and DateTime.

Each of the scales are discussed below with add, modify and remove sections.

Category Scale

X-Axis: Planet
Y-Axis: Distance

Image


Add

To add a data point to a chart, you need to add a DashboardDataPoint type to the Series with the X and Y values.

DashboardDataPoint dp = new DashboardDataPoint();

dp.YValues.Add(3000); //Add the Y-value of the datapoint dp.XValue="Earth"; //Add the corresponding X-value for the x-axis.

BarChart1.Series0.Points.Add(dp);


Image


Modify

To modify a data point, change the YValue or the XValue of the DashboardDataPoint. In this example, both are changed:

foreach (DashboardDataPoint dp in BarChart1.Series0.Points) { if(dp.XValue=="Venus") { dp.YValues0=5000; dp.XValue="Mars"; } }
Image


Remove

To remove a datapoint, use the Remove() method on the datapoint after checking for the condition. For example, to remove "Venus" from the chart:

foreach (DashboardDataPoint dp in BarChart1.Series0.Points) { if (dp.XValue == "Venus") { BarChart1.Series0.Points.Remove(dp); } }

Image




Numeric Scale

X-Axis: Position
Y-Axis: Distance
Image


Add

To add a data point to a chart, you need to add a DashboardDataPoint type to the Series with the X and Y values. Note that the XValue is numeric in this case.

DashboardDataPoint dp = new DashboardDataPoint();

dp.YValues.Add(3000); dp.XValue=3;

BarChart1.Series0.Points.Add(dp);


Image


Modify

To modify the data point, change the YValue or the Xvalue of the DashboardDataPoint.

foreach (DashboardDataPoint dp in BarChart1.Series0.Points) { if(dp.XValue==2) { dp.YValues0=5000; } }
Image


If you modify both YValue and the Xvalue

foreach (DashboardDataPoint dp in BarChart1.Series0.Points) { if(dp.XValue==2) { dp.XValue=4; dp.YValues0=5000; } }
Image


Remove

To remove the data point, use the Remove() method.

foreach (DashboardDataPoint dp in BarChart1.Series0.Points) { if(dp.XValue==2) { BarChart1.Series0.Points.Remove(dp); } }

Image




DateTime Scale

If your chart has a DateTime scale then you can modify it as shown below:

X-Axis: Date
Y-Axis: Distance
Image

Add

To add a data point to a chart, add a DashboardDataPoint type to the Series along with the X and Y values. Note that XValue is a DateTime type.

DashboardDataPoint dp = new DashboardDataPoint();

dp.YValues.Add(3000); dp.XValue='3/3/2013'; //Convert.ToDateTime('3/3/2013');

BarChart1.Series0.Points.Add(dp);
Image

Modify

foreach (DashboardDataPoint dp in BarChart1.Series0.Points) { if(dp.XValue=='2/2/2013') { dp.YValues0=5000; } }
Image


If you modify both X and Y values:

foreach (DashboardDataPoint dp in BarChart1.Series0.Points) { if(dp.XValue=='2/2/2013') { dp.XValue='4/4/2013'; dp.YValues0=5000; } }
Image


Remove

foreach (DashboardDataPoint dp in BarChart1.Series0.Points) { if(dp.XValue=='2/2/2013') { BarChart1.Series0.Points.Remove(dp); } }
Image




Pie Chart

The Pie chart is represented by the DashboardPieChart class, which has common chart properties and interactions. It accepts a single metric from each KPI or dataset and an optional X axis dimension describing each pie slice. The method used to modify the data points would be similar to a bar chart where you can either use DashboardDataPoint type to access the points or use DashboardPieDataPoint type that will expose the IsExploded property.
Image

Add

/******* Add ********/ DashboardPieDataPoint dp = new DashboardPieDataPoint();

dp.YValues.Add(3000); dp.XValue="Earth";

PieChart1.Series0.Points.Add(dp);
Image

Modify

/******** Modify ********/ foreach (DashboardPieDataPoint dp in PieChart1.Series0.Points) { if(dp.XValue=="Venus") { dp.XValue="Mars"; dp.YValues0=5000; } }
Image

If you set IsExploded to true:

/******** Modify ********/ foreach (DashboardPieDataPoint dp in PieChart1.Series0.Points) { if(dp.XValue=="Venus") { dp.XValue="Mars"; dp.YValues0=5000; dp.IsExploded=true; } }
Image

Remove

/******* Remove *******/ foreach (DashboardPieDataPoint dp in PieChart1.Series0.Points) { if(dp.XValue=="Mars") { PieChart1.Series0.Points.Remove(dp); } }
Image

Related topics


About Dundas | Contact Us Follow us on Twitter! | Privacy Statement | Report Site Issues

Copyright © 2009-2014 Dundas Data Visualization, Inc.