Gallery
PreviousJS Grid Dynamic
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
// Demonstrates datagrid and chart combination displaying step data.
Chart.Type = ChartType.Combo;
Chart.Width = 840;
Chart.Height = 480;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.DefaultSeries.Type = SeriesType.Line;
Chart.JS.Enabled = true;
Chart.JS.DataGrid.Enabled = true;
Chart.JS.DataGrid.EnableExportButton = false;
Chart.JS.RenderCallback = "callbackFunc";
Chart.LegendBox.Visible = false;
Chart.YAxis.FormatString = "n:0";
Chart.YAxis.Label.Text = "Steps";
Chart.XAxis.Label.Text = "Date";
Chart.XAxis.FormatString = "MMM";
Chart.DefaultSeries.DefaultElement.Marker.Visible = false;
// *DYNAMIC DATA NOTE*
// This sample uses random data to populate the chart. To populate
// a chart with database data see the following resources:
// - Classic samples folder
// - Help File > Data Tutorials
// - Sample: features/DataEngine.aspx
}
</script>
<style type="text/css">
.dnc {
margin: 0px auto;
max-width: 840px;
}
</style>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" Width="840px" Height="600px" CssClass="dnc" />
<div id='controls'>
<input type="button" value="Daily" onclick="redraw('day')">
<input type="button" value="Week" onclick="redraw('week')">
<input type="button" value="Month" onclick="redraw('month')">
<input type="button" value="Weekday" onclick="redraw('weekday')">
<select id="calculationDD" onchange="redraw(groupingBy)">
<option>sum</option>
<option>mean</option>
<option>min</option>
<option>max</option>
</select>
</div>
<div id="container" style="max-width: 430px; height: 450px; margin: 0px auto;">
</div>
</div>
<script type="text/javascript">
var grid = undefined;
var nest, stepData, year = 2020, calcFn = 'sum', groupingBy = 'month',
dateFormatters = { month: 'date MMM', week: 'date d', day: 'date d', weekday: 'n' },
maxValues = { month: 200000, week: 100000, day: 20000, weekday: 350000 },
firstColHeaders = { month: 'Month', week: 'Week', day: 'Day', weekday: 'Weekday' },
secondColHeaders = { sum: 'Sum', min: 'Min', max: 'Max', mean: 'Mean' };
var weekdays = 'Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday'.split(',');
function viewToOptions(view, calc) {
var max = calc === 'sum' ? maxValues[view] : 20000;
return {
columns: [
{ header: firstColHeaders[view], value: '{%xValue:' + dateFormatters[view] + '}' },
{ header: secondColHeaders[calc], value: '{%yValue:n0}' },
{ header: '<chart scale data=0,' + max + 'K color=white>', value: '<chart bar colors=#0277bd,,#ddd data=%yValue max=' + max + '>', align: 'center' },
{ header: 'Daily', value: '<chart sparkline data=%list>', align: 'center' }]
};
}
var redraw;
function callbackFunc(chart) {
loadData(chart);
redraw = function (groupBy) {
var calEl = document.getElementById("calculationDD");
var calc = calEl.options[calEl.selectedIndex].text;
setDataView(groupBy, calc);
grid && grid.options(viewToOptions(groupBy, calc), false);
if (groupingBy === 'weekday') {
chart.axes('x').options({ scale_interval: { unit: 1 } });
}
else {
chart.axes('x').options({ scale_interval: { unit: 'month' } });
}
chart.series(0).options({ points: nest.points(stepData) });
}
}
function loadData(myChart) {
JSC.fetch('./../../data/resources/stepData20.csv').then(function (response) { return response.text() }).then(function (text) {
stepData = JSC.csv2Json(text);
setDataView(groupingBy);
var customSeries = nest.series(stepData);
myChart.options({ series: [{ points: customSeries[0].points }] }, false);
myChart.toGrid('container', viewToOptions(groupingBy, 'sum')).then(function (g) { grid = g; });
});
};
function setDataView(groupBy, calculation) {
groupingBy = groupBy;
calcFn = calculation || calcFn;
nest = JSC.nest()
.key({ key: 'Date', pattern: groupBy, range: ['1/1/2020', '12/31/2020'] })
.rollup('Actual')
.pointRollup(rollupFn);
function rollupFn(key, values) {
if (groupingBy === 'weekday') {
return {
x: weekdays[key],
y: JSC[calcFn](values),
attributes: { list: values.join(',') }
}
}
return {
x: key,
y: JSC[calcFn](values),
attributes: { list: values.join(',') }
}
}
}
</script>
</body>
</html>
<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<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 datagrid and chart combination displaying step data.
Chart.Type = ChartType.Combo
Chart.Width = 840
Chart.Height = 480
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.DefaultSeries.Type = SeriesType.Line
Chart.JS.Enabled = True
Chart.JS.DataGrid.Enabled = True
Chart.JS.DataGrid.EnableExportButton = False
Chart.JS.RenderCallback = "callbackFunc"
Chart.LegendBox.Visible = False
Chart.YAxis.FormatString = "n:0"
Chart.YAxis.Label.Text = "Steps"
Chart.XAxis.Label.Text = "Date"
Chart.XAxis.FormatString = "MMM"
Chart.DefaultSeries.DefaultElement.Marker.Visible = False
' *DYNAMIC DATA NOTE*
' This sample uses random data to populate the chart. To populate
' a chart with database data see the following resources:
' - Classic samples folder
' - Help File > Data Tutorials
' - Sample: features/DataEngine.aspx
End Sub
</script>
<style type="text/css">
.dnc {
margin: 0px auto;
max-width: 840px;
}
</style>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" Width="840px" Height="600px" CssClass="dnc" />
<div id='controls'>
<input type="button" value="Daily" onclick="redraw('day')">
<input type="button" value="Week" onclick="redraw('week')">
<input type="button" value="Month" onclick="redraw('month')">
<input type="button" value="Weekday" onclick="redraw('weekday')">
<select id="calculationDD" onchange="redraw(groupingBy)">
<option>sum</option>
<option>mean</option>
<option>min</option>
<option>max</option>
</select>
</div>
<div id="container" style="max-width: 430px; height: 450px; margin: 0px auto;">
</div>
</div>
<script type="text/javascript">
var grid = undefined;
var nest, stepData, year = 2020, calcFn = 'sum', groupingBy = 'month',
dateFormatters = { month: 'date MMM', week: 'date d', day: 'date d', weekday: 'n' },
maxValues = { month: 200000, week: 100000, day: 20000, weekday: 350000 },
firstColHeaders = { month: 'Month', week: 'Week', day: 'Day', weekday: 'Weekday' },
secondColHeaders = { sum: 'Sum', min: 'Min', max: 'Max', mean: 'Mean' };
var weekdays = 'Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday'.split(',');
function viewToOptions(view, calc) {
var max = calc === 'sum' ? maxValues[view] : 20000;
return {
columns: [
{ header: firstColHeaders[view], value: '{%xValue:' + dateFormatters[view] + '}' },
{ header: secondColHeaders[calc], value: '{%yValue:n0}' },
{ header: '<chart scale data=0,' + max + 'K color=white>', value: '<chart bar colors=#0277bd,,#ddd data=%yValue max=' + max + '>', align: 'center' },
{ header: 'Daily', value: '<chart sparkline data=%list>', align: 'center' }]
};
}
var redraw;
function callbackFunc(chart) {
loadData(chart);
redraw = function (groupBy) {
var calEl = document.getElementById("calculationDD");
var calc = calEl.options[calEl.selectedIndex].text;
setDataView(groupBy, calc);
grid && grid.options(viewToOptions(groupBy, calc), false);
if (groupingBy === 'weekday') {
chart.axes('x').options({ scale_interval: { unit: 1 } });
}
else {
chart.axes('x').options({ scale_interval: { unit: 'month' } });
}
chart.series(0).options({ points: nest.points(stepData) });
}
}
function loadData(myChart) {
JSC.fetch('./../../data/resources/stepData20.csv').then(function (response) { return response.text() }).then(function (text) {
stepData = JSC.csv2Json(text);
setDataView(groupingBy);
var customSeries = nest.series(stepData);
myChart.options({ series: [{ points: customSeries[0].points }] }, false);
myChart.toGrid('container', viewToOptions(groupingBy, 'sum')).then(function (g) { grid = g; });
});
};
function setDataView(groupBy, calculation) {
groupingBy = groupBy;
calcFn = calculation || calcFn;
nest = JSC.nest()
.key({ key: 'Date', pattern: groupBy, range: ['1/1/2020', '12/31/2020'] })
.rollup('Actual')
.pointRollup(rollupFn);
function rollupFn(key, values) {
if (groupingBy === 'weekday') {
return {
x: weekdays[key],
y: JSC[calcFn](values),
attributes: { list: values.join(',') }
}
}
return {
x: key,
y: JSC[calcFn](values),
attributes: { list: values.join(',') }
}
}
}
</script>
</body>
</html>
- Sample FilenameJsGridDynamic.aspx
- Version9.3
- Uses DatabaseNo