jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Grid Chart – Height and Width?

Tagged: 

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Grid Chart – Height and Width? Posts
  • February 15, 2022 at 10:38 pm Grid Chart – Height and Width? #121535

    pauld
    Participant

    Is there any way to set the height and width of the grid chart container? It appears to default to 400×400. We have tried to override it with css, but it’s ignored.

    .jqx-popup[role=dialog] {
    height: 600px !important,
    width: 800px !important
    }

    Thanks

    February 17, 2022 at 5:00 pm Grid Chart – Height and Width? #121544

    admin
    Keymaster

    Hi pauld,

    You can achieve that by using the charting property of jqxGrid.

    Example:

    <!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from Array data.</title>
    <link rel="stylesheet" href="../../../jqwidgets-src/styles/jqx.base.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />	
    <script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/jqxcore.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/jqxdata.js"></script> 
    <script type="text/javascript" src="../../../jqwidgets-src/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/jqxmenu.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/jqxgrid.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/jqxdatetimeinput.js"></script>
	<script type="text/javascript" src="../../../jqwidgets-src/jqxgrid.selection.js"></script> 
  	<script type="text/javascript" src="../../../jqwidgets-src/jqxgrid.chart.js"></script> 
    <script type="text/javascript" src="../../../jqwidgets-src/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/jqxdraw.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/jqxchart.api.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/jqxwindow.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../../scripts/demos.js"></script>
    <style>
		#toolbar {
			display: flex;
			height: 100%;
			padding: 0 1rem;
		}

			#toolbar.warning:after {
				content: 'Selected data cannot be used to create a chart.';
				position: absolute;
				top: 50%;
				right: 10px;
				transform: translateY(-50%);
				color: var(--smart-error);
			}

			#toolbar > div {
				display: flex;
				align-items: flex-end;
				justify-content: center;
				margin-right: 15px;
				width: 35px;
				height: 30px;
				height: 100%;
				font-size: 12px;
				background-size: contain;
				background-repeat: no-repeat;
				user-select: none;
				cursor: pointer;
			}

				#toolbar > div:hover {
					background-color: var(--smart-grid-column-header-background-hover);
				}

				#toolbar > div:active {
					background-color: var(--smart-grid-column-header-background-active);
				}

				#toolbar > div.warning {
					outline: 2px solid var(--smart-error);
				}

		#column {
			background-image: url("../../../jqwidgets-src/styles/images/create-column.png");
		}

		#line {
			background-image: url("../../../jqwidgets-src/styles/images/create-line.png");
		}

		#pie {
			background-image: url("../../../jqwidgets-src/styles/images/create-pie.png");
		}

		#bar {
			background-image: url("../../../jqwidgets-src/styles/images/create-bar.png");
		}

		#area {
			background-image: url("../../../jqwidgets-src/styles/images/create-area.png");
		}

		#scatter {
			background-image: url("../../../jqwidgets-src/styles/images/create-scatter.png");
		}

		[theme="dark"] #column {
			background-image: url("../../../jqwidgets-src/styles/images/create-column-dark.png");
		}

		[theme="dark"] #line {
			background-image: url("../../../jqwidgets-src/styles/images/create-line-dark.png");
		}

		[theme="dark"] #pie {
			background-image: url("../../../jqwidgets-src/styles/images/create-pie-dark.png");
		}

		[theme="dark"] #bar {
			background-image: url("../../../jqwidgets-src/styles/images/create-bar-dark.png");
		}

		[theme="dark"] #area {
			background-image: url("../../../jqwidgets-src/styles/images/create-area-dark.png");
		}

		[theme="dark"] #scatter {
			background-image: url("../../../jqwidgets-src/styles/images/create-scatter-dark.png");
		}
	</style>
	<script type="text/javascript">
        window.onload = function() {
            var grid = new jqxGrid("#jqxgrid", {
                width: '100%',
				autoheight: true,
				rendertoolbar: function(toolbar){
					var template = document.getElementById('toolbarTemplate');		
				    var chartToolbar = document.importNode(template.content, true);
					var toolbarElement = toolbar[0];
					
					toolbarElement.appendChild(chartToolbar);	
					
				    toolbarElement.querySelector('#column').addEventListener('click', function () {
						grid.createChart('column');
					});

					toolbarElement.querySelector('#line').addEventListener('click', function () {
						grid.createChart('line');
					});

					toolbarElement.querySelector('#pie').addEventListener('click', function () {
						grid.createChart('pie');
					});

					toolbarElement.querySelector('#bar').addEventListener('click', function () {
						grid.createChart('bar');
					});

					toolbarElement.querySelector('#area').addEventListener('click', function () {
						grid.createChart('area');
					});

					toolbarElement.querySelector('#scatter').addEventListener('click', function () {
						grid.createChart('scatter');
					});
				},
                source: {
					localData: [
						{ Name: 'Zavier Vargas', Income: 59039, Expenses: 13303, Debt: 15000 },
						{ Name: 'Mark Beasley', Income: 22468, Expenses: 7600, Debt: 0 },
						{ Name: 'Skyla Khan', Income: 111459, Expenses: 101009, Debt: 7300 },
						{ Name: 'Deandre Weber', Income: 28233, Expenses: 31045, Debt: 21000 },
						{ Name: 'Isla Doyle', Income: 92030, Expenses: 90581, Debt: 160000 },
						{ Name: 'Jaslyn Barron', Income: 112083, Expenses: 100322, Debt: 43500 },
						{ Name: 'Monserrat Mccann', Income: 92510, Expenses: 28345, Debt: 17890 },
						{ Name: 'Britney Fuller', Income: 55091, Expenses: 55020, Debt: 31000 },
						{ Name: 'Bernard Munoz', Income: 10030, Expenses: 43012, Debt: 30000 },
						{ Name: 'Sherlyn Vincent', Income: 81209, Expenses: 14390, Debt: 3000 }
					],
					dataFields: [{
						name: 'Name',
						type: 'string'
					}, {
						name: 'Income',
						type: 'number'
					}, {
						name: 'Expenses',
						type: 'number'
					}, {
						name: 'Debt',
						type: 'number'
					}],
					datatype: "array"
				},
				showtoolbar: true,
				toolbarheight: 50,
                sortable: true,
                ready: function () {
					this.charting.dialog.width = 800;
					this.charting.dialog.height = 800;
                },
                selectionmode: 'multiplecellsadvanced',
                columns: [
			  	    { text: 'Name', dataField: 'Name', width: '25%'},
					{ text: 'Income (2020)', dataField: 'Income', cellsFormat: 'c0', width: '25%' },
					{ text: 'Expenses (2020)', dataField: 'Expenses', cellsFormat: 'c0', width: '25%' },
					{ text: 'Remaining Debt', dataField: 'Debt', cellsFormat: 'c0' }					
				]
            });
			
			
        }
    </script>
</head>
<body class='default'>
    <template id="toolbarTemplate">
	     <div id="toolbar">
            <div id="column">Column</div>
            <div id="line">Line</div>
            <div id="pie">Pie</div>
            <div id="bar">Bar</div>
            <div id="area">Area</div>
            <div id="scatter">Scatter</div>
        </div>
	</template>
    <div id="jqxgrid"></div>
 </body>
</html>

    Best regards,
    Peter Stoev

    jQWidgets Team
    https://www.jqwidgets.com/

    February 17, 2022 at 5:07 pm Grid Chart – Height and Width? #121545

    pauld
    Participant

    Thank you, Peter. Works great!

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.