Blogs

In this post, we will display a combination of Line and Column series in one Chart. The data that we will visualize is:

var sampleData = [
	{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
	{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
	{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
	{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
	{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
	{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
	{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];

In order to add jqxChart to your web page, you need to include jqxchart.js, jqxcore.js, jqxdata.js, jqx.base.css and the jQuery framework. 3. The code below creates a Chart that combines line and column series. We set the chart’s source to point to the sampleData array and bind the categoryAxis(horizontal X axis) to the Day property of our data source. Each of the series is bound to one of the properties in our data source and will render data corresponding to the bound dataField. To render line and column series in the Chart, we define two objects in the seriesGroups array. If you want to learn more about the other properties which we use in the post, take a look at this help topic: jquery-chart-api.htm. The last row selects a DIV tag by its id(‘jqxChart’) and calls the jqxChart constructor to create the Chart.

// prepare jqxChart settings
var settings = {
	title: "Fitness & exercise weekly scorecard",
	description: "Time spent in vigorous exercise by activity",
	enableAnimations: true,
	showLegend: true,
	padding: { left: 5, top: 5, right: 5, bottom: 5 },
	titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
	source: sampleData,
	categoryAxis:
		{
			text: 'Category Axis',
			textRotationAngle: 0,
			dataField: 'Day',
			showTickMarks: true,
			tickMarksInterval: 1,
			tickMarksColor: '#888888',
			unitInterval: 1,
			showGridLines: false,
			gridLinesInterval: 1,
			gridLinesColor: '#888888',
			axisSize: 'auto'
		},
	colorScheme: 'scheme05',
	seriesGroups:
		[
			{
				type: 'line',
				valueAxis:
				{
					unitInterval: 10,
					minValue: 0,
					maxValue: 100,
					displayValueAxis: false,
					description: 'Goal in minutes',
					axisSize: 'auto',
					tickMarksColor: '#888888'
				},
				series: [
						{ dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
					]
			},
			{
				type: 'column',
				columnsGapPercent: 100,
				seriesGapPercent: 5,
				valueAxis:
				{
					unitInterval: 10,
					minValue: 0,
					maxValue: 100,
					displayValueAxis: true,
					description: 'Time in minutes',
					axisSize: 'auto',
					tickMarksColor: '#888888',
					gridLinesColor: '#777777'
				},
				series: [
						{ dataField: 'Running', displayText: 'Running' },
						{ dataField: 'Swimming', displayText: 'Swimming' },
						{ dataField: 'Cycling', displayText: 'Cycling' }
					]
			}
		]
};
// setup the chart
$('#jqxChart').jqxChart(settings);