jQuery UI Widgets Forums Chart nothing displays on this chart

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 7 years, 12 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • nothing displays on this chart #83664

    shawn
    Participant

    No chart loads using this code. I get no console errors, only the “print this page” button shows.
    why?

    <!doctype html>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<title>Culture Summary</title>
    	<meta name="description" content="Culture Summary">
    	<meta name="author" content="Shawn Anderson">
    
    	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    	
    	<link rel="stylesheet" href="../jqx/styles/jqx.base.css" type="text/css" />
    	<link rel="stylesheet" href="../css/culture3.css?v=1.0">
    
    </head>
    <body>
    	
    	<div id="wrapper">
    
    			<div id="header" >
    				<!-- insert company  header -->
    			</div>	
    
    			<div id="graphWrapper">
    
    			</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>
    
    <script src="../jqx/jqxcore.js"></script>
    <script src="../jqx/jqxdraw.js"></script>
    <script src="../jqx/jqxchart.core.js"></script>
    <script src="../jqx/jqxdata.js"></script>
    
    	
    <script>
    	// print page function
    	function printThis(){
    		
    		
    	};
    	
    	$(document).ready(function () {
                // prepare chart data as an array
                var sampleData = [
                        { Growth: 'No Growth', wk1: 30, wk2: 0, wk3: 25 },
                        { Growth: '1-10', wk1: 25, wk2: 25, wk3: 0 },
                        { Growth: '11-100', wk1: 30, wk2: 0, wk3: 25 },
                        { Growth: '101-1000', wk1: 35, wk2: 25, wk3: 45 },
                        { Growth: '1001-10000', wk1: 0, wk2: 20, wk3: 25 },
                        { Growth: 'TNTC', wk1: 30, wk2: 0, wk3: 30 }                    
                    ];
                // prepare jqxChart settings
                var settings = {
                    title: "//clientSpan",
                    description: "Culture Summary by Submission",
                    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: 'Growth',
                        tickMarks: {
                            visible: true,
                            interval: 1,
                            color: '#BCBCBC'
                        },
                        gridLines: {
                            visible: true,
                            interval: 1,
                            color: '#BCBCBC'
                        },
                        axisSize: 'auto'
                    },
                    valueAxis:
                    {
                        unitInterval: 1,
                        title: {text: 'Number of Samples'},
                        tickMarks: {color: '#BCBCBC'},
                        gridLines: {color: '#BCBCBC'},
                        labels: {
                            horizontalAlignment: 'right'
                        },
                    },
                    colorScheme: 'scheme04',
                    seriesGroups:
                        [
                            {
                                type: 'stackedcolumn100',
                                columnsGapPercent: 100,
                                seriesGapPercent: 5,
                                series: [
                                        { dataField: 'wk1', displayText: 'wk1' },
                                        { dataField: 'wk2', displayText: 'wk2' },
                                        { dataField: 'wk3', displayText: 'wk3' }
                                    ]
                            }
                        ]
                };
                // setup the chart
                $('#graphWrapper').jqxChart(settings);
            });
      </script>
    
    </body>
    </html>
    
    nothing displays on this chart #83665

    shawn
    Participant

    I’ve made some changes, but still no chart

    <!doctype html>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<title>Culture Summary</title>
    	<meta name="description" content="Culture Summary">
    	<meta name="author" content="Shawn Anderson">
    
    	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    	
    	<link rel="stylesheet" href="../jqx/styles/jqx.base.css" type="text/css" />
    	<link rel="stylesheet" href="../css/culture3.css?v=1.0">
    
    </head>
    <body>
    	
    	<div id="wrapper">
    
    			<div id="header" >
    				<!-- insert company  header -->
    			</div>	
    
    			<div id="graphWrapper">
    
    			</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>
    
    <script src="../jqx/jqxcore.js"></script>
    <script src="../jqx/jqxdraw.js"></script>
    <script src="../jqx/jqxchart.core.js"></script>
    <script src="../jqx/jqxdata.js"></script>
    
    	
    <script>
    	// print page function
    	function printThis(){
    		
    		
    	};
    	
    	$(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: "Culture Summary by Submission",
                    enableAnimations: true,
                    showLegend: true,
                    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: 1,
                        title: {text: 'Number of Samples'},
                        tickMarks: {color: '#BCBCBC'},
                        gridLines: {color: '#BCBCBC'},
                        labels: {
                            horizontalAlignment: 'right'
                        },
                    },
                    colorScheme: 'scheme04',
                    seriesGroups:
                        [
                            {
                                type: 'stackedcolumn100',
                                columnsGapPercent: 100,
                                seriesGapPercent: 5,
                                series: [
                                        { dataField: 'No Growth', displayText: 'No Growth' },
                                        { dataField: '1-10', displayText: '1-10' },
                                        { dataField: '11-100', displayText: '11-100' }
                                    ]
                            }
                        ]
                };
                // setup the chart
                $('#graphWrapper').jqxChart(settings);
            });
      </script>
    
    </body>
    </html>
    
    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>
    nothing displays on this chart #83676

    Dimitar
    Participant

    Hello shawn,

    The width and height of the jqxChart’s initialization div have to be set in order for it to properly appear on the page.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.