When Completed

Your NetCharts Designer perspective will appear like this:
 

Getting Started

Start by closing any open editors. Go to NetCharts Designer’s File menu and select the Close All option.
 
Next, create a new project named TimeChartProject.

Create the Manual Dataset

From the toolbar click on the Create a New Dataset wizard. Name your new datasetTimeChartData, select Manual Data Entry from the Data Sources list, and click Next.
 

 
You will be presented with a grid. Copy the following data by dragging your mouse to highlight the items, and paste it into the data grid in the editing panel using the Paste From Clipboard button.
 

 
Click Finish.
 
Add the following variables to data.ndx: varStartDate with a default value of 01-Feb-2011 and varEndDate with a default value of 01-Sep-2011.
 

Create the Time Chart

Now that we have created our dataset the next step is to create the time chart. From the toolbar click on the Create a New Chart icon. Call it TimeChart, select Time Chart for the type and click Finish.
 

Bind Data to the Time Chart

Now we must bind our data that we created in Step 2 to our Time Chart. Select the Data Source Binding tab and under the Data tree control select Task Values. Choose TimeChartData.ndx as your Data Source. Select Column 1 for the Task Start and Column 2 for the Task End and click the checkbox on for rows 1‐3. Additionally, click the checkbox on for Process Row‐Major as we are reading these datasets in rows.
 

 
Next select Task Labels from the Data tree control, choose TimeChartData.ndx as the Data Source. Select column 0 for the Task Labels and click the checkbox on for Rows 1‐3.
 

Additional Style

In the Presentation tab under the Time Chart tree control you could increase the Width of the chart to 650 pixels to make the dates align better along the top axis. Not happy with the auto‐scaling on the top axis? Select Axes from the tree control, Top Axis and then from the Date Scale group you can give a different Min and Max date or change the time scaling via the Step parameter. Also, you could increase the right margin on the top axis to 30 pixels so the date value does not clip.
 

Creating a page, and adding Calendar Controls

Add a page called page, and drag TimeChart.cdx onto the page layout. Click OK and close its resource menu.
 
From the pallet on the left, drag an HTML Form Element over the chart on the page layout. When the name of the chart name becomes pink, release the mouse button, and select the Vertical radio button. From the Select an HTML Form Element drop down menu, select Date Picker.
 

 
Click OK.
 
On the Date Picker Element Properties Dialog, Leave the Cell Style as is for now, and selectvarStartDate from the Page Variable Drop Down menu. Uncheck the Use current date checkbox.Click the Select Date button, and use the dialog provided to configure 01/02/2011 for the Default Value. Enter Please Select a Start Date: for a label, and create a style calledCalendarControlLabelStyle which uses a 10 point Bold Arial font.
 

 
Drag another HTML Form Element over the existing Calendar Control and tile it Horizontally. Select another Date Picker, and configure its Date Picker Element Properties dialog, using variable varEndDate, Default Value of 01/09/2011 and altering the label to specify the end date accordingly.
 

 
Position your mouse pointer just below the innermost box surrounding the two icons representing the Calendar Controls on the page layout, and double click. When done properly, a black box enclosing the box around the two icons should appear, and an Edit Cell Properties dialog is launched. Create a DatePickerCellStyle, and uncheck the Cell Width Autosize checkbox and enter the width of 600 pixels, click OK to the Text Style dialog, and click OK to the Edit Cell Properties dialog.
 
Test that dates chosen using the Calendar Controls alter the chart from its default appearance:
 

 
Click on the calendar icon underneath the edit box containing the date, and select another date. Notice nothing will occur, as the variables are tied to the forth row of data we did not add. Alter your chart to include row 4 in both the data and label assignments. Now select the new start and end dates. The Christmas Party Planning time line will adjust accordingly.