JS Win Loss Grid
Demonstrates how to create a datagrid with winloss charts
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Collections.Generic" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
// Demonstrates how to create a datagrid with winloss charts
Chart chartGrid = new Chart();
chartGrid.TempDirectory = "temp";
chartGrid.JS.Enabled = true;
chartGrid.DataGrid = "gridDiv";
chartGrid.JS.DataGrid.Enabled = true;
chartGrid.JS.DataGrid.EnableExportButton = false;
chartGrid.JS.DataGrid.StandAlone = true;
chartGrid.JS.Data = getData();
chartGrid.JS.DataGrid.Columns.Add("Nation", "%nation", "align:left");
chartGrid.JS.DataGrid.Columns.Add("Win/Loss", "<chart column data=%chartData width=280 colors=#66BB6A,#EF5350>", "align:left");
chartGrid.JS.DataGrid.Columns.Add("Wins", "%wins", "align:right");
chartGrid.JS.DataGrid.ClassName = "dataTable";
this.Controls.Add(chartGrid);
}
string getData()
{
Dictionary<string, int[]> countries = new Dictionary<string, int[]>();
countries.Add("Norway", new int[] { 1924, 1928, 1936, 1948, 1952, 1968, 2002, 2018 });
countries.Add("Soviet Union", new int[] { 1956, 1960, 1964, 1972, 1976, 1980, 1988 });
countries.Add("Germany", new int[] { 1992, 1998, 2006 });
countries.Add("Russia", new int[] { 1994, 2014 });
countries.Add("East Germany", new int[] { 1984 });
countries.Add("Canada", new int[] { 2010 });
countries.Add("Sweden", new int[] { 1948 });
countries.Add("Unated States", new int[] { 1932 });
StringBuilder sb = new StringBuilder();
foreach (var country in countries)
{
string chartData = "";
int[] winterOlympicYears = new int[] { 1924, 1928, 1932, 1936, 1948, 1952, 1956, 1960, 1964, 1968, 1972, 1976, 1980, 1984, 1988, 1992, 1994, 1998, 2002, 2004, 2008, 2010, 2012, 2016, 2018 };
foreach (int year in winterOlympicYears)
{
if (Array.IndexOf(country.Value, year) > -1)
chartData += "1,";
else
chartData += "-1,";
}
chartData = chartData.Substring(0, chartData.Length - 1);
int wins = country.Value.GetLength(0);
string result = "{nation: '" + country.Key + "',chartData:'" + chartData + "',wins:" + wins.ToString() + "}";// "[{nation:{0},chartData:'{1}',wins:{2}}]", country.Key, chartData, wins.ToString());
sb.Append(result);
sb.Append(",");
}
sb = sb.Remove(sb.Length - 1, 1);
return "[" + sb.ToString() + "]";
}
</script>
<style type="text/css">
.jscGrid .dataTable {
width: 500px;
margin: 0 auto;
padding-top: 0px;
}
.jscGrid .dataTable thead th {
background-color: #eeeeee;
color: #424242;
font-size: 14px;
font-weight: bold;
border: none;
}
.jscGrid .dataTable tr {
background-color: white !important;
}
.jscGrid .dataTable td {
vertical-align: middle;
font-size: 12px;
}
</style>
</head>
<body>
<div class="jscGrid">
<p style="font-family: Helvetica; text-align: center;">Winter Olympic Games Top Nations: 1924 - 2018</p>
<div id="gridDiv"></div>
</div>
</body>
</html>
<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Collections.Generic" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates how to create a datagrid with winloss charts
Dim chartGrid As Chart = New Chart()
chartGrid.TempDirectory = "temp"
chartGrid.JS.Enabled = True
chartGrid.DataGrid = "gridDiv"
chartGrid.JS.DataGrid.Enabled = True
chartGrid.JS.DataGrid.EnableExportButton = False
chartGrid.JS.DataGrid.StandAlone = True
chartGrid.JS.Data = getData()
chartGrid.JS.DataGrid.Columns.Add("Nation", "%nation", "align:left")
chartGrid.JS.DataGrid.Columns.Add("Win/Loss", "<chart column data=%chartData width=280 colors=#66BB6A,#EF5350>", "align:left")
chartGrid.JS.DataGrid.Columns.Add("Wins", "%wins", "align:right")
chartGrid.JS.DataGrid.ClassName = "dataTable"
Me.Controls.Add(chartGrid)
End Sub
Function getData() As String
Dim countries As Dictionary(Of String, Integer()) = New Dictionary(Of String, Integer())()
countries.Add("Norway", New Integer() { 1924, 1928, 1936, 1948, 1952, 1968, 2002, 2018 })
countries.Add("Soviet Union", New Integer() { 1956, 1960, 1964, 1972, 1976, 1980, 1988 })
countries.Add("Germany", New Integer() { 1992, 1998, 2006 })
countries.Add("Russia", New Integer() { 1994, 2014 })
countries.Add("East Germany", New Integer() { 1984 })
countries.Add("Canada", New Integer() { 2010 })
countries.Add("Sweden", New Integer() { 1948 })
countries.Add("Unated States", New Integer() { 1932 })
Dim sb As StringBuilder = New StringBuilder()
Dim country
For Each country In countries
Dim chartData As String = ""
Dim winterOlympicYears As Integer() = New Integer() {1924, 1928, 1932, 1936, 1948, 1952, 1956, 1960, 1964, 1968, 1972, 1976, 1980, 1984, 1988, 1992, 1994, 1998, 2002, 2004, 2008, 2010, 2012, 2016, 2018}
For Each year As Integer In winterOlympicYears
If Array.IndexOf(country.Value, year) > -1 Then
chartData &= "1,"
Else
chartData &= "-1,"
End If
Next year
chartData = chartData.Substring(0, chartData.Length - 1)
Dim wins As Integer = country.Value.GetLength(0)
Dim result As String = "{nation: '" & country.Key & "',chartData:'" & chartData & "',wins:" & wins.ToString() & "}" ' "[{nation:{0},chartData:'{1}',wins:{2}}]", country.Key, chartData, wins.ToString());
sb.Append(result)
sb.Append(",")
Next country
sb = sb.Remove(sb.Length - 1, 1)
Return "[" & sb.ToString() & "]"
End Function
</script>
<style type="text/css">
.jscGrid .dataTable {
width: 500px;
margin: 0 auto;
padding-top: 0px;
}
.jscGrid .dataTable thead th {
background-color: #eeeeee;
color: #424242;
font-size: 14px;
font-weight: bold;
border: none;
}
.jscGrid .dataTable tr {
background-color: white !important;
}
.jscGrid .dataTable td {
vertical-align: middle;
font-size: 12px;
}
</style>
</head>
<body>
<div class="jscGrid">
<p style="font-family: Helvetica; text-align: center;">Winter Olympic Games Top Nations: 1924 - 2018</p>
<div id="gridDiv"></div>
</div>
</body>
</html>
Previous