jQuery UI Widgets › Forums › Chart › iframe alternative responsive design

Tagged: , , , ,

This topic contains 4 replies, has 2 voices, and was last updated by  Hristo 7 years, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    iframe alternative responsive design Posts
  • July 14, 2017 at 9:50 am iframe alternative responsive design #94919

    Blomotom
    Participant

    Hello all,
    I search a way to put 2 charts in a single HTML file (MYPAGE.html) and that charts are “responsive”.
    Actually i use “iframe” way to insert charts.

    For information i use index.php who contain chart / data.php who contain data (from json) / MYPAGE.html who contain all charts.

    I think to include ??? But can i in html ?

    Thanks in advance for your help.
    Best regards.
    Blomo

    <div class="row">
		        <div class="col-md-12 mb-medium text-center heading">
			<h1><span>Chart1</span>General</h1>
			</div>
			<center><span><iframe frameborder='0' style='width: 100%; height: 500px; outline: none; margin: 0px; padding: 0px; border:none;background: #fff;'
            src="index1.php"></iframe></span></center>
			<br></br><br></br>
			
			<div class="row">
		 	<div class="col-md-12 mb-medium text-center heading">
			<h1><span>Chart2</span>General</h1>
			</div>
			<center><span><iframe frameborder='0' style='width: 100%; height: 500px; outline: none; margin: 0px; padding: 0px;               border:none;background: #fff;'
            src="index2.php"></iframe></span></center>
			<br></br><br></br>
    July 14, 2017 at 1:46 pm iframe alternative responsive design #94924

    Blomotom
    Participant

    I have do this (but dont work) :
    MY PAGE.HTML 

    <head>
	<!-- jqxwidget ================================================== -->
	<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
	<script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
	<script type="text/javascript" src="jqwidgets/jqxchart.js"></script>	
	<script type="text/javascript" src="jqwidgets/jqxdata.js"></script>	
	<!-- Chart1================================================== -->
	<script type="text/javascript" src="js/chart1.js"></script>	
</head>

<body>
<div class='default'>
<div style="width:670px; height:400px" id="jqxChart"></div>
</body>
    July 19, 2017 at 11:44 am iframe alternative responsive design #94995

    Hristo
    Participant

    Hello Blomotom,

    You could try to set the two Charts in two <div/> tags with style="float: left; width: 50%; height: 100%;".

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    July 21, 2017 at 6:55 pm iframe alternative responsive design #95051

    Blomotom
    Participant

    Hello,
    I sorry but i m disappointed.
    How do you do this ?

    For me, when……

    CODE1 :

    <head>
	<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
	<script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>	
	<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>	
	<script type="text/javascript">
		$(document).ready(function () {
			// chart script
			// setup the chart
			$('#jqxChart').jqxChart(settings);
		});
	</script>
</head>

    and…..
    CODE2:

    <body class='default'>
      <div id="jqxChart" style="width:100%; align:center; height:100%;"></div>
</body>

    ……are on them page it’s work.
    But when i have an other html page who have two charts i can t have two same head (CODE1) !! I propably a noob sorry.

    For me following code are ok but how can i call the ‘head’ (script) for the differents chart ????

    <body class='default'>
<div id="jqxChart" style="width:100%; align:center; height:100%;"></div>
<div id="jqxChart1" style="width:100%; align:center; height:100%;"></div>
<div id="jqxChart2" style="width:100%; align:center; height:100%;"></div>
<div id="jqxChart3" style="width:100%; align:center; height:100%;"></div>
<div id="jqxChart4" style="width:100%; align:center; height:100%;"></div>
</body>
    July 24, 2017 at 10:00 am iframe alternative responsive design #95086

    Hristo
    Participant

    Hello Blomotom,

    Please, take a look at this example.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.