Gallery

Gallery > Axis Markers

JS Axis Marker Patterns

Demonstrates weekday vs weekend axis marker calendar patterns.

Download Show C# Code Show VB Code

<%@ Page Language="C#" Description="dotnetCHARTING Component" %>

<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>

<script runat="server">

void Page_Load(Object sender, EventArgs e)
{
// This sample demonstrates weekday vs weekend axis marker calendar patterns.
//JS settings
Chart.JS.Enabled = true;
Chart.JS.Settings.Add("type", "line step");//set JS type
Chart.DefaultSeries.DefaultElement.Marker.Visible = false;
Chart.JS.RenderCallback = "setDefaultMarkerPattern";
Chart.Width = 875;
Chart.Height = 480;
Chart.TempDirectory = "temp";
Chart.Debug = false;

Chart.TitleBox.Label.Text = "Wikipedia Siteviews";
Chart.TitleBox.Label.Font = new Font("Tahoma", 9, FontStyle.Bold);
Chart.TitleBox.Position = TitleBoxPosition.Center;
Chart.TitleBox.ClearColors();
Chart.ShowDateInTitle = false;

Chart.YAxis.DefaultTick.Label.Text = "js:function(v){return (v/1000000)+'M'}";
Chart.DefaultElement.ToolTip = "<b>%xValue</b> %yValue<br>%percentOfSeries% of Days";
Chart.LegendBox.Visible = false;

DataEngine de = new DataEngine();
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/wikipediaSiteviews_2Months.csv";
de.DataFields = "xdatetime=Date,yAxis=\"ja.wikipedia.org\"";//cvs must have header: date,total
SeriesCollection sc = de.GetSeries();
sc[0].Name = "Days";
sc[0].Line.Width = 3;
Chart.SeriesCollection.Add(sc);

Chart.XAxis.Scale = Scale.Time;
Chart.XAxis.FormatString = "MMM d";
Chart.XAxis.Label.Text = "Wikipedia total pageviews from 01.10.2018 to 01.12.2018";
Chart.XAxis.Label.Font = new Font("Tahoma", 9, FontStyle.Regular);

}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script type="text/javascript">
var chart;
var patterns = {
'Weekends': { weekday: [0, 6] },
'Weekdays': { weekday: [1, 2, 3, 4, 5] }
}

function setMarkerPattern(val) {
if (typeof val == 'undefined') {
val = 'Weekends';
}
var axis = chart.axes("x");
axis.markers(0).remove();
axis.userOptions.markers = [];
axis.options({
markers: [{ value: { pattern: patterns[val] } }]
});
}
function setDefaultMarkerPattern(c) {
chart = c;
var axis = chart.axes("x");
axis.userOptions.markers = [];
axis.options({
markers: [{ value: { pattern: { weekday: [0, 6] } } }]
});
}
</script>
<style>
.container {
position: relative;
margin: 0px auto;
width: 900px;
height: 500px;
}
.tag {
float: left;
position: absolute;
left: 40px;
top: 5px;
z-index: 1000;
}
</style>
</head>
<body>

<div class="container">
<div class="tag">
<select id="displayOption" style="width: 90px;" onchange="setMarkerPattern(value)">
<option value="Weekends" selected="selected">Weekends</option>
<option value="Weekdays">Weekdays</option>
</select>
</div>
<dnc:Chart ID="Chart" runat="server" Style="max-width: 900px; margin: 0px auto;" />
</div>

</body>
</html>

<%@ Page Language="vb" Description="dotnetCHARTING Component" %>

<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>

<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' This sample demonstrates weekday vs weekend axis marker calendar patterns.
'JS settings
Chart.JS.Enabled = True
Chart.JS.Settings.Add("type", "line step") 'set JS type
Chart.DefaultSeries.DefaultElement.Marker.Visible = False
Chart.JS.RenderCallback = "setDefaultMarkerPattern"
Chart.Width = 875
Chart.Height = 480
Chart.TempDirectory = "temp"
Chart.Debug = False

Chart.TitleBox.Label.Text = "Wikipedia Siteviews"
Chart.TitleBox.Label.Font = New Font("Tahoma", 9, FontStyle.Bold)
Chart.TitleBox.Position = TitleBoxPosition.Center
Chart.TitleBox.ClearColors()
Chart.ShowDateInTitle = False

Chart.YAxis.DefaultTick.Label.Text = "js:function(v){return (v/1000000)+'M'}"
Chart.DefaultElement.ToolTip = "<b>%xValue</b> %yValue<br>%percentOfSeries% of Days"
Chart.LegendBox.Visible = False

Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/wikipediaSiteviews_2Months.csv"
de.DataFields = "xdatetime=Date,yAxis=""ja.wikipedia.org""" 'cvs must have header: date,total
Dim sc As SeriesCollection = de.GetSeries()
sc(0).Name = "Days"
sc(0).Line.Width = 3
Chart.SeriesCollection.Add(sc)

Chart.XAxis.Scale = Scale.Time
Chart.XAxis.FormatString = "MMM d"
Chart.XAxis.Label.Text = "Wikipedia total pageviews from 01.10.2018 to 01.12.2018"
Chart.XAxis.Label.Font = New Font("Tahoma", 9, FontStyle.Regular)

End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script type="text/javascript">
var chart;
var patterns = {
'Weekends': { weekday: [0, 6] },
'Weekdays': { weekday: [1, 2, 3, 4, 5] }
}

function setMarkerPattern(val) {
if (typeof val == 'undefined') {
val = 'Weekends';
}
var axis = chart.axes("x");
axis.markers(0).remove();
axis.userOptions.markers = [];
axis.options({
markers: [{ value: { pattern: patterns[val] } }]
});
}
function setDefaultMarkerPattern(c) {
chart = c;
var axis = chart.axes("x");
axis.userOptions.markers = [];
axis.options({
markers: [{ value: { pattern: { weekday: [0, 6] } } }]
});
}
</script>
<style>
.container {
position: relative;
margin: 0px auto;
width: 900px;
height: 500px;
}
.tag {
float: left;
position: absolute;
left: 40px;
top: 5px;
z-index: 1000;
}
</style>
</head>
<body>

<div class="container">
<div class="tag">
<select id="displayOption" style="width: 90px;" onchange="setMarkerPattern(value)">
<option value="Weekends" selected="selected">Weekends</option>
<option value="Weekdays">Weekdays</option>
</select>
</div>
<dnc:Chart ID="Chart" runat="server" Style="max-width: 900px; margin: 0px auto;" />
</div>

</body>
</html>

Sample FilenameJsAxisMarkerPatterns.aspx
Version9.3
Uses DatabaseNo

JS Charting

Gallery

JS Axis Marker Patterns