<HorizontalBarChart InputData="10,20,30,40,50,60,70,80,90,100" InputLabels="App Store,Website,Partners,Direct,Channels,Retail,Distributors,Affiliates,Phone,TV"> <HorizontalBarChart>
<VerticalBarChart InputData="30,70,42,50,3,55,35,22,10,5" InputLabels="App Store,Website,Partners,Direct,Channels,Retail,Distributors,Affiliates,Phone,TV"> </VerticalBarChart>
Please see WebAssemblyMan Blazor Charts project on how to include this horizontal bar chart in your Blazor project.
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
var seq = 0;
builder.OpenElement(seq, "figure");
builder.AddAttribute(++seq, "class", "horizontal-bar-chart");
builder.OpenElement(++seq, "div");
builder.AddAttribute(++seq, "class", "main");
System.Diagnostics.Debug.WriteLine("ID"+InputData);
string[] inputDataArr = InputData.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
string[] inputLabelsArr = InputLabels.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
double boundHeight = 100.0;
double boundWidth = 150.0;
string[] colors = { "#fe2712", "#fc600a", "#fb9902", "#fccc1a", "#fefe33", "#b2d732", "#66b032", "#347c98", "#0247fe", "#4424d6", "#8601af", "#c21460" };
string[] labels = { "App Store", "Website", "Partners", "Direct", "Channels", "Retail", "Distributors", "Affiliates", "Phone", "TV" ,"X"};
SVG svg = new SVG() { { "class", "svg" }, { "width", "100%" }, { "height", "100%" }, { "viewBox", "0 0 150 100" }};
//Rectangle rect = new Rectangle() { { "class", "background-rect" }, { "width", "100%" }, { "height", "100%" }, { "fill", "white" }, { "stroke", "gray" }, {"stroke-width", "0.5" } };
Rectangle rect = new Rectangle() { { "class", "background-rect" }};
svg.AddItems(rect);
int numHorizontalLines = 10;
int numVerticalLines = 10;
double verticalStartSpace = 10.0;
double horizontalStartSpace = 30.0;
double verticalEndSpace = 5.0;
double horizontalEndSpace = 20.0;
double gridYUnits = 10;
double gridXUnits = 10;
bool skipLastVerticalLine = false;
bool skipLastHorizontalLine = false;
double verticalSpace = (boundHeight- verticalStartSpace-verticalEndSpace) / (numHorizontalLines);
double horizontalSpace = (boundWidth - horizontalStartSpace-horizontalEndSpace) / (numVerticalLines);
double totalGridWidth = ((double)(numVerticalLines)) * horizontalSpace;
double totalGridHeight = ((double)(numHorizontalLines)) * verticalSpace;
System.Diagnostics.Debug.WriteLine("TotalGridHeight:" + totalGridHeight+":"+ verticalSpace);
double[] inputDataArrDouble = new double[inputDataArr.Length];
int i = 0;
foreach (string iData in inputDataArr)
{
System.Diagnostics.Debug.WriteLine("iData:" + iData);
inputDataArrDouble[i] = double.Parse(inputDataArr[i++]);
}
System.Diagnostics.Debug.WriteLine("inputDataArr Length:" + inputDataArr.Length);
System.Diagnostics.Debug.WriteLine("Vertical Lines");
//Vertical Lines
double x = horizontalStartSpace;
double startGridX = 0;
for (int counter = 0; counter <= numVerticalLines; counter++)
{
if (counter == numVerticalLines && skipLastVerticalLine)
continue;
Path path = new Path() { { "class", "vertical-grid-lines" }, { "d", "M " + x.ToString() +" "+ (boundHeight-verticalStartSpace).ToString() + " L "+ x.ToString() + " " +(verticalEndSpace).ToString() } };
Text label = new Text() { { "class", "y-axis-labels" }, {"x",x.ToString() }, { "y", (boundHeight - verticalStartSpace + 5).ToString() },{ "content", (startGridX).ToString() } };
startGridX = startGridX + gridXUnits;
svg.AddItems(path,label);
x = x + horizontalSpace;
}
//Horizontal Lines
double y = verticalStartSpace;
double startGridY = 0;
i = 0;
for (int counter=0;counter<= numHorizontalLines; counter++)
{
System.Diagnostics.Debug.WriteLine("i:" + i);
if (counter == numHorizontalLines && skipLastHorizontalLine)
{
continue;
}
System.Diagnostics.Debug.WriteLine("y:" + i+":"+ inputDataArr.Length);
Path path = new Path() { { "class", "horizontal-grid-lines"}, { "d", "M "+(horizontalStartSpace).ToString()+" "+(boundHeight - y).ToString() + " L "+(horizontalStartSpace+numHorizontalLines*gridXUnits).ToString()+" "+(boundHeight - y).ToString() } };
string xLabels="";
if (counter<inputLabelsArr.Length)
xLabels=inputLabelsArr[counter];
Text label = new Text() { { "class", "x-axis-labels" }, { "x", (horizontalStartSpace-2).ToString() }, { "y", (boundHeight - y).ToString() }, { "content", xLabels } };
System.Diagnostics.Debug.WriteLine("z:" + i);
if (counter==0)
svg.AddItems(path,label);
if (i< (inputDataArr.Length))
{
System.Diagnostics.Debug.WriteLine("i:" + i + ":" + inputDataArrDouble[i].ToString() + "px");
System.Diagnostics.Debug.WriteLine("labelrect");
//Rectangle bar = new Rectangle() { { "fill", "#ce4b99" }, { "x", (horizontalStartSpace).ToString() }, { "y", (boundHeight - y - 5).ToString() }, { "width", inputDataArrDouble[i].ToString() + "px" }, { "height", "5px" } };
Rectangle bar = new Rectangle() { { "class", "bar" }, { "x", (horizontalStartSpace).ToString() }, { "y", (boundHeight - y - 5).ToString() }, { "width", inputDataArrDouble[i].ToString() + "px" }, { "height", "5px" } };
svg.AddItems(label, bar);
i++;
}
else
{
System.Diagnostics.Debug.WriteLine("label");
if (counter<numHorizontalLines)
svg.AddItems(label);
}
System.Diagnostics.Debug.WriteLine("Y:" + y);
y = y + verticalSpace;
startGridY = startGridY + gridYUnits;
}
BlazorRenderer blazorRenderer = new BlazorRenderer();
blazorRenderer.Draw(seq, builder, svg);
builder.CloseElement();
builder.CloseElement();
}
The CSS Style Sheet values used by the Blazor SVG Horizontal Bar chart.
.horizontal-bar-chart{
}
.horizontal-bar-chart div {
}
.horizontal-bar-chart div svg{
}
.horizontal-bar-chart div svg .background-rect{
width:100%;
height:100%;
fill:white;
stroke:white;
stroke-width:0.5;
}
.horizontal-bar-chart div svg .horizontal-grid-lines{
fill:none;
stroke:gray;
stroke-width:0.2;
}
.horizontal-bar-chart div svg .x-axis-labels{
font-size:4px;
text-anchor:end;
}
.horizontal-bar-chart div svg .vertical-grid-lines{
fill:none;
stroke:gray;
stroke-width:0.2;
}
.horizontal-bar-chart div svg .y-axis-labels{
font-size:4px;
text-anchor:middle;
}
.horizontal-bar-chart div svg .bar{
fill:black;
}