jQWidgets Forums

April 19, 2016 at 9:01 pm nothing displays on this chart #83669
shawn
Participant
well I got this to work. I’m not sure what I did to make it work though.
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Culture Summary by Submission</title>
	  <meta name="description" content="Culture Summary by Submission">	
		
    <link rel="stylesheet" href="../jqx/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../css/culture3.css" type="text/css" />
    
	  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.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>
        $(document).ready(function () {
            // prepare chart data as an array
            var chartData = [
                    { week: 'wk1', 'No Growth': 30, '1-10': 0, '11-100': 25 },
                    { week: 'wk2', 'No Growth': 25, '1-10': 25, '11-100': 0 },
                    { week: 'wk3', 'No Growth': 30, '1-10': 0, '11-100': 25 },
                    { week: 'wk4', 'No Growth': 35, '1-10': 25, '11-100': 45 },
                    { week: 'wk5', 'No Growth': 0, '1-10': 20, '11-100': 25 },
                    { week: 'wk6', 'No Growth': 30, '1-10': 0, '11-100': 30 }                    
                ];
            // prepare jqxChart settings
            var settings = {
                title: "//clientSpan",
                description: "//dateSpan",
                enableAnimations: true,
                showLegend: true,
                legendLayout : { left: 750, top: 10, width: 500, height: 200, flow: 'vertical' },
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: chartData,
                xAxis:
                {
                    dataField: 'week',
                    tickMarks: {
                        visible: true,
                        interval: 1,
                        color: '#BCBCBC'
                    },
                    gridLines: {
                        visible: true,
                        interval: 1,
                        color: '#BCBCBC'
                    },
                    axisSize: 'auto'
                },
                valueAxis:
                {
                    unitInterval: 10,
                    title: {text: 'Number of Samples'},
                    tickMarks: {color: '#BCBCBC'},
                    gridLines: {color: '#BCBCBC'},
                    labels: {
                        horizontalAlignment: 'right'
                    },
                },
                colorScheme: 'scheme04',
                seriesGroups:
                    [
                        {
                            type: 'stackedcolumn',
                            columnsGapPercent: 100,
                            seriesGapPercent: 5,
                            series: [
                                    { dataField: 'No Growth', displayText: 'No Growth' },
                                    { dataField: '1-10', displayText: '1-10' },
                                    { dataField: '11-100', displayText: '11-100' },
                                    { dataField: '100-1001', displayText: '100-1001' },
                                    { dataField: '1001-10000', displayText: '1001-10000' },
                                    { dataField: 'TNTC', displayText: 'TNTC' }
                                ]
                        }
                    ]
            };
            // setup the chart
            $('#chartContainer').jqxChart(settings);
            
				    // add a new color scheme named 'kuster'
				    $('#chartContainer').jqxChart('addColorScheme', 'kuster', ['#00C000', '#80FF80', '#FFFF40','#F8902C', '#FF8080', '#FF0000']);
				    // apply the new scheme by setting the chart's colorScheme property
				    $('#chartContainer').jqxChart('colorScheme', 'kuster');
				    // refresh the chart
				    $('#chartContainer').jqxChart('refresh');            
        });
    </script>
</head>
<body>
	<div id="wrapper">

			<div id="header" >
				<!-- insert company  header -->
			</div>	

			<div id="chartContainer" style="width:850px; height:500px;">
			</div>	

			<div class='noPrint' id='bPrint'>
			<button style='font-size:8pt' onclick="printThis();">print this page</button><br>
			For your protection, this link will expire in 7 days.
			</div>	
	
	</div>
</body>
</html>