Gallery
PreviousJS Rankings Matrix Diagram
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Collections.Generic" %>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
// Demonstrates interactive matrix diagram chart of NBA team ranking using series selection.
Chart.Size = "800x800";
Chart.TitleBox.Label.Text = "NBA Teams Ranking";
Chart.TitleBox.Label.Font = new Font("Tahoma", 20, FontStyle.Regular);
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.Palette = new Color[] { ColorTranslator.FromHtml("#01579b") };
Chart.ChartArea.ClearColors();
Chart.Type = ChartType.ComboHorizontal;
Chart.LegendBox.Visible = false;
Chart.DefaultSeries.DefaultElement.SmartLabel.Alignment = LabelAlignment.Center;
Chart.DefaultSeries.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Center;
// Forces labels to draw inside the marker by removing alternative positions.
Chart.DefaultSeries.DefaultElement.SmartLabel.AlignmentSecondary.Clear();
Chart.DefaultSeries.Type = SeriesType.Marker;
Chart.DefaultSeries.DefaultElement.Marker.Type = ElementMarkerType.Circle;
Chart.DefaultSeries.DefaultElement.Marker.Size = 17;
Chart.DefaultSeries.DefaultElement.Transparency = 80;
Chart.DefaultSeries.DefaultElement.ShowValue = true;
Chart.DefaultSeries.DefaultElement.SmartLabel.Color = Color.White;
Chart.DefaultSeries.DefaultElement.SmartLabel.Text = "%yvalue";
Chart.DefaultSeries.DefaultElement.SmartLabel.Font = new Font("Tahoma", 8.5F);
Chart.JS.Settings.Add("defaultSeries.states.select.opacity", "1");
Chart.JS.Settings.Add("defaultSeries.states.hover.enabled", "false");
Chart.JS.Settings.Add("defaultSeries.states.mute.enabled", "false");
Chart.JS.Settings.Add("defaultSeries.defaultPoint.events.mouseover", "js:function(){pointHover(this);}");
Chart.YAxis.ScaleRange.ValueHigh = 31;
Chart.YAxis.Label.Text = "Yvalue";
Chart.XAxis.ClearValues = true;
// Enable JSCharting
Chart.JS.Enabled = true;
Chart.JS.RenderCallback = "callbackFunc";
Chart.DefaultElement.ToolTip = "js:tooltipFormatter";
DataEngine de = new DataEngine();
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/nba-seasons-ranking.csv";
de.DataFields = "splitby=team,name=season,yvalue=rank,w,l";//cvs must have header season,rank,team,w,l
SeriesCollection sc = de.GetSeries();
SeriesCollection dataSeries = new SeriesCollection();
Chart.SeriesCollection.Add(sc);
foreach (Series se in sc)
{
selectState.Items.Add(new ListItem(se.Name, se.Name));
}
}
private Element findElement(string name, ElementCollection ec)
{
foreach (Element el in ec)
if (el.Name == name)
return el;
return null;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script type="text/javascript">
function wrapInColor(text, color) { return "<b><span style='fontSize:15px;color:" + color + "'>" + text + '</span></b>'; }
function tooltipFormatter(point) { return '<span style="font-size:14px">%seriesName</span><br>Season: <b>%yValue</b><br>Rank: <b>%xValue</b><br>W-L: <b>%w-%l</b>'; }
var chart;
function callbackFunc(c) {
chart = c;
highlightSeries('Milwaukee Bucks');
}
function countryChanged(v) {
highlightSeries(v.value);
}
function highlightSeries(id) {
var selectedSeries = chart.series(function (s) {
return s.options('selected');
}).items;
if (selectedSeries.length) {
unselect(selectedSeries[0]);
}
select(chart.series(id));
function select(ser) {
ser.options({ selected: true});
}
function unselect(ser) {
ser.options({ selected: false }, false);
}
}
function pointHover(point) {
var id = point.series.options('name');
highlightSeries(id);
dropdownSelect(id);
}
function dropdownSelect(id) {
var selectEl = document.getElementById('selectState');
for (
var i = 0;
i < selectEl.options.length;
i++
) {
if (selectEl.options[i].text === id) {
selectEl.options[i].selected = true;
return;
}
}
}
</script>
</head>
<body>
<form runat="server">
<div style="width: 800px; margin: 0px auto;">
<div style="padding-left: 36px; font: 12px Arial;">
<asp:HiddenField ID="data" runat="server" />
<select runat="server" id="selectState" style="margin-left:47px;height:25px;" onchange="countryChanged(this)">
</select>
</div>
<dnc:Chart ID="Chart" runat="server" />
</div>
</form>
</body>
</html>
<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Collections.Generic" %>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates interactive matrix diagram chart of NBA team ranking using series selection.
Chart.Size = "800x800"
Chart.TitleBox.Label.Text = "NBA Teams Ranking"
Chart.TitleBox.Label.Font = New Font("Tahoma", 20, FontStyle.Regular)
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.Palette = New Color() { ColorTranslator.FromHtml("#01579b") }
Chart.ChartArea.ClearColors()
Chart.Type = ChartType.ComboHorizontal
Chart.LegendBox.Visible = False
Chart.DefaultSeries.DefaultElement.SmartLabel.Alignment = LabelAlignment.Center
Chart.DefaultSeries.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Center
' Forces labels to draw inside the marker by removing alternative positions.
Chart.DefaultSeries.DefaultElement.SmartLabel.AlignmentSecondary.Clear()
Chart.DefaultSeries.Type = SeriesType.Marker
Chart.DefaultSeries.DefaultElement.Marker.Type = ElementMarkerType.Circle
Chart.DefaultSeries.DefaultElement.Marker.Size = 17
Chart.DefaultSeries.DefaultElement.Transparency = 80
Chart.DefaultSeries.DefaultElement.ShowValue = True
Chart.DefaultSeries.DefaultElement.SmartLabel.Color = Color.White
Chart.DefaultSeries.DefaultElement.SmartLabel.Text = "%yvalue"
Chart.DefaultSeries.DefaultElement.SmartLabel.Font = New Font("Tahoma", 8.5F)
Chart.JS.Settings.Add("defaultSeries.states.select.opacity", "1")
Chart.JS.Settings.Add("defaultSeries.states.hover.enabled", "false")
Chart.JS.Settings.Add("defaultSeries.states.mute.enabled", "false")
Chart.JS.Settings.Add("defaultSeries.defaultPoint.events.mouseover", "js:function(){pointHover(this);}")
Chart.YAxis.ScaleRange.ValueHigh = 31
Chart.YAxis.Label.Text = "Yvalue"
Chart.XAxis.ClearValues = True
' Enable JSCharting
Chart.JS.Enabled = True
Chart.JS.RenderCallback = "callbackFunc"
Chart.DefaultElement.ToolTip = "js:tooltipFormatter"
Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/nba-seasons-ranking.csv"
de.DataFields = "splitby=team,name=season,yvalue=rank,w,l" 'cvs must have header season,rank,team,w,l
Dim sc As SeriesCollection = de.GetSeries()
Dim dataSeries As SeriesCollection = New SeriesCollection()
Chart.SeriesCollection.Add(sc)
For Each se As Series In sc
selectState.Items.Add(New ListItem(se.Name, se.Name))
Next se
End Sub
Private Function findElement(ByVal name As String, ByVal ec As ElementCollection) As Element
For Each el As Element In ec
If el.Name = name Then
Return el
End If
Next el
Return Nothing
End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script type="text/javascript">
function wrapInColor(text, color) { return "<b><span style='fontSize:15px;color:" + color + "'>" + text + '</span></b>'; }
function tooltipFormatter(point) { return '<span style="font-size:14px">%seriesName</span><br>Season: <b>%yValue</b><br>Rank: <b>%xValue</b><br>W-L: <b>%w-%l</b>'; }
var chart;
function callbackFunc(c) {
chart = c;
highlightSeries('Milwaukee Bucks');
}
function countryChanged(v) {
highlightSeries(v.value);
}
function highlightSeries(id) {
var selectedSeries = chart.series(function (s) {
return s.options('selected');
}).items;
if (selectedSeries.length) {
unselect(selectedSeries[0]);
}
select(chart.series(id));
function select(ser) {
ser.options({ selected: true});
}
function unselect(ser) {
ser.options({ selected: false }, false);
}
}
function pointHover(point) {
var id = point.series.options('name');
highlightSeries(id);
dropdownSelect(id);
}
function dropdownSelect(id) {
var selectEl = document.getElementById('selectState');
for (
var i = 0;
i < selectEl.options.length;
i++
) {
if (selectEl.options[i].text === id) {
selectEl.options[i].selected = true;
return;
}
}
}
</script>
</head>
<body>
<form runat="server">
<div style="width: 800px; margin: 0px auto;">
<div style="padding-left: 36px; font: 12px Arial;">
<asp:HiddenField ID="data" runat="server" />
<select runat="server" id="selectState" style="margin-left:47px;height:25px;" onchange="countryChanged(this)">
</select>
</div>
<dnc:Chart ID="Chart" runat="server" />
</div>
</form>
</body>
</html>
- Sample FilenameJsRankingsMatrixDiagram.aspx
- Version10.3
- Uses DatabaseNo