JS Calendar Lunar Phase
Demonstrates Lunar phase icons calendar chart loaded from csv.
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" 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 Lunar phase icons calendar chart loaded from csv.
Chart.Type = ChartType.Calendar;
Chart.TempDirectory = "temp";
Chart.Size = "700X500";
Chart.Debug = false;
Chart.LegendBox.Template = "%name";
Chart.LegendBox.DefaultEntry.LabelStyle.Font = new Font("Arial", 10, FontStyle.Regular);
Chart.LegendBox.ClearColors();
Chart.TitleBox.Label.Text = "2020 Lunar Phases";
Chart.TitleBox.Label.Font = new Font("Arial", 12, FontStyle.Bold);
Chart.TitleBox.ClearColors();
Chart.ChartArea.ClearColors();
Chart.JS.Enabled = true;
Chart.JS.RenderCallback = "updateChart";
Chart.JS.Calendar.StartDate = new DateTime(2020, 1, 1);
Chart.JS.Calendar.EndDate = new DateTime(2020, 12, 31);
Chart.JS.Calendar.Type = JsOptions.CalendarView.Month;
Chart.JS.Calendar.DefaultEmptyElement.Color = Color.Gray;
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
// Default Point Event
Chart.JS.Settings.Add("defaultPoint.attributes_phase", "''");
Chart.DefaultElement.LabelTemplate = "<span style='align:right'><b>%name</b></span><br>%phase";
Chart.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Near;//vertical
Chart.DefaultElement.SmartLabel.Alignment = LabelAlignment.Top;// StringAlignment.Near;
Chart.DefaultElement.SmartLabel.Font = new Font("Arial", 9, FontStyle.Bold);
Chart.DefaultElement.ShowValue = true;
Chart.ChartArea.Padding = 0;
Chart.ShadingEffectMode = ShadingEffectMode.None;
Chart.Palette = new Color[] { };//prevent setting DNC default palette
Chart.YAxis.Line.Visible = false;
}
</script>
</head>
<body>
<dnc:Chart ID="Chart" runat="server" style="max-width:700px;height:500px;margin:0px auto;" />
<script type="text/javascript" src="temp/JSC/icons/weather/all.js"></script>
<script type="text/javascript">
var phaseToIcon = {
'Full Moon': 'weather/fullmoon',
'New Moon': 'weather/newmoon',
'First Quarter': 'weather/first-quarter',
'Last Quarter': 'weather/last-quarter',
'Waxing gibbous': 'weather/waxing-gibbous',
'Waning gibbous': 'weather/waning-gibbous',
'Waning crescent': 'weather/waning-cresent',
'Waxing crescent': 'weather/waxing-cresent'
};
function updateChart(ch) { loadData(ch, makeChart); };
function loadData(chart, cb) {
JSC.fetch('./../../data/resources/MoonPhases_2020.csv')
.then(function(response) { return response.text() })
.then(function(text) {
var parsed = JSC.parseCsv(text);
cb(chart,parsed.data)
})
.catch(function(err) {console.error(err)});
}
function makeChart(chart,data) {
//Format csv data into points that will bind the calendar cells.
var customSeries = [{
points: data.map(function (row) {
return {
date: row[0],
tooltip: '<b>{%date:date d}</b><br>' + row[1],
attributes_phase: '<icon name=' + (phaseToIcon[row[1]] || 'weather/fullmoon') + ' size=30 fill=#156787>',
}
})
}];
chart.options({ series: [{ points: customSeries[0].points }] });
}
</script>
</body>
</html>
<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" 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 Lunar phase icons calendar chart loaded from csv.
Chart.Type = ChartType.Calendar
Chart.TempDirectory = "temp"
Chart.Size = "700X500"
Chart.Debug = False
Chart.LegendBox.Template = "%name"
Chart.LegendBox.DefaultEntry.LabelStyle.Font = New Font("Arial", 10, FontStyle.Regular)
Chart.LegendBox.ClearColors()
Chart.TitleBox.Label.Text = "2020 Lunar Phases"
Chart.TitleBox.Label.Font = New Font("Arial", 12, FontStyle.Bold)
Chart.TitleBox.ClearColors()
Chart.ChartArea.ClearColors()
Chart.JS.Enabled = True
Chart.JS.RenderCallback = "updateChart"
Chart.JS.Calendar.StartDate = New DateTime(2020, 1, 1)
Chart.JS.Calendar.EndDate = New DateTime(2020, 12, 31)
Chart.JS.Calendar.Type = JsOptions.CalendarView.Month
Chart.JS.Calendar.DefaultEmptyElement.Color = Color.Gray
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
' Default Point Event
Chart.JS.Settings.Add("defaultPoint.attributes_phase", "''")
Chart.DefaultElement.LabelTemplate = "<span style='align:right'><b>%name</b></span><br>%phase"
Chart.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Near 'vertical
Chart.DefaultElement.SmartLabel.Alignment = LabelAlignment.Top ' StringAlignment.Near;
Chart.DefaultElement.SmartLabel.Font = New Font("Arial", 9, FontStyle.Bold)
Chart.DefaultElement.ShowValue = True
Chart.ChartArea.Padding = 0
Chart.ShadingEffectMode = ShadingEffectMode.None
Chart.Palette = New Color() { } 'prevent setting DNC default palette
Chart.YAxis.Line.Visible = False
End Sub
</script>
</head>
<body>
<dnc:Chart ID="Chart" runat="server" style="max-width:700px;height:500px;margin:0px auto;" />
<script type="text/javascript" src="temp/JSC/icons/weather/all.js"></script>
<script type="text/javascript">
var phaseToIcon = {
'Full Moon': 'weather/fullmoon',
'New Moon': 'weather/newmoon',
'First Quarter': 'weather/first-quarter',
'Last Quarter': 'weather/last-quarter',
'Waxing gibbous': 'weather/waxing-gibbous',
'Waning gibbous': 'weather/waning-gibbous',
'Waning crescent': 'weather/waning-cresent',
'Waxing crescent': 'weather/waxing-cresent'
};
function updateChart(ch) { loadData(ch, makeChart); };
function loadData(chart, cb) {
JSC.fetch('./../../data/resources/MoonPhases_2020.csv')
.then(function(response) { return response.text() })
.then(function(text) {
var parsed = JSC.parseCsv(text);
cb(chart,parsed.data)
})
.catch(function(err) {console.error(err)});
}
function makeChart(chart,data) {
//Format csv data into points that will bind the calendar cells.
var customSeries = [{
points: data.map(function (row) {
return {
date: row[0],
tooltip: '<b>{%date:date d}</b><br>' + row[1],
attributes_phase: '<icon name=' + (phaseToIcon[row[1]] || 'weather/fullmoon') + ' size=30 fill=#156787>',
}
})
}];
chart.options({ series: [{ points: customSeries[0].points }] });
}
</script>
</body>
</html>
Previous