Gallery
PreviousJS Bullet Dashboard
<%@ 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 Bullet micro charts with labels and axes
setChartDefault(hbullet1);
setChartDefault(hbullet2);
setChartDefault(hbullet3);
setChartDefault(hbullet4);
setChartDefault(vbullet1);
setChartDefault(vbullet2);
setChartDefault(vbullet3);
setChartDefault(vbullet4);
setChartDefault(vbullet5);
setChartDefault(vbullet6);
setChartDefault(chart);
chart.TitleBox.Label.Text = "Total number of shops worldwide (2008-2019)";
chart.TitleBox.Position = TitleBoxPosition.Center;
chart.TitleBox.Label.Color = Color.Black;
chart.TitleBox.Label.Font = new Font("tahoma, geneva, sans-serif", 16, FontStyle.Regular);
chart.Palette = new Color[] { ColorTranslator.FromHtml("#26c6da")};
chart.DefaultElement.ToolTip = "Number of shops in {%xValue:date yyyy} year: <b>%value</b>";
chart.XAxis.DefaultTick.GridLine.Width = 0;
chart.YAxis.Line.Width = 0;
chart.YAxis.DefaultTick.GridLine.Color = Color.LightGray;
chart.SeriesCollection.Add(getData());
hbullet1.ObjectChart = new dotnetCHARTING.Label(makeHorizontalBullet("Revenue ($B)","500.343","485.873","[300, 450]","600" ));
hbullet2.ObjectChart = new dotnetCHARTING.Label(makeHorizontalBullet("Net sales ($B)", "495.761", "481.317", "[250, 450]", "600"));
hbullet3.ObjectChart = new dotnetCHARTING.Label(makeHorizontalBullet("Operating income ($B)", "20.437", "22.764", "[10, 20]", "30"));
hbullet4.ObjectChart = new dotnetCHARTING.Label(makeHorizontalBullet("Gross profit margin (%)", "24.7", "24.9", "[15, 20]", "30"));
vbullet1.ObjectChart = new dotnetCHARTING.Label(makeVerticalBullet("US", "4761", "4672", "[2500, 4500]", "5000"));
vbullet2.ObjectChart = new dotnetCHARTING.Label(makeVerticalBullet("Brazil", "465", "498", "[250, 500]", "550"));
vbullet3.ObjectChart = new dotnetCHARTING.Label(makeVerticalBullet("Canada", "410", "410", "[240, 400]", "500"));
vbullet4.ObjectChart = new dotnetCHARTING.Label(makeVerticalBullet("Japan", "336", "341", "[170, 320]", "400"));
vbullet5.ObjectChart = new dotnetCHARTING.Label(makeVerticalBullet("Mexico", "2358", "2411", "[1600, 2200]", "2500"));
vbullet6.ObjectChart = new dotnetCHARTING.Label(makeVerticalBullet("China", "443", "510", "[250, 500]", "550"));
}
void setChartDefault(Chart c)
{
c.JS.Enabled = true;
c.Debug = true;
c.ChartArea.ClearColors();
c.LegendBox.Visible = false;
c.ChartArea.Shadow.Visible = false;
}
/* Bullets chart data */
string makeHorizontalBullet(string name, string value,string tranget,string range,string max)
{
string str = "<span style='width:130px; verticalAlign:middle; align:right;'>" +name +"</span>" +
"<chart:Bullet margin_left=5 size=270x30 min=0 colors=#26c6da,black,#80deea,#b2ebf2,#e0f7fa max=" +
max +" data=" + value + "," + tranget +"," +range +" tooltip=" +value +"><br>" +
"<chart:Scale margin_left=135 size=270x20 orientation=bottom min=0 max="+max +">";
return str;
}
string makeVerticalBullet(string name, string value,string tranget,string range,string max)
{
string str = "<chart:Bullet margin_bottom=4 size=200x32 rotate=-90 min=0 colors=#26c6da,black,#80deea,#b2ebf2,#e0f7fa max=" +
max + " data=" + value + "," + tranget + "," + range + " tooltip=" + value + ">" +
"<chart:Scale size=200x20 margin_bottom=4 orientation=bottom rotate=-90 type=scale min=0 max=" + max + "><br>" +
"<span style='width:45px;align:center;'>" + name + "</span>";
return str;
}
SeriesCollection getData()
{
SeriesCollection SC = new SeriesCollection();
double[] stores = { 4916, 5106, 5611, 6773, 7415, 7949, 8460, 8535, 8702, 8725, 8773 };
for (int a = 1; a < 2; a++)
{
Series s = new Series();
s.Name = "Series " + a.ToString();
for (int b = 0; b < 11; b++)
{
Element e = new Element();
e.Name = (b+2008).ToString();
e.YValue = stores[b];
s.Elements.Add(e);
}
SC.Add(s);
}
return SC;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<style type="text/css">
#dashWrapper {
max-width: 880px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: start;
margin: 0 auto;
}
.dashPart {
text-align: center;
width:437px;
height:350px;
}
.vbullets {
display: inline-block;
margin: 0 6px;
}
</style>
</head>
<body>
<div id="dashWrapper">
<div class="dashPart">
<p style="font-size:20px; font-family:tahoma, geneva, sans-serif;color:black">Financial Summary</p>
<dnc:Chart runat="server" TempDirectory="temp" Size="430x62" class="hbullets" ID="hbullet1"/>
<dnc:Chart runat="server" TempDirectory="temp" Size="430x62" class="hbullets" ID="hbullet2"/>
<dnc:Chart runat="server" TempDirectory="temp" Size="430x62" class="hbullets" ID="hbullet3"/>
<dnc:Chart runat="server" TempDirectory="temp" Size="430x62" class="hbullets" ID="hbullet4"/>
</div>
<div class="dashPart">
<p style="font-size:20px;font-family:tahoma, geneva, sans-serif;color:black">Number of shops</p>
<dnc:Chart runat="server" TempDirectory="temp" Size="50X245" class="vbullets" ID="vbullet1" style="padding-left:3px"/>
<dnc:Chart runat="server" TempDirectory="temp" Size="50X245" class="vbullets" ID="vbullet2"/>
<dnc:Chart runat="server" TempDirectory="temp" Size="50X245" class="vbullets" ID="vbullet3"/>
<dnc:Chart runat="server" TempDirectory="temp" Size="50X245" class="vbullets" ID="vbullet4"/>
<dnc:Chart runat="server" TempDirectory="temp" Size="50X245" class="vbullets" ID="vbullet5"/>
<dnc:Chart runat="server" TempDirectory="temp" Size="50X245" class="vbullets" ID="vbullet6"/>
</div>
<div align="center">
<dnc:Chart ID="chart" runat="server" Size="875X200" TempDirectory="temp" />
</div>
</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 Bullet micro charts with labels and axes
setChartDefault(hbullet1)
setChartDefault(hbullet2)
setChartDefault(hbullet3)
setChartDefault(hbullet4)
setChartDefault(vbullet1)
setChartDefault(vbullet2)
setChartDefault(vbullet3)
setChartDefault(vbullet4)
setChartDefault(vbullet5)
setChartDefault(vbullet6)
setChartDefault(chart)
chart.TitleBox.Label.Text = "Total number of shops worldwide (2008-2019)"
chart.TitleBox.Position = TitleBoxPosition.Center
chart.TitleBox.Label.Color = Color.Black
chart.TitleBox.Label.Font = New Font("tahoma, geneva, sans-serif", 16, FontStyle.Regular)
chart.Palette = New Color() { ColorTranslator.FromHtml("#26c6da")}
chart.DefaultElement.ToolTip = "Number of shops in {%xValue:date yyyy} year: <b>%value</b>"
chart.XAxis.DefaultTick.GridLine.Width = 0
chart.YAxis.Line.Width = 0
chart.YAxis.DefaultTick.GridLine.Color = Color.LightGray
chart.SeriesCollection.Add(getData())
hbullet1.ObjectChart = New dotnetCHARTING.Label(makeHorizontalBullet("Revenue ($B)","500.343","485.873","[300, 450]","600"))
hbullet2.ObjectChart = New dotnetCHARTING.Label(makeHorizontalBullet("Net sales ($B)", "495.761", "481.317", "[250, 450]", "600"))
hbullet3.ObjectChart = New dotnetCHARTING.Label(makeHorizontalBullet("Operating income ($B)", "20.437", "22.764", "[10, 20]", "30"))
hbullet4.ObjectChart = New dotnetCHARTING.Label(makeHorizontalBullet("Gross profit margin (%)", "24.7", "24.9", "[15, 20]", "30"))
vbullet1.ObjectChart = New dotnetCHARTING.Label(makeVerticalBullet("US", "4761", "4672", "[2500, 4500]", "5000"))
vbullet2.ObjectChart = New dotnetCHARTING.Label(makeVerticalBullet("Brazil", "465", "498", "[250, 500]", "550"))
vbullet3.ObjectChart = New dotnetCHARTING.Label(makeVerticalBullet("Canada", "410", "410", "[240, 400]", "500"))
vbullet4.ObjectChart = New dotnetCHARTING.Label(makeVerticalBullet("Japan", "336", "341", "[170, 320]", "400"))
vbullet5.ObjectChart = New dotnetCHARTING.Label(makeVerticalBullet("Mexico", "2358", "2411", "[1600, 2200]", "2500"))
vbullet6.ObjectChart = New dotnetCHARTING.Label(makeVerticalBullet("China", "443", "510", "[250, 500]", "550"))
End Sub
Sub setChartDefault(ByVal c As Chart)
c.JS.Enabled = True
c.Debug = True
c.ChartArea.ClearColors()
c.LegendBox.Visible = False
c.ChartArea.Shadow.Visible = False
End Sub
' Bullets chart data
Function makeHorizontalBullet(ByVal name As String, ByVal value As String, ByVal tranget As String, ByVal range As String, ByVal max As String) As String
Dim str As String = "<span style='width:130px; verticalAlign:middle; align:right;'>" & name & "</span>" & "<chart:Bullet margin_left=5 size=270x30 min=0 colors=#26c6da,black,#80deea,#b2ebf2,#e0f7fa max=" & max & " data=" & value & "," & tranget & "," & range & " tooltip=" & value & "><br>" & "<chart:Scale margin_left=135 size=270x20 orientation=bottom min=0 max=" & max & ">"
Return str
End Function
Function makeVerticalBullet(ByVal name As String, ByVal value As String, ByVal tranget As String, ByVal range As String, ByVal max As String) As String
Dim str As String = "<chart:Bullet margin_bottom=4 size=200x32 rotate=-90 min=0 colors=#26c6da,black,#80deea,#b2ebf2,#e0f7fa max=" & max & " data=" & value & "," & tranget & "," & range & " tooltip=" & value & ">" & "<chart:Scale size=200x20 margin_bottom=4 orientation=bottom rotate=-90 type=scale min=0 max=" & max & "><br>" & "<span style='width:45px;align:center;'>" & name & "</span>"
Return str
End Function
Function getData() As SeriesCollection
Dim SC As SeriesCollection = New SeriesCollection()
Dim stores As Double() = { 4916, 5106, 5611, 6773, 7415, 7949, 8460, 8535, 8702, 8725, 8773 }
For a As Integer = 1 To 1
Dim s As Series = New Series()
s.Name = "Series " & a.ToString()
For b As Integer = 0 To 10
Dim e As Element = New Element()
e.Name = (b+2008).ToString()
e.YValue = stores(b)
s.Elements.Add(e)
Next b
SC.Add(s)
Next a
Return SC
End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<style type="text/css">
#dashWrapper {
max-width: 880px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: start;
margin: 0 auto;
}
.dashPart {
text-align: center;
width:437px;
height:350px;
}
.vbullets {
display: inline-block;
margin: 0 6px;
}
</style>
</head>
<body>
<div id="dashWrapper">
<div class="dashPart">
<p style="font-size:20px; font-family:tahoma, geneva, sans-serif;color:black">Financial Summary</p>
<dnc:Chart runat="server" TempDirectory="temp" Size="430x62" class="hbullets" ID="hbullet1"/>
<dnc:Chart runat="server" TempDirectory="temp" Size="430x62" class="hbullets" ID="hbullet2"/>
<dnc:Chart runat="server" TempDirectory="temp" Size="430x62" class="hbullets" ID="hbullet3"/>
<dnc:Chart runat="server" TempDirectory="temp" Size="430x62" class="hbullets" ID="hbullet4"/>
</div>
<div class="dashPart">
<p style="font-size:20px;font-family:tahoma, geneva, sans-serif;color:black">Number of shops</p>
<dnc:Chart runat="server" TempDirectory="temp" Size="50X245" class="vbullets" ID="vbullet1" style="padding-left:3px"/>
<dnc:Chart runat="server" TempDirectory="temp" Size="50X245" class="vbullets" ID="vbullet2"/>
<dnc:Chart runat="server" TempDirectory="temp" Size="50X245" class="vbullets" ID="vbullet3"/>
<dnc:Chart runat="server" TempDirectory="temp" Size="50X245" class="vbullets" ID="vbullet4"/>
<dnc:Chart runat="server" TempDirectory="temp" Size="50X245" class="vbullets" ID="vbullet5"/>
<dnc:Chart runat="server" TempDirectory="temp" Size="50X245" class="vbullets" ID="vbullet6"/>
</div>
<div align="center">
<dnc:Chart ID="chart" runat="server" Size="875X200" TempDirectory="temp" />
</div>
</div>
</body>
</html>
- Sample FilenameJsBulletDashboard.aspx
- Version10.0
- Uses DatabaseNo