Gallery

Gallery > Axis Ticks And Labels

JS Axis Cat Groups

This sample deomonstrates multi-level category axis range tick labels.

Download Show C# Code Show VB Code

<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">

void Page_Load(Object sender, EventArgs e)
{
// This sample deomonstrates multi-level category axis range tick labels.
Chart.Type = ChartType.Combo;
Chart.Size = "800x350";
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.Title = "Stock Inventory";
Chart.JS.Enabled = true;
Chart.JS.Buttons.EnablePrintButton = false;
Chart.JS.Buttons.EnableExportButton = false;

Chart.DefaultElement.ShowValue = true;
Chart.YAxis.Line.Width = 0;
Chart.YAxis.ClearValues = true;
Chart.ChartArea.ClearColors();
Chart.ChartArea.TitleBox.ClearColors();
Chart.ChartArea.LegendBox.Position = LegendBoxPosition.ChartArea;
Chart.ChartArea.LegendBox.Orientation = dotnetCHARTING.Orientation.TopRight;

AxisTick at = new AxisTick();
at.Label.Text = "Shelf 1";
at.Value = "['Milk','Water']";
Chart.XAxis.ExtraTicks.Add(at);

at = new AxisTick();
at.Label.Text = "Shelf 2";
at.Value = "['Sugar', 'Honey']";
Chart.XAxis.ExtraTicks.Add(at);

at = new AxisTick();
at.Label.Text = "Shelf 1";
at.Value = "['Wheat', 'Corn']";
Chart.XAxis.ExtraTicks.Add(at);

at = new AxisTick();
at.Label.Text = "Shelf 2";
at.Value = "['Chicken','Beef']";
Chart.XAxis.ExtraTicks.Add(at);

at = new AxisTick();
at.Label.Text = "Room A";
at.Value = "['Milk','Honey']";
Chart.XAxis.ExtraTicks.Add(at);

at = new AxisTick();
at.Label.Text = "Room B";
at.Value = "['Wheat','Beef']";
Chart.XAxis.ExtraTicks.Add(at);

// *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
SeriesCollection mySC = getRandomData();
// Add the random data.
Chart.SeriesCollection.Add(mySC);

}
SeriesCollection getRandomData()
{
SeriesCollection SC = new SeriesCollection();
Series s = new Series();
s.Name = "All Items";
s.Elements.Add(new Element("Milk", 6));
s.Elements.Add(new Element("Water", 4));
s.Elements.Add(new Element("Sugar", 5));
s.Elements.Add(new Element("Honey", 3));
s.Elements.Add(new Element("Wheat", 6));
s.Elements.Add(new Element("Corn", 5));
s.Elements.Add(new Element("Chicken", 3));
s.Elements.Add(new Element("Beef", 2));
SC.Add(s);

return SC;
}
</script>
</head>
<body>
<div align="center">
<dotnet:Chart id="Chart" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
</div>
</body>
</html>

<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<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)
' This sample deomonstrates multi-level category axis range tick labels.
Chart.Type = ChartType.Combo
Chart.Size = "800x350"
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.Title = "Stock Inventory"
Chart.JS.Enabled = True
Chart.JS.Buttons.EnablePrintButton = False
Chart.JS.Buttons.EnableExportButton = False

Chart.DefaultElement.ShowValue = True
Chart.YAxis.Line.Width = 0
Chart.YAxis.ClearValues = True
Chart.ChartArea.ClearColors()
Chart.ChartArea.TitleBox.ClearColors()
Chart.ChartArea.LegendBox.Position = LegendBoxPosition.ChartArea
Chart.ChartArea.LegendBox.Orientation = dotnetCHARTING.Orientation.TopRight

Dim at As AxisTick = New AxisTick()
at.Label.Text = "Shelf 1"
at.Value = "['Milk','Water']"
Chart.XAxis.ExtraTicks.Add(at)

at = New AxisTick()
at.Label.Text = "Shelf 2"
at.Value = "['Sugar', 'Honey']"
Chart.XAxis.ExtraTicks.Add(at)

at = New AxisTick()
at.Label.Text = "Shelf 1"
at.Value = "['Wheat', 'Corn']"
Chart.XAxis.ExtraTicks.Add(at)

at = New AxisTick()
at.Label.Text = "Shelf 2"
at.Value = "['Chicken','Beef']"
Chart.XAxis.ExtraTicks.Add(at)

at = New AxisTick()
at.Label.Text = "Room A"
at.Value = "['Milk','Honey']"
Chart.XAxis.ExtraTicks.Add(at)

at = New AxisTick()
at.Label.Text = "Room B"
at.Value = "['Wheat','Beef']"
Chart.XAxis.ExtraTicks.Add(at)

' *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
Dim mySC As SeriesCollection = getRandomData()
' Add the random data.
Chart.SeriesCollection.Add(mySC)

End Sub
Function getRandomData() As SeriesCollection
Dim SC As SeriesCollection = New SeriesCollection()
Dim s As Series = New Series()
s.Name = "All Items"
s.Elements.Add(New Element("Milk", 6))
s.Elements.Add(New Element("Water", 4))
s.Elements.Add(New Element("Sugar", 5))
s.Elements.Add(New Element("Honey", 3))
s.Elements.Add(New Element("Wheat", 6))
s.Elements.Add(New Element("Corn", 5))
s.Elements.Add(New Element("Chicken", 3))
s.Elements.Add(New Element("Beef", 2))
SC.Add(s)

Return SC
End Function
</script>
</head>
<body>
<div align="center">
<dotnet:Chart id="Chart" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
</div>
</body>
</html>

Sample FilenameJsAxisCatGroups.aspx
Version9.3
Uses DatabaseNo

JS Charting

Gallery

JS Axis Cat Groups