JS Box Positions
Demonstrates annotations showing how items are positioned and stacked around the chartArea.
<%@ 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 annotations showing how items are positioned and stacked around the chartArea.
// Set the size
Chart.Width = 850;
Chart.Height = 440;
// Set the temp directory
Chart.TempDirectory = "temp";
// Debug mode. ( Will show generated errors if any )
Chart.Debug = false;
Chart.Palette = new Color[] { };//prevent setting DNC default palette
Chart.DefaultBox.Background.Color = Color.FromArgb(248, 248, 248);
Chart.DefaultBox.Line.Width = 1;
Chart.DefaultBox.Line.Color = Color.FromArgb(240, 240, 240);
Chart.ChartArea.Line.Color = Color.LightGray;
//JS settings
Chart.JS.Enabled = true;
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
Chart.JS.Settings.Add("defaultAnnotation.margin","4");
Chart.JS.Settings.Add("annotations", "js:annotations");
//Chart.JS.Settings.Add("defaultBox.outline_width","1");
}
</script>
<script type="text/javascript">
var positions = 'top left,top,top right,right top,right,bottom right,right bottom,bottom,bottom left,left bottom,left,left top'.split(',');
function generateAnnotations() {
var result = [{
position: 'inside center',
boxVisible: false,
label: {
text: 'Annotation, uiItems, and legend <br>positioning layout around the chartArea.',
align: 'center'
}
}];
var result = result.concat(positions.map(function (pos) {
return { position: pos, label_text: pos }
}));
positions.push('center')
result = result.concat(positions.map(function (pos) {
return {
position: 'inside ' + pos,
label_text: 'inside ' + pos,
}
}));
//Double and Triple them
result = result.concat(positions.map(function (pos) {
return { position: pos, label_text: pos }
}));
result = result.concat(positions.map(function (pos) {
return {
position: 'inside ' + pos,
label_text: 'inside ' + pos,
}
}));
return result;
}
var annotations = generateAnnotations();
</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</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 annotations showing how items are positioned and stacked around the chartArea.
' Set the size
Chart.Width = 850
Chart.Height = 440
' Set the temp directory
Chart.TempDirectory = "temp"
' Debug mode. ( Will show generated errors if any )
Chart.Debug = False
Chart.Palette = New Color() { } 'prevent setting DNC default palette
Chart.DefaultBox.Background.Color = Color.FromArgb(248, 248, 248)
Chart.DefaultBox.Line.Width = 1
Chart.DefaultBox.Line.Color = Color.FromArgb(240, 240, 240)
Chart.ChartArea.Line.Color = Color.LightGray
'JS settings
Chart.JS.Enabled = True
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
Chart.JS.Settings.Add("defaultAnnotation.margin","4")
Chart.JS.Settings.Add("annotations", "js:annotations")
'Chart.JS.Settings.Add("defaultBox.outline_width","1");
End Sub
</script>
<script type="text/javascript">
var positions = 'top left,top,top right,right top,right,bottom right,right bottom,bottom,bottom left,left bottom,left,left top'.split(',');
function generateAnnotations() {
var result = [{
position: 'inside center',
boxVisible: false,
label: {
text: 'Annotation, uiItems, and legend <br>positioning layout around the chartArea.',
align: 'center'
}
}];
var result = result.concat(positions.map(function (pos) {
return { position: pos, label_text: pos }
}));
positions.push('center')
result = result.concat(positions.map(function (pos) {
return {
position: 'inside ' + pos,
label_text: 'inside ' + pos,
}
}));
//Double and Triple them
result = result.concat(positions.map(function (pos) {
return { position: pos, label_text: pos }
}));
result = result.concat(positions.map(function (pos) {
return {
position: 'inside ' + pos,
label_text: 'inside ' + pos,
}
}));
return result;
}
var annotations = generateAnnotations();
</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>
Previous