Blogs

Let’s see how to create a Scatter Chart by using the jqxChart widget. 1. The first step is to include the necessary javascript files:

<script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>

2. The next step is to include the base CSS style – jqx.base.css.

<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />

3. Create some sample date to load into the Chart.

// prepare chart data as an array
var sampleData = [
	{ City: 'New York', SalesQ1: 330500, SalesQ2: 210500, YoYGrowth: 1.05 },
	{ City: 'London', SalesQ1: 120000, SalesQ2: 169000, YoYGrowth: 1.15 },
	{ City: 'Paris', SalesQ1: 205000, SalesQ2: 275500, YoYGrowth: 1.45 },
	{ City: 'Tokyo', SalesQ1: 187000, SalesQ2: 130100, YoYGrowth: 0.45 },
	{ City: 'Berlin', SalesQ1: 187000, SalesQ2: 113000, YoYGrowth: 1.65 },
	{ City: 'San Francisco', SalesQ1: 142000, SalesQ2: 102000, YoYGrowth: 1.25 },
	{ City: 'Chicago', SalesQ1: 171000, SalesQ2: 124000, YoYGrowth: 0.75 }
];

4. Add a DIV tag to the Web Page’s body. The chart will be rendered in this DIV tag, so we set its ‘width’ and ‘height’.

<div id='jqxChart' style="width:680px; height:400px">
</div>

5. Create a setting object and set up the Chart defaults. In order to display the Chart as a Scatter chart, set the type of the ‘seriesGroups’ to ‘scatter’ and define the series array. Each serie should have a dataField to point to a field in the data source.

var settings = {
	title: "Sales by City in Q1 & Q2",
	showLegend: true,
	padding: { left: 5, top: 5, right: 5, bottom: 5 },
	titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
	source: sampleData,
	categoryAxis:
		{
			dataField: 'City'
		},
	colorScheme: 'scheme04',
	seriesGroups:
		[
			{
				type: 'scatter',
				valueAxis:
				{
					unitInterval: 50000,
					minValue: 50000,
					maxValue: 350000,
					description: 'Sales ($)',
					formatSettings: { prefix: '$', thousandsSeparator: ',' }
				},
				series: [
						{ dataField: 'SalesQ1', radius: 5, displayText: 'Sales in Q1', color: '#1100EE' },
						{ dataField: 'SalesQ2', radius: 5, displayText: 'Sales in Q2', color: '#EE0011' }
					]
			}
		]
};

6. The final step is to create a new instance of the jqxChart and pass the settings object to the constructor function.

$('#jqxChart').jqxChart(settings);

Here’s the resulting Scatter Chart: