Gallery

Gallery > Dashboards And InfoGrids

Chart Micro Axis

Demonstrates using MicroCharts on axis tick labels to give more detail about the data.

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)
{
// Demonstrates using MicroCharts on axis tick labels to give more detail about the data.
Chart.JS.Enabled = true;
Chart.TempDirectory = "temp";
Chart.Debug = true;

Chart.Size = "600x350";
Chart.Title = "1st Week of 2021 Sales";
Chart.DefaultElement.ShowValue = true;
Chart.YAxis.FormatString = "Currency";
Chart.YAxis.Interval = 25;
Chart.LegendBox.Visible = false;

//Chart.Background.ShadingEffectMode = ShadingEffectMode.Seven;
// Get the same data as for the first chart.
SeriesCollection mySC = getRandomData();

// Transpose it to get a sum series (3 bars).
mySC.Transpose();
Color [] palette = ChartPalettes.GetPalette(Palette.Default);
Series sum = mySC.Calculate("", Calculation.Sum);
// Color each bar separately.
sum.Palette = palette;
Chart.SeriesCollection.Add(sum);

// Transpose it back.
mySC.Transpose();

// Set the name for each bar manualy getting the daily values from the original mySC collection.
int i = 0;
foreach (Series s in mySC)
{
sum[i].Name = "<Chart:Column color='"+getHTMLColor(palette[i])+"' values='" + s.GetYValueList() + "' width='100'><row><block hAlign='Center'>Mon - Sun<row><block fStyle='Bold'>" + sum[i++].Name;
}
// The X Axis ticks will by default show the element names which will carry the markup for the micro charts.

}

SeriesCollection getRandomData()
{
Random myR = new Random(2);
SeriesCollection SC = new SeriesCollection();
for (int a = 1; a < 5; a++)
{
Series s = new Series("Product " + a.ToString());
for (int b = 1; b < 8; b++)
{
Element e = new Element(b.ToString());
e.YValue = myR.Next(50);
s.Elements.Add(e);
}
SC.Add(s);
}
return SC;
}

SeriesCollection getLiveData()
{
DataEngine de = new DataEngine("ConnectionString goes here");
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.SqlStatement = "SELECT XAxisColumn, YAxisColumn FROM ....";
return de.GetSeries();
}
/// <summary>
/// Helper method to turn a color object into HTML color format like #A0187E
/// </summary>
string getHTMLColor(Color c)
{
string col = c.R.ToString("X2") + c.G.ToString("X2") + c.B.ToString("X2");
return "#" + col;
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</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)
' Demonstrates using MicroCharts on axis tick labels to give more detail about the data.
Chart.JS.Enabled = True
Chart.TempDirectory = "temp"
Chart.Debug = True

Chart.Size = "600x350"
Chart.Title = "1st Week of 2021 Sales"
Chart.DefaultElement.ShowValue = True
Chart.YAxis.FormatString = "Currency"
Chart.YAxis.Interval = 25
Chart.LegendBox.Visible = False

'Chart.Background.ShadingEffectMode = ShadingEffectMode.Seven;
' Get the same data as for the first chart.
Dim mySC As SeriesCollection = getRandomData()

' Transpose it to get a sum series (3 bars).
mySC.Transpose()
Dim palette As Color() = ChartPalettes.GetPalette(dotnetCHARTING.Palette.Default)
Dim sum As Series = mySC.Calculate("", Calculation.Sum)
' Color each bar separately.
sum.Palette = palette
Chart.SeriesCollection.Add(sum)

' Transpose it back.
mySC.Transpose()

' Set the name for each bar manualy getting the daily values from the original mySC collection.
Dim i As Integer = 0
For Each s As Series In mySC
sum(i).Name = "<Chart:Column color='" & getHTMLColor(palette(i)) & "' values='" & s.GetYValueList() & "' width='100'><row><block hAlign='Center'>Mon - Sun<row><block fStyle='Bold'>" & sum(i).Name
i = i + 1
Next s
' The X Axis ticks will by default show the element names which will carry the markup for the micro charts.

End Sub

Function getRandomData() As SeriesCollection
Dim myR As Random = New Random(2)
Dim SC As SeriesCollection = New SeriesCollection()
For a As Integer = 1 To 4
Dim s As Series = New Series("Product " & a.ToString())
For b As Integer = 1 To 7
Dim e As Element = New Element(b.ToString())
e.YValue = myR.Next(50)
s.Elements.Add(e)
Next b
SC.Add(s)
Next a
Return SC
End Function

Function getLiveData() As SeriesCollection
Dim de As DataEngine = New DataEngine("ConnectionString goes here")
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.SqlStatement = "SELECT XAxisColumn, YAxisColumn FROM ...."
Return de.GetSeries()
End Function
''' <summary>
''' Helper method to turn a color object into HTML color format like #A0187E
''' </summary>
Function getHTMLColor(ByVal c As Color) As String
Dim col As String = c.R.ToString("X2") + c.G.ToString("X2") + c.B.ToString("X2")
Return "#" & col
End Function
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

Sample FilenameChartMicroAxis.aspx
Version5.2
Uses DatabaseNo

JS Charting

Gallery

Chart Micro Axis