jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
96 lines (92 loc) • 4.59 kB
HTML
<html lang="en">
<head>
<title id='Description'>JavaScript Chart Stacked Column Series Example</title>
<meta name="description" content="This is an example of JavaScript Chart Stacked Column Series." />
<meta name="keywords" content="jqwidgets charts, jquery charts, javascript charts, ajax charts, graphs, plots, line charts, bar charts, pie charts, javascript plots, ajax plots" />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.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/jqxdraw.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxchart.core.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare chart data as an array
var sampleData = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25 },
{ Day: 'Thursday', Running: 35, Swimming: 25, Cycling: 45 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30 },
{ Day: 'Sunday', Running: 60, Swimming: 45, Cycling: 0 }
];
// 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,
xAxis:
{
dataField: 'Day',
unitInterval: 1,
axisSize: 'auto',
tickMarks: {
visible: true,
interval: 1,
color: '#BCBCBC'
},
gridLines: {
visible: true,
interval: 1,
color: '#BCBCBC'
}
},
valueAxis:
{
unitInterval: 10,
minValue: 0,
maxValue: 120,
title: { text: 'Time in minutes' },
labels: { horizontalAlignment: 'right' },
tickMarks: { color: '#BCBCBC' }
},
colorScheme: 'scheme06',
seriesGroups:
[
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 0,
series: [
{ dataField: 'Running', displayText: 'Running' },
{ dataField: 'Swimming', displayText: 'Swimming' },
{ dataField: 'Cycling', displayText: 'Cycling' }
]
}
]
};
// setup the chart
$('#chartContainer').jqxChart(settings);
});
</script>
</head>
<body class='default'>
<div id='chartContainer' style="width:850px; height:500px;"/>
</div>
<div class="example-description">
<br />
<h2>Description</h2>
<br />
This is an example of JavaScript Chart Stacked Column Series. The type of the chart is stackedcolumn. The axis size setting is set to auto. The valueAxis labels have right horizontal alignment.
</div>
</body>
</html>