nothing displays on this chart - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Angular chart, chart, css, display, height, jquery chart, jqxChart, no chart displayed, style, width

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

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

Author

nothing displays on this chart Posts

April 19, 2016 at 7:58 pm 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>

April 19, 2016 at 8:20 pm 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>

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>

April 20, 2016 at 4:50 am 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/

Author

Posts

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

You must be logged in to reply to this topic.