![](\"http:\/\/mindfusion.dev\/product_images\/javascript\/library\/chart\/combination_chart.png\" "\\"Combination")
<\/a><\/p>\nThis is a combination chart has one line series and two bar series drawn in stacks. We will use the Dashboard<\/a> control to combine the building elements of the chart: data series, legend, axes, title and plot.<\/p>\n I. HTML Setup<\/strong><\/p>\n 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.<\/p>\n The Dashboard<\/a> 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:<\/p>\n The two library JavaScript files are in a subfolder called Scripts. We prefer to keep the JavaScript code for the combination chart separate from the web page and we include one final JS reference:<\/p>\n This is the code-behind file where we will write all code that creates and customizes the combination chart.<\/p>\n II. Creating the Dashboard and General Chart Settings<\/strong><\/p>\n 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.<\/p>\n The Dashboard<\/a> class requires and HTML element in the constructor. We get the Canvas from the web page with the help of its id:<\/p>\n The Dashboard<\/a> control is a container for all elements of a dashboard. In order to render a chart, we need a Plot<\/a> element that can visualize data. We create an instance of the Plot2D<\/a> class:<\/p>\n Then we specify that the plot will render a horizontal grid with light gray grid lines. Each Plot2D<\/a> has a seriesRenderers<\/a> property that stores all -SeriesRenderer -s that are responsible for drawing correctly the data series according to their type – LineSeries BarSeries<\/a> PieSeries<\/a> etc. More about that later.<\/p>\n III. Data Series and Renderers<\/strong><\/p>\n Each data series is represented by a class that corresponds to its type. MindFusion Charting for JavaScript has a variety of ISeries classes, some of whom can be used in different chart types. We will first use the BarSeries<\/a> class to create one of the series that render bars:<\/p>\n The BarSeries<\/a> 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.<\/p>\n Then we set the title<\/a> property of the BarSeries<\/a> – it is important because it will render as a legend item.<\/p>\n 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<\/a> instance:<\/p>\n The series need a SeriesRenderer<\/a> that can draw them. There are different SeriesRenderer<\/a> -s for the different types of series. The different SeriesRenderer<\/a> instances support different ISeries classes.<\/p>\n In our case we want a stack bar chart and we use the BarStackRenderer<\/a> . Each SeriesRenderer accepts a list with the Series<\/a> instances it must render. Here is the code for the stack bars:<\/p>\n The different SeriesRenderer<\/a> instances have different sets of properties that allow you to customize how the data series will be drawn. Here we use the barSpacingRatio<\/a> to specify the thickness of the stack bars.<\/p>\n As we mentioned earlier, the Plot2D<\/a> class has a seriesRenderers<\/a> property where we can add the different SeriesRenderer<\/a> -s that we want to show. We add the BarStackRenderer<\/a> add graphics to plot The procedure is the same for the line chart. We create another Series2D<\/a> instance:<\/p>\n We give it a title and create a LineRenderer<\/a> that will render this series:<\/p>\n Finally we add the LineRenderer<\/a> to the seriesRenderers<\/a> collection of the Plot2D<\/a> instance.<\/p>\n You might have noticed that we also set the seriesStyle<\/a> property in both the BarStackRenderer<\/a> and the LineRenderer<\/a> classes. This is the property that specifies how the chart series will be painted. There are different classes that derive from SeriesStyle<\/a> All of them concern a different pattern of applying brushes and pens to the element of a Series<\/a> We use here an instance of the PerSeriesStyle<\/a> class that accepts lists with brushes and strokes and applies one consequtive brush and stroke to all elements in the corresponding Series<\/a> . The LineRenderer<\/a> uses the UniformSeriesStyle<\/a> , which accepts just two Brush<\/a> instances as arguments and applies them to fill and stroke all elements in all Series<\/a> instances in the SeriesRenderer<\/a> .<\/p>\n IV. The Axes<\/strong><\/p>\n The chart axes are instances of the Axis<\/a> class. We use their min<\/a> , max<\/a> and interval<\/a> properties to specify the numeric data of each of the two axes that our dashboard will have – X and Y:<\/p>\n Then we specify to the Plot2D<\/a> that the Axis<\/a> instances we created are its X and Y axes:<\/p>\n As you might have guessed, the Axis<\/a> need Renderer-s to render them. They are called respectively XAxisRenderer<\/a> and YAxisRenderer<\/a> .<\/p>\n The renderers have various properties for specifying how the axes will be rendered. We use margin<\/a> to add some space around the two axes.<\/p>\n Finally, we use the layoutBuilder<\/a> property of the Dashboard<\/a> class to create a GridPanel<\/a> that will correctly measure and arrange all building blocks of our cobination chart:<\/p>\n V. The Legend<\/strong><\/p>\n As we said, the legend items are taken from the title<\/a> property of each Series<\/a> . We use a LegendRenderer<\/a> to render the legend and set some of its properties:<\/p>\n The content<\/a> property of LegendRenderer<\/a> allows us to specify a collection of SeriesRenderer<\/a> 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<\/a> to false.<\/p>\n The LegendRenderer<\/a> requires no special positioning in the dashboard layout, so we simple add it to the rootPanel<\/a> of the Dashboard<\/a> and let it handle its easure and placement:<\/p>\n VI. The Title and Subtitle<\/strong><\/p>\n The title is an instance of the TextComponent<\/a> class:<\/p>\n It has various appearance properties. Just like the LegendRenderer<\/a> the TextComponent<\/a> can be added directly to the children<\/a> of the layoutPanel.<\/p>\n Now that we’ve made all arrangements for the chart let’s not forget to call the draw<\/a> method that will render the chart on the screen:<\/p>\n That was everything. You can see an online demo of the chart here.<\/p>\n You can download the full source code of this combination chart in JavaScript together with all used libraries from here:<\/p>\n Combination Chart in JavaScript Full Code<\/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. <\/p>\n","protected":false},"excerpt":{"rendered":" In this blog post we will use the Charting for JavaScript library to create the chart that you see below: This is a combination chart has one line series and two bar series drawn in stacks. We will use the … Continue reading <canvas<\/span> id<\/span>=\"dashboard<\/a>\" style<\/span>=\"width: 100%; height: 100%; display: block;<\/a>\"><\/canvas<\/span>><\/pre>\n<a<\/span> href<\/span>=\"http:\/\/Scripts\/MindFusion.Common.js<\/a>\">http:\/\/Scripts\/MindFusion.Common.js<\/a<\/span>>\n<\/span><a<\/span> href<\/span>=\"http:\/\/Scripts\/MindFusion.Charting.js<\/a>\">http:\/\/Scripts\/MindFusion.Charting.js<\/a<\/span>><\/pre>\n<a<\/span> href<\/span>=\"http:\/\/CombinationChart.js<\/a>\">http:\/\/CombinationChart.js<\/a<\/span>><\/pre>\n\/\/\/ \nvar Charting = MindFusion.Charting;\n\nvar Controls = Charting.Controls;\nvar Collections = Charting.Collections;\nvar Drawing = Charting.Drawing;\nvar Components = Charting.Components;<\/pre>\n
\/\/ create the dashboard\nvar dashboardEl = document.getElementById('dashboard');\ndashboardEl.width = dashboardEl.offsetParent.clientWidth;\ndashboardEl.height = dashboardEl.offsetParent.clientHeight;\nvar dashboard = new Controls.Dashboard(dashboardEl);<\/pre>\nvar plot = new Charting.Plot2D();\nplot.gridType = Charting.GridType.Horizontal;\nplot.gridColor1 = plot.gridColor2 = new Drawing.Color.fromArgb(200, 243, 244, 254);<\/pre>\n
\/\/ data for first bar series\nvar barSeries1 = new Charting.BarSeries(\n\t\tnew Collections.List([9, 11, 13, 18, 19, 22, 23, 26, 29, 32, 33, 36, 41, 46, 49, 55, 57, 58, 61, 63]), \/\/y\n\t\tnull, null,\n\t\tnew Collections.List([\"1999\", \"2000\", \"2001\", \"2002\", \"2003\", \"2004\", \"2005\", \"2006\", \"2007\", \"2008\", \"2009\", \"2010\", \"2011\", \"2012\", \n\t\t\"2012\", \"2013\", \"2014\", \"2015\", \"2016\", \"2017\", \"2018\"]));<\/pre>\n
barSeries1.title = \"Total amount of goods sold\";<\/pre>\n
var barSeries2 = new Charting.Series2D(\n\t\tnew Collections.List([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]),\/\/x\n\t\tnew Collections.List([3, 4, 5, 5, 7, 8, 7, 6, 8, 15, 17, 21, 19, 18, 17, 16, 17, 19, 20, 22]),\/\/y\n\t\tnull);\n\nbarSeries2.title = \"Extra production to meet demand\";<\/pre>\n
\/\/ draw bars\nvar barRenderer = new Charting.BarStackRenderer(new Collections.ObservableCollection([barSeries1, barSeries2]));\nbarRenderer.seriesStyle = new Charting.PerSeriesStyle (new Collections.List([new Drawing.Brush(\"#230A59\"), new Drawing.Brush(\"#3E38F2\")]));\nbarRenderer.barSpacingRatio = 0.7;<\/pre>\n
plot.seriesRenderers.add(barRenderer);<\/p>\n\/\/ sample data for line graphics\nvar lineSeries = new Charting.Series2D(\n\t\t\t\tnew Collections.List([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]),\/\/x\n\t\t\t\tnew Collections.List([7, 9, 12, 15, 18, 23, 24, 27, 35, 41, 46, 49, 53, 55, 58, 61, 63, 66, 67, 69 ]),\/\/right-y\n\t\t\t\tnull);\nlineSeries.title = \"Peak demand\";<\/pre>\n
\/\/ draw lines\nvar lineRenderer = new Charting.LineRenderer(\n\t\t\t\tnew Collections.ObservableCollection([lineSeries]));\nlineRenderer.seriesStyle = new Charting.UniformSeriesStyle(new Drawing.Brush(\"#ffffff\"), new Drawing.Brush(\"#ffffff\"), 6);<\/pre>\n
plot.seriesRenderers.add(lineRenderer);<\/pre>\n
\/\/ create axes\nvar xAxis = new Charting.Axis();\nxAxis.interval = 0;\nxAxis.minValue = -1;\nxAxis.maxValue = 20;\nxAxis.title = \"\";\n\n\/\/ create axes\nvar yAxis = new Charting.Axis();\nyAxis.interval = 10;\nyAxis.minValue = 0;\nyAxis.maxValue = 100;\nyAxis.title = \"Cost of goods in mlns of USD\";<\/pre>\n
plot.yAxis = yAxis;\nplot.xAxis = xAxis;<\/pre>\n
\/\/ create renderers for the two axes\nvar xAxisRenderer = new Charting.XAxisRenderer(xAxis);\nxAxisRenderer.margin = new Charting.Margins(0, 0, 0, 10);\nxAxisRenderer.labelsSource = plot;\nxAxisRenderer.showCoordinates = false;\n\n\nvar yAxisRenderer = new Charting.YAxisRenderer(yAxis);\nyAxisRenderer.margin = new Charting.Margins(10, 0, 0, 0);<\/pre>\n
dashboard.layoutBuilder.createAndAddPlotAndAxes(\n\t\tplot, null,\n\t\t[yAxisRenderer],\n\t\t[ xAxisRenderer ],\n\t\tnull);<\/pre>\n
\/\/ add legend\nvar legendRenderer = new Charting.LegendRenderer();\nlegendRenderer.content = new Collections.ObservableCollection([barRenderer, lineRenderer]);\nlegendRenderer.background = new Drawing.Brush(\"#d0d3fb\");\nlegendRenderer.borderStroke = new Drawing.Brush(\"#BDBFAA\");\nlegendRenderer.showTitle = false;\nlegendRenderer.horizontalAlignment = Components.LayoutAlignment.Far;<\/pre>\n
dashboard.rootPanel.children.add(legendRenderer);<\/pre>\n
var tc = new Components.TextComponent();\ntc.text = \"STEADY GROWTH\";\ntc.fontSize = 20.4;\ntc.horizontalAlignment = Components.LayoutAlignment.Near;\ntc.margin = new Charting.Margins(100, 10, 0, 0);\ndashboard.layoutPanel.children.add(tc);<\/pre>\n
dashboard.draw();<\/pre>\n
The 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\n\n