{"id":2219,"date":"2019-11-06T13:04:48","date_gmt":"2019-11-06T13:04:48","guid":{"rendered":"https:\/\/mindfusion.eu\/blog\/?p=2219"},"modified":"2020-08-09T13:35:34","modified_gmt":"2020-08-09T13:35:34","slug":"horizontal-full-bar-chart-in-javascript","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/horizontal-full-bar-chart-in-javascript\/","title":{"rendered":"Horizontal Full Bar Chart in JavaScript"},"content":{"rendered":"

We use here MindFusion JavaScript library for Charts and Gauges<\/a> to build this horizontal stacked bar chart that renders custom tooltips:<\/p>\n

<\/a><\/p>\n

Run the sample from this link.<\/a><\/p>\n

You can download the source code together with the libraries used from the link at the bottom of the post.<\/a><\/p>\n

I. General Setup<\/strong><\/p>\n

We split our chart in two files – one is the web page that hosts an HTML Canvas element that will render the chart. The other file is a JavaScript code-behind file that contains the code for the chart.<\/p>\n

We need to add reference to two JavaScript library files that provide the charting and drawing functionality that we need:<\/p>\n

MindFusion.Common.js
\nMindFusion.Charting.js<\/p>\n

We place them in a Scripts folder at the same level as our web page and JavaScript code behind file.<\/p>\n

<script<\/span> type<\/span>=\"text\/javascript<\/a>\" src<\/span>=\"Scripts\/MindFusion.Common.js<\/a>\"><\/script<\/span>>\n<\/span><script<\/span> type<\/span>=\"text\/javascript<\/a>\" src<\/span>=\"Scripts\/MindFusion.Charting.js<\/a>\"><\/script<\/span>><\/pre>\n
We also add a reference to the code-behind file that we call StackedBarChart.js:<\/p>\n
<script<\/span> type<\/span>=\"text\/javascript<\/a>\" src<\/span>=\"StackedBarChart.js<\/a>\"><\/script<\/span>><\/pre>\n
Now we need to create an HTML Canvas element and we must provide it with an id so we can reference it in our JS code:<\/p>\n
<canvas<\/span> id<\/span>=\"barChart<\/a>\" width<\/span>=\"600px<\/a>\" height<\/span>=\"400px<\/a>\"><\/canvas<\/span>><\/pre>\n
The size of the Canvas determines the size of the chart.<\/p>\n
II. Chart Instance and General Settings<\/strong><\/p>\n
We add some namespace mappings that allow us to reference classes from the Chart library in a more consice manner:<\/p>\n
var Charting = MindFusion.Charting;\nvar Controls = MindFusion.Charting.Controls;\nvar Collections = MindFusion.Charting.Collections;\nvar Drawing = MindFusion.Charting.Drawing;\nvar GridType = MindFusion.Charting.GridType;\nvar ToolTip = Charting.ToolTip;<\/pre>\n
Then we create an instance of the BarChart<\/a> control. We need to get the Dom Element that corresponds to the Canvas that we’ve prepared for the chart:<\/p>\n
var chartEl = document.getElementById('barChart');\nchartEl.width = chartEl.offsetParent.clientWidth;\nchartEl.height = chartEl.offsetParent.clientHeight;\nvar chart = new Controls.BarChart(chartEl, Charting.BarLayout.Stack);<\/pre>\n
The BarChart<\/a> constructor supports a second argument that indicates the type of the bar chart to render.<\/p>\n
We set the bar chart to horizontal with the horizontalBars<\/a> property. We also make the bars thicker than normal – the property for this is barSpacingRatio<\/a> It measures the thickness of the bars as a percente of the bar width.<\/p>\n
chart.horizontalBars = true;\nchart.barSpacingRatio = 0.2;<\/pre>\n
III. The Data Series<\/strong><\/p>\n
We want our chart to render labels as tooltips, inside the bars and also we want custom labels at the Y-axis. The predefined BarSeries<\/a> class accepts 4 lists with data: one for bar data and three with labels inside the bars, at the top of the bars and at the X-axis. So, it is not an exact match for what we want to do and we need to customize it.<\/p>\n
We will create our own custom BarSeries<\/a> that we will call SeriesWithLabels. We will inherit the BarSeries<\/a> class and override its constructor and getLabel<\/a> members to provide the desired data for the desired type of labels.<\/p>\n
We override the constructor by creating three new variables, which receive the data for the bars and the labels:<\/p>\n
var SeriesWithLabels = function (barValues, innerLabels, yLabels) {\n    Charting.BarSeries.apply(this, [barValues, innerLabels, yLabels]);\n\t\n\tthis.yLabels = yLabels;\n\tthis.innerLabels = innerLabels;\n\tthis.values = barValues;\n    \n};\n\nSeriesWithLabels.prototype = Object.create(Charting.BarSeries.prototype);<\/pre>\n
Note that before we do anything else in the new constructor we need to call the apply method of the BarSeries<\/a> class to transfer the provided data to the base class. We also need to create a prototype of the new series and also define its constructor:<\/p>\n
 Object.defineProperty(SeriesWithLabels.prototype, 'constructor', {\n   \tvalue: SeriesWithLabels,\n   \tenumerable: false,\n   \twritable: true\n   });<\/pre>\n
Next we will override the getLabel<\/a> method. This is the method that returns the correct label according to the requested label kind and the index of the label. We said we want to support inner labels, tooltips and Y-axis labels. So, we make sure our implementation of getLabel<\/a> returns exactly those labels:<\/p>\n
SeriesWithLabels.prototype.getLabel = function (index, kind) {\n    if ((kind & Charting.LabelKinds.YAxisLabel) != 0 && this.yLabels)\n        return this.yLabels.items()[index];\n\n    if ((kind & Charting.LabelKinds.InnerLabel) != 0 && this.innerLabels)\n        return this.innerLabels.items()[index];\n\t\n\tif ((kind & Charting.LabelKinds.ToolTip) != 0)\n        return getPercentLabel(index, this);\n   \n    return \"\";\n};<\/pre>\n
Getting the correct inner and top label is easy – we just return the label at the requested position. What is more work is building the tooltip. We want our tooltip to calculate the portion of the part in the stacked bar the mouse currently is over, to the entire bar. This means we need to calculate the data of all bar portions, which is a combination of the values at the requested position in all three bar series. We do this calculation in a separate method called getPercentLabel.<\/p>\n
Before we get to the getPercentLabel method let’s create 3 instances of our custom SeriesWithLabels class:<\/p>\n
var labels = new Collections.List([\n\t\"POSITION\", \"SALARY\", \"LOCATION\", \"COLLEAGUES\", \"WORKTIME\"\n]);\n\n\/\/ create sample data series\nvar series1 = new SeriesWithLabels(new Collections.List([123, 212, 220, 115, 0.01]), new Collections.List([123, 212, 220, 115, 0]), labels);\nvar series2 = new SeriesWithLabels(new Collections.List([53, 132, 42, 105, 80]), new Collections.List([53, 132, 42, 105, 80]), null);\nvar series3 = new SeriesWithLabels(new Collections.List([224, 56, 138, 180, 320]), new Collections.List([224, 56, 138, 180, 320]), null);<\/pre>\n
The third argument in the SeriesWithLabels constructor is the lists with labels at the Y-axis. We need just one list with labels and we set it with the first series. The other series take null as their third argument.<\/p>\n
We need to create a collection with the series and assign it to the series<\/a> property of the chart:<\/p>\n
var series = new Collections.ObservableCollection(new Array(series1, series2, series3));\nchart.series = series;<\/pre>\n
There is a special property called supportedLabels<\/a> that is member of Series<\/a> and tells the chart, what type of labels this Series<\/a> needs to draw. In our case we need to indicate that the first series renders labels at the Y-axis, the inner labels and tooltips. The other two series render inner labels and tooltips:<\/p>\n
series1.supportedLabels = Charting.LabelKinds.YAxisLabel | Charting.LabelKinds.InnerLabel | Charting.LabelKinds.ToolTip;\nseries2.supportedLabels = Charting.LabelKinds.InnerLabel | Charting.LabelKinds.ToolTip;\nseries3.supportedLabels = Charting.LabelKinds.InnerLabel | Charting.LabelKinds.ToolTip;<\/pre>\n
Now let’s get back to the method that calculates the tooltip:<\/p>\n
function getPercentLabel(index, series)\n{\n\tvar value1 = series1.values.items()[index];\n\tvar value2 = series2.values.items()[index];\n\tvar value3 = series3.values.items()[index];\n\t\n\tvar theValue = series.values.items()[index];\t\n\tvar result = theValue\/(value1+value2+value3) * 100;\n\t\n\treturn Number(result).toFixed(0) + \"%\";\t\n};<\/pre>\n
In it we calculate the sum of all data that is rendered by the stacked bar at the specified index. Then we convert the data to percent and format it to have no numbers after the decimal point. That gives us a little inacurracy sometimes, when the value gets rounded to the next number and the sum of all percents actually is 101. You might want to change the formatting to toFixed(2) if you want to see the exact number rendered.<\/p>\n
IV. Axes and Tooltip<\/strong><\/p>\n
By default the X-axis shows a title and both axes render the auto scale for the data of the chart. We need to hide the scale and we also hide the ticks that are rendered at the interval values:<\/p>\n
chart.xAxis.title = \"\";\nchart.yAxis.title = \"\";\nchart.showXCoordinates = false;\nchart.showYCoordinates = false;\nchart.showXTicks = false;\nchart.showYTicks = false;<\/pre>\n
We don’t want our chart to render axes at all, so we will draw them with the color of the chart background. You can also draw them with a transparent brush:<\/p>\n
chart.theme.axisStroke = new Drawing.Brush(Drawing.Color.knownColors.White);<\/pre>\n
The tooltip renders automatically when the user hovers a bar. We can customize it with the properties of the static Tooltip<\/a> class:<\/p>\n
ToolTip.brush = new Drawing.Brush(\"#fafafa\");\nToolTip.pen = new Drawing.Pen(\"#9caac6\");\nToolTip.textBrush = new Drawing.Brush(\"#5050c0\");\nToolTip.horizontalPadding = 6;\nToolTip.verticalPadding = 4;\nToolTip.horizontalOffset = 76;\nToolTip.verticalOffset = 34;\nToolTip.font = new Charting.Drawing.Font(\"Verdana\", 12);<\/pre>\n
We add some padding to the tooltip text and increase its font size. We also render the tooltip with a little offset that will place it inside the bar, ater the inner label.<\/p>\n
V. Styling and Legend<\/strong><\/p>\n
Styling o the charts is done through instances of SeriesStyle<\/a> derived classes. The instance is assigned to the seriesStyle<\/a> property of the Chart<\/a> In our case we want to color each bar in three sections. That means the portion of the bar that corresponds to the same series is colored in the same color for all its members. That kind of styling is supported by the PerSeriesStyle<\/a> class. It accepts a list with brushes and strokes and paints all elements of the series corresponding to the index of the brush in the list with this brush:<\/p>\n
\/\/ create bar brushes\nvar thirdBrush = new Drawing.Brush(\"#97b5b5\");\nvar secondBrush = new Drawing.Brush(\"#5a79a5\");\nvar firstBrush = new Drawing.Brush(\"#003466\");\n\n\/\/ assign one brush per series\nvar brushes = new Collections.List([firstBrush, secondBrush, thirdBrush]);\nchart.plot.seriesStyle = new Charting.PerSeriesStyle(brushes, brushes);<\/pre>\n
The theme<\/a> property is the main property for styling the chart. The Theme<\/a> class exposes fields for customizing the appearance of all chart elements. We first adjust the font and size of the axis labels – remember we have labels only at the Y-axis:<\/p>\n
chart.theme.axisTitleFontSize = 14;\nchart.theme.axisLabelsFontSize = 11;\nchart.theme.axisTitleFontName = \"Verdana\";\nchart.theme.axisLabelsFontName = \"Verdana\";\nchart.theme.axisLabelsFontSize = 14;\nchart.theme.axisStroke = new Drawing.Brush(Drawing.Color.knownColors.White);<\/pre>\n
The labels inside the bars are called data labels and there are dataLabels*** properties that regulate their appearance:<\/p>\n
chart.theme.dataLabelsFontName = \"Verdana\";\nchart.theme.dataLabelsFontSize = 14;\nchart.theme.dataLabelsBrush = new Drawing.Brush(\"#ffffff\");<\/pre>\n
The dataLabelsBrush<\/a> is also used when the legend labels are rendered. In order to make them visible we need to set a darker background for the legend:<\/p>\n
chart.theme.legendBackground = new Drawing.Brush(\"#cccccc\");\nchart.theme.legendBorderStroke = new Drawing.Brush(\"#cecece\");<\/pre>\n
The labels inside the legend are taken from the title<\/a> property of the Series<\/a> instances:<\/p>\n
series.item(0).title = \"CAREER START\";\nseries.item(1).title = \"MIDDLE OF CAREER\";\nseries.item(2).title = \"CAREER END\";<\/pre>\n
Finally we should not forget to call the draw<\/a> method that actually renders the chart:<\/p>\n
chart.draw();<\/pre>\n
With this our costimization of the chart is done. You can download the source code of the sample and the MindFusion JavaScript libraries used from this link:<\/p>\n
Download the Horizontal Stacked Bar Chart Sample: Source Code and Libraries<\/a><\/p>\n
About Charting for JavaScript:<\/i> MindFusion library for interactive charts and gauges. It supports all common chart types including 3D bar charts. Charts can have a grid, a legend, unlimitd number of axes and series. Scroll, zoom and pan are supported out of the box. You can easily create your own chart series by implementing the Series interface.
\nThe gauges library is part of Charting for JavaScript. It supports oval and linear gauge with several types of labels and ticks. Various samples show you how the implement the gauges to create and customize all popular gauge types: car dashboard, clock, thermometer, compass etc. Learn more about Charting and Gauges for JavaScript at https:\/\/mindfusion.dev\/javascript-chart.html<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
We use here MindFusion JavaScript library for Charts and Gauges to build this horizontal stacked bar chart that renders custom tooltips: Run the sample from this link. You can download the source code together with the libraries used from the … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[61,513],"tags":[295,603,425,604,424,605,602,454],"class_list":["post-2219","post","type-post","status-publish","format-standard","hentry","category-charting-2","category-javascript","tag-dashboard","tag-interactive-js-chart","tag-javascript-chart","tag-javascript-tutorial","tag-js-chart","tag-js-column-chart","tag-js-library","tag-stacked-bar-chart"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-zN","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2219","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/comments?post=2219"}],"version-history":[{"count":2,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2219\/revisions"}],"predecessor-version":[{"id":2336,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2219\/revisions\/2336"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=2219"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=2219"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=2219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}