This is a combination chart has one line series and two bar series drawn in stacks. We will use the Dashboard control to combine the building elements of the chart: data series, legend, axes, title and plot.
I. HTML Setup
We need an HTML Canvas element for the chart to draw itsself onto. It is important that we give it an id. The Canvas element will render the chart and its position and size will determine where and how big the chart will be drawn.
<canvas id="dashboard" style="width: 100%; height: 100%; display: block;"></canvas>
The Dashboard control needs the MindFusion.Charting.js library. We also need the MindFusion.Drawing module for presentation classes like brushes, pens etc. We include reference to these files at the end of the web page, before the closing BODY tag:
<a href="http://Scripts/MindFusion.Common.js">http://Scripts/MindFusion.Common.js</a> <a href="http://Scripts/MindFusion.Charting.js">http://Scripts/MindFusion.Charting.js</a>
This is the code-behind file where we will write all code that creates and customizes the combination chart.
II. Creating the Dashboard and General Chart Settings
We add mappings to the chart and drawing namespaces that we want to use. If your IDE supports Intellisense you can also add a reference to the Intellisense file.
/// var Charting = MindFusion.Charting; var Controls = Charting.Controls; var Collections = Charting.Collections; var Drawing = Charting.Drawing; var Components = Charting.Components;
The Dashboard class requires and HTML element in the constructor. We get the Canvas from the web page with the help of its id:
// create the dashboard var dashboardEl = document.getElementById('dashboard'); dashboardEl.width = dashboardEl.offsetParent.clientWidth; dashboardEl.height = dashboardEl.offsetParent.clientHeight; var dashboard = new Controls.Dashboard(dashboardEl);
var plot = new Charting.Plot2D(); plot.gridType = Charting.GridType.Horizontal; plot.gridColor1 = plot.gridColor2 = new Drawing.Color.fromArgb(200, 243, 244, 254);
Then we specify that the plot will render a horizontal grid with light gray grid lines. Each Plot2D has a seriesRenderers property that stores all -SeriesRenderer -s that are responsible for drawing correctly the data series according to their type – LineSeries BarSeries PieSeries etc. More about that later.
III. Data Series and Renderers
// data for first bar series var barSeries1 = new Charting.BarSeries( new Collections.List([9, 11, 13, 18, 19, 22, 23, 26, 29, 32, 33, 36, 41, 46, 49, 55, 57, 58, 61, 63]), //y null, null, new Collections.List(["1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2012", "2013", "2014", "2015", "2016", "2017", "2018"]));
The BarSeries constructor requires several arguments. The first one is the data list, the second are lists with the top and inner labels, which we do not use. The last parameter are the labels for the X-axis and we set here the desired labels.
barSeries1.title = "Total amount of goods sold";
We create then another series for the top row of bars. We don’t need any labels any more so we use now a simple Series2D instance:
var barSeries2 = new Charting.Series2D( new Collections.List([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]),//x new Collections.List([3, 4, 5, 5, 7, 8, 7, 6, 8, 15, 17, 21, 19, 18, 17, 16, 17, 19, 20, 22]),//y null); barSeries2.title = "Extra production to meet demand";
// draw bars var barRenderer = new Charting.BarStackRenderer(new Collections.ObservableCollection([barSeries1, barSeries2])); barRenderer.seriesStyle = new Charting.PerSeriesStyle (new Collections.List([new Drawing.Brush("#230A59"), new Drawing.Brush("#3E38F2")])); barRenderer.barSpacingRatio = 0.7;
The different SeriesRenderer instances have different sets of properties that allow you to customize how the data series will be drawn. Here we use the barSpacingRatio to specify the thickness of the stack bars.
As we mentioned earlier, the Plot2D class has a seriesRenderers property where we can add the different SeriesRenderer -s that we want to show. We add the BarStackRenderer add graphics to plot
The procedure is the same for the line chart. We create another Series2D instance:
// sample data for line graphics var lineSeries = new Charting.Series2D( new Collections.List([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]),//x new Collections.List([7, 9, 12, 15, 18, 23, 24, 27, 35, 41, 46, 49, 53, 55, 58, 61, 63, 66, 67, 69 ]),//right-y null); lineSeries.title = "Peak demand";
We give it a title and create a LineRenderer that will render this series:
// draw lines var lineRenderer = new Charting.LineRenderer( new Collections.ObservableCollection([lineSeries])); lineRenderer.seriesStyle = new Charting.UniformSeriesStyle(new Drawing.Brush("#ffffff"), new Drawing.Brush("#ffffff"), 6);
You might have noticed that we also set the seriesStyle property in both the BarStackRenderer and the LineRenderer classes. This is the property that specifies how the chart series will be painted. There are different classes that derive from SeriesStyle All of them concern a different pattern of applying brushes and pens to the element of a Series We use here an instance of the PerSeriesStyle class that accepts lists with brushes and strokes and applies one consequtive brush and stroke to all elements in the corresponding Series . The LineRenderer uses the UniformSeriesStyle , which accepts just two Brush instances as arguments and applies them to fill and stroke all elements in all Series instances in the SeriesRenderer .
IV. The Axes
// create axes var xAxis = new Charting.Axis(); xAxis.interval = 0; xAxis.minValue = -1; xAxis.maxValue = 20; xAxis.title = ""; // create axes var yAxis = new Charting.Axis(); yAxis.interval = 10; yAxis.minValue = 0; yAxis.maxValue = 100; yAxis.title = "Cost of goods in mlns of USD";
plot.yAxis = yAxis; plot.xAxis = xAxis;
// create renderers for the two axes var xAxisRenderer = new Charting.XAxisRenderer(xAxis); xAxisRenderer.margin = new Charting.Margins(0, 0, 0, 10); xAxisRenderer.labelsSource = plot; xAxisRenderer.showCoordinates = false; var yAxisRenderer = new Charting.YAxisRenderer(yAxis); yAxisRenderer.margin = new Charting.Margins(10, 0, 0, 0);
The renderers have various properties for specifying how the axes will be rendered. We use margin to add some space around the two axes.
dashboard.layoutBuilder.createAndAddPlotAndAxes( plot, null, [yAxisRenderer], [ xAxisRenderer ], null);
V. The Legend
// add legend var legendRenderer = new Charting.LegendRenderer(); legendRenderer.content = new Collections.ObservableCollection([barRenderer, lineRenderer]); legendRenderer.background = new Drawing.Brush("#d0d3fb"); legendRenderer.borderStroke = new Drawing.Brush("#BDBFAA"); legendRenderer.showTitle = false; legendRenderer.horizontalAlignment = Components.LayoutAlignment.Far;
The content property of LegendRenderer allows us to specify a collection of SeriesRenderer instances. This way we can have one legend for series of different kinds. We don’t need a title for our legend, so we set showTitle to false.
VI. The Title and Subtitle
The title is an instance of the TextComponent class:
var tc = new Components.TextComponent(); tc.text = "STEADY GROWTH"; tc.fontSize = 20.4; tc.horizontalAlignment = Components.LayoutAlignment.Near; tc.margin = new Charting.Margins(100, 10, 0, 0); dashboard.layoutPanel.children.add(tc);
Now that we’ve made all arrangements for the chart let’s not forget to call the draw method that will render the chart on the screen:
That was everything. You can see an online demo of the chart here.