Negative Bar Stack in WinForms

Thia post will demonstrate how to create a horizontal stacked bar chart with negative values. We will use the Charting for WinForms component and the final chart looks like this:

Negative Stacked Bar Chart in WinForms with the Chart Control

Negative Stacked Bar Chart in WinForms with the Chart Control

I. Data

The chart will use four series. The first two series are the ones that you clearly see – the red and blue one. We initialize two data arrays with random values that represent the data:

var firstBarX = new List<double>(11);
var secondBarX = new List<double>(11);

Random r = new Random();
            
for(int i = 0; i < 11; i++)
   {
       firstBarX.Add(2.2 + r.NextDouble());
       secondBarX.Add(2.4 + r.NextDouble());
    }

We need a list with data values that are exactly the same as the first series, but are negative. They will provide a transparent initial series, whose bars will offset the first, red, series as much as the value of the red bar should be:

//generate data for the transparent series
var transparentBarX = new List<double>(firstBarX.Count);

for (var i = 0; i < firstBarX.Count; i++)			
    transparentBarX.Add(0 - firstBarX[i]);

The data for the Y-axis is very simple. We just need a list with the numbers from 1 to 12:

//data for the Y-axis
var barY = new List<double>();
for (int i = 1; i < 12; i++)			
	barY.Add(i);

II. Labels
We will create two lists with the labels that we will show – for the two axis. The labels for the Y-axis will be used as tooltips as well. We just initialize two string lists:

//initialize labels for the X axis
var ageLabels = new List<string>() { "0-5", "6-11", "12-17", "18-23", "24-29", "30-35",
		   "36-41", "42-47", "48-53", "54-59", "60-65" };

//initialize labels for the Y axis.
var percentageLabels = new List<string> { "5%", "4%", "3%", "2%", "1%", "0%", 				"1%", "2%", "3%", "4%", "5%", };

We will use this label lists in the next section, when we create the series.

III. Series

We will use 4 series, of type Series2D. This series is useful for its SupportedLabels property – it allows us to specify what the labels of the series would be used for. We start with the transparent series. Its labels will be used for custom labels at the Y-axis:

var seriesTransparent = new MindFusion.Charting.Series2D(transparentBarX, barY, ageLabels);
seriesTransparent.SupportedLabels = MindFusion.Charting.LabelKinds.YAxisLabel;
seriesTransparent.Title = "";

We use for X-data the negative values you remember from the previous paragraph. The age labels are those that provide the data for the axis.

Then we initialize the two series for the chart data:

var seriesFirst = new MindFusion.Charting.Series2D(firstBarX, barY, ageLabels);
seriesFirst.SupportedLabels = MindFusion.Charting.LabelKinds.ToolTip;
seriesFirst.Title = "Female";

var seriesSecond = new MindFusion.Charting.Series2D(secondBarX, barY, ageLabels);
seriesSecond.SupportedLabels = MindFusion.Charting.LabelKinds.ToolTip;
seriesSecond.Title = "Male";

The last series that we create is just to provide data for the X-axis and we set its SupportedLabels property to MindFusion.Charting.LabelKinds.XAxisLabel. The X-data for this series corresponds to the coordinates of the X-labels, that’s why set the numbers from -5 to 5 as X-data:

var firstParamList = new List<double>();
      for (int i = -5; i < 6; i++)			
	 firstParamList.Add(i);

The Y-data could be all zeros, we won’t use them anyway.

var secondParamList = new List<double>();
    for (int i = 0; i < 12; i++)			
	secondParamList.Add(0);

And we create the series this way:

//the purpose of this series is to only supply the Xaxis labels, it is transparent.	
var seriesThird = new MindFusion.Charting.Series2D(firstParamList, secondParamList, percentageLabels);           	
seriesThird.SupportedLabels = MindFusion.Charting.LabelKinds.XAxisLabel;
seriesThird.Title = "";

After you have created all series, you should add them to the Series collection of the BarChart:

barChart.Series = new ObservableCollection<Series>
	{ seriesTransparent, seriesFirst, seriesSecond, seriesThird };
           	

IV. Axes and Grid

We need to fix the divisions of the X-axis if we want to show a grid and the grid to be neatly aligned with the axes. We will set the min value to be -6, the interval 1 and the max value to be 6:

barChart.XAxis.Interval = 1;
barChart.XAxis.MinValue = -6;
barChart.XAxis.MaxValue = 6;		

We will use three more properties to hide the interval labels at both axes, show ticks on them and set a title for each axis:

barChart.XAxis.Title = "Percentage of the Population";
barChart.YAxis.Title = "Ages";
			
