Gallery
PreviousJS Temps Compare
<%@ 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 Calendar chart with two microcharts comparing values.
Chart.Type = ChartType.Calendar;
Chart.TempDirectory = "temp";
Chart.Size = "800X700";
Chart.Debug = false;
Chart.LegendBox.Template = "%name";
Chart.LegendBox.DefaultEntry.LabelStyle.Font = new Font("Arial", 10, FontStyle.Regular);
Chart.LegendBox.ClearColors();
Chart.TitleBox.Orientation = dotnetCHARTING.Orientation.TopLeft;
Chart.TitleBox.Label.Text = "Air Temperature in Phoenix, AZ Сomparison of <icon name=material/action/timeline verticalAlign=middle color=#5c6bc0 size=20> <span color=#5c6bc0>1990</span> and <icon name=material/action/timeline color=#ec407a size=20> <span color=#ec407a>2018</span>";
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(1990, 1, 1);
Chart.JS.Calendar.EndDate = new DateTime(1990, 12, 31);
Chart.JS.Calendar.Type = JsOptions.CalendarView.Month;
Chart.JS.Calendar.DefaultEmptyElement.Color = Color.Gray;
Chart.JS.Calendar.DefaultEdgeElement.ShowValue = false;
Chart.JS.Calendar.DefaultEdgeElement.ToolTip = "";//disable tooltip
Chart.JS.Settings.Add("defaultEdgePoint.mouseTracking", "false");
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
// Default Point Event
Chart.DefaultElement.LabelTemplate = "<span style='align:left;font-size:13px;color:#9E9E9E'><b>%name</b></span><br><absolute>%temp1990%temp2018</absolute>";
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.Outline.Color = Color.White;
Chart.JS.Settings.Add("defaultPoint.focusGlow_width", "0");
Chart.JS.Settings.Add("defaultPoint.margin", "0");
Chart.DefaultElement.ShowValue = true;
Chart.ChartArea.Padding = 2;
Chart.ShadingEffectMode = ShadingEffectMode.None;
Chart.Palette = new Color[] { };//prevent setting DNC default palette
Chart.YAxis.Line.Visible = false;
}
</script>
<style type="text/css">
body {font:12px Roboto, Arial, Helvetica, sans-serif;}
</style>
</head>
<body>
<dnc:Chart ID="Chart" runat="server" style="max-width:800px;height:700px;margin:0px auto;" />
<script type="text/javascript">
var data;
function updateChart(ch) { loadData(ch, makeChart); };
function loadData(chart,cb) {
JSC.fetch('./../../data/resources/temperatureComparison.csv')
.then(function (response) { return response.text() })
.then(function (text) {
data = JSC.csv2Json(text);
try {
cb(chart)
}
catch (error) { console.error(error);}
})
.catch(function (err) { console.error(err) });
}
function makeChart(chart) {
//Format csv data into points that will bind the calendar cells.
var customSeries = getCalendarData();
chart.options({ series: customSeries });
}
function getCalendarData() {
var series = JSC.nest()
.key({ key: "time", pattern: "day" })
.pointRollup(function(key, val) {
var tooltip = "";
var color = "";
if (JSC.sum(val, "temp_1990") < JSC.sum(val, "temp_2018")) {
tooltip = "This day in 2018 was <b>warmer</b> than in 1990";
color = "#ec407a";
} else {
tooltip = "This day in 2018 was <b>colder</b> than in 1990";
color = "#5c6bc0";
}
return {
date: new Date(key),
attributes: {
temp1990:
"<chart width=90 height=68 align=center min=27 max=122 verticalAlign=top type=sparkline data=" +
val
.map(function(a) {
return a.temp_1990;
})
.join(",") +
" color=#5c6bc0>",
temp2018:
"<chart width=90 height=68 align=center min=27 max=122 verticalAlign=top type=sparkline data=" +
val
.map(function(a) {
return a.temp_2018;
})
.join(",") +
" color=#ec407a>",
min1990: JSC.min(val, "temp_1990"),
max1990: JSC.max(val, "temp_1990"),
min2018: JSC.min(val, "temp_2018"),
max2018: JSC.max(val, "temp_2018")
},
color: [color, 0.1],
states_hover_color: [color, 0.25],
tooltip:
"<b>{%date:date m}</b><br>Max/Min Temperature in 1990: <span color=#5c6bc0><b>%max1990°/%min1990°F</b></span><br>" +
"Max/Min Temperature in 2018: <span color=#ec407a><b>%max2018°/%min2018°F</b></span><br>" +
tooltip
};
})
.series(data);
return series;
}
</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 Calendar chart with two microcharts comparing values.
Chart.Type = ChartType.Calendar
Chart.TempDirectory = "temp"
Chart.Size = "800X700"
Chart.Debug = False
Chart.LegendBox.Template = "%name"
Chart.LegendBox.DefaultEntry.LabelStyle.Font = New Font("Arial", 10, FontStyle.Regular)
Chart.LegendBox.ClearColors()
Chart.TitleBox.Orientation = dotnetCHARTING.Orientation.TopLeft
Chart.TitleBox.Label.Text = "Air Temperature in Phoenix, AZ ?omparison of <icon name=material/action/timeline verticalAlign=middle color=#5c6bc0 size=20> <span color=#5c6bc0>1990</span> and <icon name=material/action/timeline color=#ec407a size=20> <span color=#ec407a>2018</span>"
Chart.TitleBox.Label.Font = New Font("Arial", 12, FontStyle.Bold)
Chart.TitleBox.ClearColors()
Chart.ChartArea.ClearColors()
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
Chart.JS.Calendar.StartDate = New DateTime(1990, 1, 1)
Chart.JS.Calendar.EndDate = New DateTime(1990, 12, 31)
Chart.JS.Calendar.Type = JsOptions.CalendarView.Month
Chart.JS.Calendar.DefaultEmptyElement.Color = Color.Gray
Chart.JS.Calendar.DefaultEdgeElement.ShowValue = False
Chart.JS.Calendar.DefaultEdgeElement.ToolTip = "" 'disable tooltip
Chart.JS.Settings.Add("defaultEdgePoint.mouseTracking", "false")
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
' Default Point Event
Chart.DefaultElement.LabelTemplate = "<span style='align:left;font-size:13px;color:#9E9E9E'><b>%name</b></span><br><absolute>%temp1990%temp2018</absolute>"
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.Outline.Color = Color.White
Chart.JS.Settings.Add("defaultPoint.focusGlow_width", "0")
Chart.JS.Settings.Add("defaultPoint.margin", "0")
Chart.DefaultElement.ShowValue = True
Chart.ChartArea.Padding = 2
Chart.ShadingEffectMode = ShadingEffectMode.None
Chart.Palette = New Color() { } 'prevent setting DNC default palette
Chart.YAxis.Line.Visible = False
End Sub
</script>
<style type="text/css">
body {font:12px Roboto, Arial, Helvetica, sans-serif;}
</style>
</head>
<body>
<dnc:Chart ID="Chart" runat="server" style="max-width:800px;height:700px;margin:0px auto;" />
<script type="text/javascript">
var data;
setTimeout(function() {
loadData(makeChart);
},100);
function loadData(cb) {
JSC.fetch('./../../data/resources/temperatureComparison.csv')
.then(function (response) { return response.text() })
.then(function (text) {
data = JSC.csv2Json(text);
try {
cb(data)
}
catch (error) { console.error(error);}
})
.catch(function (err) { console.error(err) });
}
function makeChart() {
//Format csv data into points that will bind the calendar cells.
var customSeries = getCalendarData();
myJSC.options({ series: customSeries });
}
function getCalendarData() {
var series = JSC.nest()
.key({ key: "time", pattern: "day" })
.pointRollup(function(key, val) {
var tooltip = "";
var color = "";
if (JSC.sum(val, "temp_1990") < JSC.sum(val, "temp_2018")) {
tooltip = "This day in 2018 was <b>warmer</b> than in 1990";
color = "#ec407a";
} else {
tooltip = "This day in 2018 was <b>colder</b> than in 1990";
color = "#5c6bc0";
}
return {
date: new Date(key),
attributes: {
temp1990:
"<chart width=90 height=68 align=center min=27 max=122 verticalAlign=top type=sparkline data=" +
val
.map(function(a) {
return a.temp_1990;
})
.join(",") +
" color=#5c6bc0>",
temp2018:
"<chart width=90 height=68 align=center min=27 max=122 verticalAlign=top type=sparkline data=" +
val
.map(function(a) {
return a.temp_2018;
})
.join(",") +
" color=#ec407a>",
min1990: JSC.min(val, "temp_1990"),
max1990: JSC.max(val, "temp_1990"),
min2018: JSC.min(val, "temp_2018"),
max2018: JSC.max(val, "temp_2018")
},
color: [color, 0.1],
states_hover_color: [color, 0.25],
tooltip:
"<b>{%date:date m}</b><br>Max/Min Temperature in 1990: <span color=#5c6bc0><b>%max1990�/%min1990�F</b></span><br>" +
"Max/Min Temperature in 2018: <span color=#ec407a><b>%max2018�/%min2018�F</b></span><br>" +
tooltip
};
})
.series(data);
return series;
}
</script>
</body>
</html>
- Sample FilenameJsTempsCompare.aspx
- Version10.0
- Uses DatabaseNo