jQWidgets Forums

This topic contains 1 reply, has 1 voice, and was last updated by shawn 9 years, 4 months ago.

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

Author

nothing displays on scatter chart Posts

February 3, 2016 at 10:18 pm nothing displays on scatter chart #81091

shawn

Participant

Here is my HTML page.
There are no errors in the console, but nothing displays on screen.
What am I missing?

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Stored Motility</title>
    
    <link rel="stylesheet" href="../jqx/styles/jqx.base.css" type="text/css" />
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

    <script src="../jqx/jqxcore.js"></script>
    <script src="../jqx/jqxdata.js"></script>
    <script src="../jqx/jqxdraw.js"></script>
    <script src="../jqx/jqxchart.core.js"></script>
    <script src="../jqx/jqxbuttons.js"></script>
    <script src="../jqx/jqxlistbox.js"></script>
    <script src="../jqx/jqxscrollbar.js"></script>
    <script src="../jqx/jqxdropdownlist.js"></script>
    
    <script>
			$(document).ready(function () {    	
				// data array
				var motData=[
					{ Week: '2',mot1:89.00,mot2:75.00,mot3:83.00},
					{ Week: '4',mot1:82.00,mot2:57.00,mot3:79.00,mot4:79.00,mot5:76.00,mot6:79.00},
					{ Week: '5',mot1:84.00,mot2:87.00,mot3:87.00,mot4:94.00,mot5:88.00,mot6:83.00,mot7:86.00,mot8:78.00,mot9:80.00},
					{ Week: '6',mot1:71.00,mot2:84.00,mot3:86.00}
				];

				var settings = {
				                title: "test",
				                description: "",
				                enableAnimations: true,
				                showLegend: true,
				                padding: { left: 5, top: 5, right: 5, bottom: 5 },
				                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
				                source: motData,
				                colorScheme: 'scheme01',
				                xAxis:
				                {
				                    dataField: 'Week',
				                    valuesOnTicks: false
				                },
				                valueAxis:
				                {
				                    minValue: 0,
				                    maxValue: 100,
				                    unitInterval: 10,
				                    formatSettings: {sufix:"%"},
				                    title: {text: 'test title'},
				                    labels: {
				                        horizontalAlignment: 'right'
				                    }
				                },
				                seriesGroups:
				                    [
				                        {
				                            type: 'scatter',	
				                            series: [
			                            			{ dataField: 'mot1', symbolSize: 8, symbolType: 'diamond', displayText: 'Target'},
			                            			{ dataField: 'mot2', symbolSize: 8, symbolType: 'diamond', displayText: 'Target'},
			                            			{ dataField: 'mot3', symbolSize: 8, symbolType: 'diamond', displayText: 'Target'},
			                            			{ dataField: 'mot4', symbolSize: 8, symbolType: 'diamond', displayText: 'Target'},
			                            			{ dataField: 'mot5', symbolSize: 8, symbolType: 'diamond', displayText: 'Target'},
			                            			{ dataField: 'mot6', symbolSize: 8, symbolType: 'diamond', displayText: 'Target'},
			                            			{ dataField: 'mot7', symbolSize: 8, symbolType: 'diamond', displayText: 'Target'},
			                            			{ dataField: 'mot8', symbolSize: 8, symbolType: 'diamond', displayText: 'Target'},
			                            			{ dataField: 'mot9', symbolSize: 8, symbolType: 'diamond', displayText: 'Target'}
			                            	]
						                     }       			
				               			] 
				            };								
		
										// setup the chart
								    $('#chartContainer').jqxChart(settings);		
								    var chart = $('#chartContainer').jqxChart('getInstance');
			});
			
		
    </script>

</head>
<body>
	<div id="wrapper">
		
		<div id="chartContainer">
		</div>	

	</div>	
	
</body>
</html>

February 3, 2016 at 10:22 pm nothing displays on scatter chart #81092

shawn

Participant

I see the problem.
I had no style for size set to the #chartContainer

Author

Posts

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

You must be logged in to reply to this topic.