I'm cannot use chart bar stackedcolumn. Help me please - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: breaking change, chart, jqxChart, jqxDraw, version

This topic contains 4 replies, has 2 voices, and was last updated by Autthpon 10 years, 7 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

I'm cannot use chart bar stackedcolumn. Help me please Posts

August 7, 2014 at 9:13 am I'm cannot use chart bar stackedcolumn. Help me please #58118

Participant

I’m use “jQWidgets v3.2.1” and cannot new version
Is there a way I can write code or not?

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 }
	];
	var oSettings = {
		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: 'scheme04',
		seriesGroups: [
			{
				type: 'stackedcolumn100',
				columnsGapPercent: 100,
				seriesGapPercent: 5,
				valueAxis: {
					unitInterval: 10,
					minValue: 0,
					maxValue: 100,
					displayValueAxis: true,
					description: 'Time in minutes',
					axisSize: 'auto',
					tickMarksColor: '#888888'
				},
				series: [
					{ dataField: 'Running', displayText: 'Running' },
					{ dataField: 'Swimming', displayText: 'Swimming' },
					{ dataField: 'Cycling', displayText: 'Cycling' }
				]
			}
		]
	};

	// setup the chart
	jDiv.jqxChart(oSettings);

August 7, 2014 at 9:30 am I'm cannot use chart bar stackedcolumn. Help me please #58122

Dimitar

Participant

Hello Autthpon,

A breaking change regarding jqxChart was introduced in version 3.4.0. Here are the details (excerpt from the Release History):

In order to support the new jqxDraw widget and our future data visualization roadmap, the core rendering functionality is moved from jqxchart.js to a new file jqxdraw.js The core charting functionality is now in jqxchart.core.js and jqxchart.js will be deprecated.

Users of jqxChart are advised to make the following change:

Include jqxdraw.js and jqxchart.core.js instead of jqxchart.js

We will continue providing jqxchart.js as a separate file in order to minimize migration cost and allow users to use the new versions without significant changes. However this file will be deprecated in future versions.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

August 7, 2014 at 10:00 am I'm cannot use chart bar stackedcolumn. Help me please #58123

Autthpon

Participant

You can preview the file, I got it.

August 7, 2014 at 10:07 am I'm cannot use chart bar stackedcolumn. Help me please #58124

Dimitar

Participant

Hi Autthpon,

I am not sure I understand you. Here is your example with the correct script references. It runs fine with version 3.4.0:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.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">
        $(document).ready(function () {
            var jDiv = $("#chartContainer");
            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 }
	        ];
            var oSettings = {
                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: 'scheme04',
                seriesGroups: [
			        {
			            type: 'stackedcolumn100',
			            columnsGapPercent: 100,
			            seriesGapPercent: 5,
			            valueAxis: {
			                unitInterval: 10,
			                minValue: 0,
			                maxValue: 100,
			                displayValueAxis: true,
			                description: 'Time in minutes',
			                axisSize: 'auto',
			                tickMarksColor: '#888888'
			            },
			            series: [
					        { dataField: 'Running', displayText: 'Running' },
					        { dataField: 'Swimming', displayText: 'Swimming' },
					        { dataField: 'Cycling', displayText: 'Cycling' }
				        ]
			        }
		        ]
            };

            // setup the chart
            jDiv.jqxChart(oSettings);
        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width: 850px; height: 500px">
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

August 8, 2014 at 4:55 am I'm cannot use chart bar stackedcolumn. Help me please #58156

Autthpon

Participant

thank you very much

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.