Nevron Chart ThinWeb control implements a few common interactivity tools that aim to provide desktop like experience over the the web. The following sections describe the behavior of each tools:
The panel selector tool as the name implies is used to dynamically select the active panel, which then becomes the target of tools that require such panel (like trackball, data zoom, panning etc). In order to create a panel selector tool you need to create an instance of the NPanelSelectorTool class and add it to the control tools collection:
| C# |
Copy Code
|
|
NThinChartControl1.Controller.Tools.Add(new NPanelSelectorTool());
|
| Visual Basic |
Copy Code
|
NThinChartControl1.Controller.Tools.Add(new NPanelSelectorTool())
|
This tool is useful when you have multiple charts in a single control and want to give the user the ability to dynamically switch between them. The following code snippet creates two pie charts that can be rotated with the mouse - note that the code also intercepts the panel selector tool callback and provides some visual feedback of the currently selected chart.
| C# |
Copy Code
|
|
protected void Page_Load(object sender, EventArgs e)
{
if (!NThinChartControl1.Initialized)
{
// get the default chart
NThinChartControl1.Panels.Clear();
// create the first pie chart
NPieChart pieChart1 = CreatePieChart();
pieChart1.Location = new NPointL(0, 0);
pieChart1.Size = new NSizeL(new NLength(50, NRelativeUnit.ParentPercentage), new NLength(100, NRelativeUnit.ParentPercentage));
NThinChartControl1.Panels.Add(pieChart1);
// create the second pie chart
NPieChart pieChart2 = CreatePieChart();
pieChart2.Location = new NPointL(new NLength(50, NRelativeUnit.ParentPercentage), new NLength(0));
pieChart2.Size = new NSizeL(new NLength(50, NRelativeUnit.ParentPercentage), new NLength(100, NRelativeUnit.ParentPercentage));
NThinChartControl1.Panels.Add(pieChart2);
// apply style sheet
NStyleSheet styleSheet = NStyleSheet.CreatePredefinedStyleSheet(PredefinedStyleSheet.NevronMultiColor);
styleSheet.Apply(NThinChartControl1.Document);
// add panel selector and trackball tools
NPanelSelectorTool panelSelector = new NPanelSelectorTool();
panelSelector.ActivatePanelCallback = new ActivatePanelCallback();
NThinChartControl1.Controller.Tools.Add(panelSelector);
NThinChartControl1.Controller.Tools.Add(new NTrackballTool());
}
}
private NPieChart CreatePieChart()
{
NPieChart pieChart = new NPieChart();
pieChart.Enable3D = true;
pieChart.Margins = new NMarginsL(10, 10, 10, 10);
NPieSeries pieSeries = new NPieSeries();
pieSeries.DataLabelStyle.Visible = false;
pieChart.Series.Add(pieSeries);
pieSeries.Values.Add(10);
pieSeries.Values.Add(20);
pieSeries.Values.Add(30);
return pieChart;
}
[Serializable]
class ActivatePanelCallback : INActivatePanelCallback
{
#region INActivatePanelCallback Members
void INActivatePanelCallback.OnActivatePanel(NThinChartControl control, NContentPanel newActivePanel, NContentPanel oldActivePanel)
{
// when the currently active panel changes, change its border to prompt the user
if (oldActivePanel != null)
{
oldActivePanel.BorderStyle = null;
}
if (newActivePanel != null)
{
newActivePanel.BorderStyle = new NStrokeBorderStyle();
}
control.UpdateView();
}
#endregion
}
}
|
In some cases you may want to have only one active panel in the control regardless of whether you have multiple charts or not. In this case you can manually set the currently active panel trough code - for example:
| C# |
Copy Code
|
|
NThinChartControl1.Controller.SetActivePanel(NThinChartControl1.Charts[0]);
|
| Visual Basic |
Copy Code
|
|
NThinChartControl1.Controller.SetActivePanel(NThinChartControl1.Charts(0))
|
The code above sets the active panel to be the first chart in the control charts collection.
The trackball tool allows the user to change the rotation and elevation properties of the currently selected chart. This tool works only in case the currently active chart is operating in 3D mode. In order to use the trackball tool you must create an instance of the NTrackballTool object and add it to the control Tools collection:
| C# |
Copy Code
|
|
NThinChartControl1.Controller.Tools.Add(new NTrackballTool());
|
| Visual Basic |
Copy Code
|
|
NThinChartControl1.Controller.Tools.Add(new NTrackballTool())
|
Note that the tool requires the control to have an active chart. Check out the Panel Selector Tool for more information on how to set the active chart.
The following code snippet shows how to create a simple rotatable pie chart that displays the current rotation and elevation parameters in a label.
| C# |
Copy Code
|
|
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!NThinChartControl1.Initialized)
{
// get the default chart
NThinChartControl1.Panels.Clear();
// create the first pie chart
NPieChart pieChart = new NPieChart();
NLabel label = new NLabel();
label.Text = "Rotation [" + pieChart.Projection.Rotation.ToString() + "], Elevation [" + pieChart.Projection.Elevation.ToString() + "]";
label.Dock = DockStyle.Top;
NThinChartControl1.Panels.Add(label);
pieChart.Enable3D = true;
pieChart.Dock = DockStyle.Fill;
pieChart.Margins = new NMarginsL(10, 10, 10, 10);
NPieSeries pieSeries = new NPieSeries();
pieSeries.DataLabelStyle.Visible = false;
pieChart.Series.Add(pieSeries);
pieSeries.Values.Add(10);
pieSeries.Values.Add(20);
pieSeries.Values.Add(30);
NThinChartControl1.Panels.Add(pieChart);
// apply style sheet
NStyleSheet styleSheet = NStyleSheet.CreatePredefinedStyleSheet(PredefinedStyleSheet.NevronMultiColor);
styleSheet.Apply(NThinChartControl1.Document);
// add trackball tool
NThinChartControl1.Controller.SetActivePanel(pieChart);
NTrackballTool trackballTool = new NTrackballTool();
trackballTool.TrackballCallback = new TrackballCallback();
NThinChartControl1.Controller.Tools.Add(trackballTool);
}
}
[Serializable]
class TrackballCallback : INTrackballCallback
{
#region INTrackballCallback Members
public void OnTrackball(NThinChartControl control, NChart chart, float oldRotation, float oldElevation)
{
// update the label
control.Labels[0].Text = "Rotation [" + chart.Projection.Rotation.ToString() + "], Elevation [" + chart.Projection.Elevation.ToString() + "]";
}
#endregion
}
}
|