barChart.ShowYCoordinates = false;
barChart.ShowXCoordinates = false;

barChart.ShowXTicks = true;
barChart.ShowYTicks = true;

Finally, we have to set the grid and specify that the bars are horizontal:

barChart.GridType = GridType.Vertical;
barChart.HorizontalBars = true;

V. Styling

Styling the chart is done though the SeriesSyle property of the Plot. You can assign to it different series types, you can check the list at the ISeriesStyle interface page in the documentation:

barChart.Plot.SeriesStyle = new PerSeriesStyle()
{
	Strokes = new List<MindFusion.Drawing.Brush> {
		firstBrush, new SolidBrush(Color.FromArgb(179, 0, 0)), 
                new SolidBrush(Color.FromArgb(0, 0, 102)), firstBrush
		},
		StrokeThicknesses = new List<double> {
			 0,2,2,0
		},
		Fills = new List<MindFusion.Drawing.Brush>()
		{
			firstBrush, secondBrush, thirdBrush, firstBrush
	}
};

This style indicates that each brush from its collection will be used for one series in the chart. We assign to it 4 brushes and 4 strokes. The first brush is transparent, the second one is red, the other is blue and the last one is black – we won’t draw with it anyway.

The Theme property of the chart holds a lot of options for customizing the appearance. Here are just a few of them:

barChart.Theme.LegendBorderStrokeThickness = 1;
barChart.Theme.LegendBorderStroke = new SolidBrush(Color.Black);
barChart.Theme.GridColor2 = Color.White;
barChart.Theme.GridColor1 = Color.FromArgb(250, 250, 250);
barChart.Theme.GridLineColor = Color.FromArgb(153, 153, 153);
barChart.Theme.PlotBackground = new SolidBrush(Color.FloralWhite);
...........
..........

And that’s the end of this step-by-step guide. You can download the sample together will all necessary libraries from this link:

Download Negative Stack Bar Chart in CS Sample

About MindFusion Charting for WinForms: A versatile dashboard component that provides your WinForms application with the ability to create fascinating charts, interactive dashboards and practical gauges. The component combines a flexible API that allows custom combination of chart components to build any type of chart you want. You can add as many axes of any type you want, combine various chart series into a single chart with different data providers each. The control also supports pan and zoom, scroll, unlimited number of legends, grid and a dashboard panel. Linear and oval gauges complete the tool set and guarantee every feature you might need to build the perfect gauge, chart of any type or dashboard in WinForms is right at your fingertips. Learn more at https://mindfusion.eu/winforms-chart.html

A JavaScript Keyboard With Special Language Symbols That Appears When The User Starts Typing

This blog post will demonstrate how to create a keyboard that renders only when the user starts typing in a text box. When the user clicks outside the text box, the virtual keyboard disappears. There is another extra – a selection of languages to the right. When a language is selected, the keyboard renders only the special symbols from the selected language.

You can test the JS Hidden Keyboard sample online from this link.

The application uses MindFusion Virtual Keyboard for JavaScript. Here is a screenshot of the application:

Invisible keyboard in JavaScript

Virtual keyboard in JavaScript that renders only when the user starts typing. The keyboard renders special symbols for several languages.

I. The Keyboards for Spanish, German and French

The three keyboard layouts with special symbols for the three languages are created with the Virtual Keyboard Layout Creator tool, that is packed with the JavaScript Keyboard library. We create a new compact keyboard and delete most of the keys. We type the desired key as character for the rest and use the Properties tab to set the size of the keyboard, as well the layout and the key alignment. Finally, we export the new keyboard layout as a json file (File → Export JavaScript. It is a good idea to save the keyboard layout as xml as well (File → Save As). This way you can load the keyboard gain, when you need to create another layout based on it or correct this one.

We have created now three json files:

  • french-symbols.js
  • german-symbols.js
  • spanish-symbols.js

Let’s look at the contents of one of the json files:

var layoutDef =
{
	width: 565,
	height: 115,
	keys:
[	{	
		code: 162,
		type: "regular",
		content: "ù",
		left: 9,
		top: 10,
		width: 40,
		height: 40
	},
	{	
		code: 162,
		type: "regular",
		content: "û",
		left: 56,
		top: 10,
		width: 40,
		height: 40
	},
………
{	
		code: 162,
		type: "regular",
		content: "œ",
		left: 507,
		top: 58,
		width: 40,
		height: 40
	}
]
};

Each file contains an array named “numpadDef”. We need to change the name, because we will load each list when a certain language is selected, which means we must be able to differentiate among the languages. We rename the lists to layoutDefFr, layoutDefDe and layoutDefEs.

Here is what the Virtual Keyboard Layout Creator Tool looks like:

Keyboard layout creator tool

The virtual keyboard layout creator tool that is part of the JavaScript Keyboard library by MindFusion

II. The HTML Web Page

We create a simple web page, where we add a reference to the JavaScript file of the Virtual Keyboard library:


<a href="http://Keyboard.js">http://Keyboard.js</a>

Note that we place this reference at the end of the file, after the closing tag. The we need reference to the JavaScript files with the definitions of the virtual keyboards that we created in step I.


<script src="french-symbols.js" type="text/javascript"></script>
<script src="spanish-symbols.js" type="text/javascript"></script>
<script src="german-symbols.js" type="text/javascript"></script>

Finally, we add a reference to a JavaScript file that will hold the code for our sample. It will be empty for now.


<script src="HiddenKeyboard.js" type="text/javascript"></script>

The next step is to load the CSS file with the styling for the JS keyboard. We have chosen the Silver theme, you can choose whichever theme you want or create a custom one.


<link href="css/VirtualKeyboard.Silver.css" rel="Stylesheet" />

We have added also a reference to a a stylesheet that aligns correctly the

elements with the keyboard, the text area and the select list.


<link href="style.css" rel="Stylesheet">

It contains code purely to align correctly the elements and we will not examine its contents.

Now, let’s create the text area:


<form id="f1">
<textarea id="text" rows="15" cols="55"></textarea>
…….
</form>

We create a form, called f1 and there we create the HTML textarea element. It handles to events: onfocus and onblur.

Next, the form contains a select with the three languages, whose keyboards with special symbols we have prepared:


<select id="selectedLang" size="3">
<option value="Fr">French</option>
<option value="De">German</option>
<option value="Es">Spanish</option>

</select>

Outside the form, we place a dive with the keyboard:


<div id="keyboard" style="width: 565px;height: 115px" />

The virtual keyboard will be rendered with fixed size and by default is not rendered e.g. it’s display is set to “none”.

III. The JavaScript Code-Behind File

First, we add two namespace mappings:


var VirtualKeyboard = MindFusion.VirtualKeyboard;
var KeyboardLayout = MindFusion.KeyboardLayout;

Then we handle the DOMContentLoaded event to create the Virtual Keyboard object. We use the div element that represents the keyboard as a parameter to the VirtualKeyboard constructor. We have provided the div element with an id in the HTML page.

We also set the selected index of the elements in the language list to -1 e.g. by default no language is selected and the keyboard will show the standard English typing keyboard.


document.addEventListener("DOMContentLoaded", function (event)
{
	document.getElementById("selectedLang").selectedIndex = -1;
	
	var vk = VirtualKeyboard.create(
		document.getElementById("keyboard"));
	vk.setScaleToFitParent(false);	

…………………

});

Then we handle changes in the selection of the language:

 

f1.selectedLang.onchange = function (event)
	{
		
	switch (event.target.value) {
  case 'Fr':
    vk.setLayout(KeyboardLayout.create(layoutDefFr));
    break;
  case 'De':
  vk.setLayout(KeyboardLayout.create(layoutDefDe));
  break;
  case 'Es':
    vk.setLayout(KeyboardLayout.create(layoutDefEs));
    break;	
    } 
 }

When the user chooses one of our custom layouts we create a keyboard layout with the appropriate layoutDef object.

Next we handle the onfocus and onblur events with the methods showKeyboard() and hideKeyboard(). They just make the div with the keyboard visible or invisible:


function showKeyboard() { 
		
	var x = document.getElementById("keyboard"); 
		x.style.display = "block";			
	}
	
	function hideKeyboard() {
    var x = document.getElementById("keyboard");    
        x.style.display = "none";
    
	}

And that’s all. As you can see creating and loading a custom keyboard with MindFusion JS library is really as easy as 1, 2 3. You can download the complete source code of the sample from this link:

Download the Hidden Keyboard With Special Language Symbols JavaScript Sample

About MindFusion Virtual Keyboard for JavaScript: A highly interactive, highly customizable library written in pure JavaScript that provides your web application with screen typing capabilities similar to those on mobile devices. The keyboard supports three predefined layouts: compact, default and extended. You can also use the keyboard layout creator tool that provides a convenient GUI to create and arrange your own keyboards. The library offers a well documented API with self-explanatory API members and tutorials that guarantee flat learning curve. You can choose among 8 predefined keyboard styles or customize them to create your own styles. Licenses are royalty-free, perpetual with discounts for freelancers, startups, academic institutions to name just a few. Learn more at https://mindfusion.eu/javascript-keyboard.html