jQWidgets Forums

Forum Replies Created

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • in reply to: Chart Data Chart Data #12062

    dgindy
    Member

    I have multiple charts with a single file.

    The file contains daily figures in 1 column and at the first of the month a different figure in the second column. I’m trying to reduce the number of files that need to be updated in the process, creating single point of entry.

    in reply to: Multiple Widgets in Tabs IE8 Multiple Widgets in Tabs IE8 #10984

    dgindy
    Member

    Could this issue be caused by the fact I’m pulling data from a file?

    in reply to: Multiple Widgets in Tabs IE8 Multiple Widgets in Tabs IE8 #10983

    dgindy
    Member

    Here is an exmaple. It only seems to fail in IE 8 so far

    <!DOCTYPE html><html lang="en"><head>
    <link rel="stylesheet" href="/jqwidgets/styles/jqx.base.css"/>
    <link rel="stylesheet" href="/jqwidgets/styles/jqx.classic.css" />
    <script type="text/javascript" src="/scripts/gettheme.js"></script>
    <script type="text/javascript" src="/scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxscrollview.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript">
    var Counter = 1;
    var myInterval;
    var source;
    var dataAdapter;
    $(function () {
    var theme = getTheme();
    var initChart = function () {
    var sampleData = [
    { Month: 'Jan', Requests: 443, Precentage: 18},
    { Month: 'Feb', Requests: 665, Precentage: 17.22},
    { Month: 'Mar', Requests: 234, Precentage: 4.47},
    { Month: 'Apr', Requests: 566, Precentage: 3.38},
    { Month: 'May', Requests: 465, Precentage: 2.74}];
    // prepare jqxChart settings
    var settings = {
    title: "Member Requests via Website",
    description: "",
    enableAnimations: true,
    showLegend: true,
    padding: { left: 10, top: 5, right: 10, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: sampleData,
    categoryAxis:
    {
    text: 'Category Axis',
    textRotationAngle: 0,
    dataField: 'Month',
    showTickMarks: true,
    valuesOnTicks: false,
    tickMarksInterval: 1,
    tickMarksColor: '#888888',
    unitInterval: 1,
    gridLinesInterval: 1,
    gridLinesColor: '#888888',
    axisSize: 'auto'
    },
    colorScheme: 'scheme05',
    seriesGroups:
    [
    {
    type: 'line',
    showLabels: true,
    symbolType: 'circle',
    valueAxis:
    {
    unitInterval: 100,
    minValue: 0,
    maxValue: 1000,
    description: 'Requests per month',
    axisSize: 'auto',
    tickMarksColor: '#888888'
    },
    series: [
    { dataField: 'Requests', displayText: 'Member Requests via Website'}
    ]
    }
    ]
    }; // setup the chart
    $('#jqxChart').jqxChart(settings);
    }
    var initResovledPercent = function () {
    var sampleData = [
    { Month: 'Jan', Requests: 443, Precentage: 18},
    { Month: 'Feb', Requests: 665, Precentage: 17.22},
    { Month: 'Mar', Requests: 234, Precentage: 4.47},
    { Month: 'Apr', Requests: 566, Precentage: 3.38},
    { Month: 'May', Requests: 465, Precentage: 2.74}];
    // prepare jqxChart settings
    var settings = {
    title: "% Resoved within 4 Hr Service Level",
    description: "",
    enableAnimations: true,
    showLegend: true,
    padding: { left: 10, top: 5, right: 10, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: sampleData,
    categoryAxis:
    {
    text: 'Category Axis',
    textRotationAngle: 0,
    dataField: 'Month',
    showTickMarks: true,
    valuesOnTicks: false,
    tickMarksInterval: 1,
    tickMarksColor: '#888888',
    unitInterval: 1,
    gridLinesInterval: 1,
    gridLinesColor: '#888888',
    axisSize: 'auto'
    },
    colorScheme: 'scheme05',
    seriesGroups:
    [
    {
    type: 'column',
    showLabels: true,
    symbolType: 'circle',
    valueAxis:
    {
    unitInterval: 10,
    minValue: 0,
    maxValue: 100,
    description: 'Requests per month',
    axisSize: 'auto',
    tickMarksColor: '#888888'
    },
    series: [
    { dataField: 'Precentage', displayText: '% Resoved within Service Level'}
    ]
    }
    ]
    }; // setup the chart
    $('#jqxRequestResolved').jqxChart(settings);
    }
    //$('#jqxChart1').jqxChart(settings);
    var initWidgets = function (tab) {
    switch (tab) {
    case 0:
    break;
    case 1:
    initChart();
    break;
    case 2:
    initResovledPercent();
    break;
    }
    }
    $('#jqxTabs').jqxTabs({ width: 600, height: 375, position: 'bottom', theme: theme,initTabContent: initWidgets });
    myInterval=setInterval(function () {
    var length = $('#jqxTabs').jqxTabs('length');
    $('#jqxTabs').jqxTabs('select', (Counter % length));
    Counter++;
    },4000);
    $('#jqxTabs').on('tabclick', function (event) {
    clearInterval(myInterval);
    });
    });
    $('#jqxScrollView').bind('pageChanged',function PC (event)
    {
    var page = event.args.currentPage;
    alert(page);
    } );
    </script>
    <style type="text/css">
    .photo
    {
    width: 600px;
    height: 450px;
    background-color: #000;
    background-position: center;
    background-repeat: no-repeat;
    }
    </style>
    </head>
    <body class="default">
    <div id='jqxWidget'>
    <div id='jqxTabs'>
    <ul>
    <li style="margin-left: 30px;">EPIP</li>
    <li>Request via Website</li>
    <li>% Resolved in 4 hours</li>
    </ul>
    <div>
    <div class="ChangeLeft">
    <div style="top:20%; height: 285px; width:15px;background-image: url('images/icon-right.png');background-repeat:no-repeat;position:absolute; display:none" ></div>
    </div>
    <img src="http://rcunet/MediaHandler.ashx?id=0001D500.png" style="float:right; vertical-align:middle;width: 490px; height: 285px;border: 0px solid;" />
    <div style="color: #000000" >Progress as of September Month End <br> <br>October Month End Results will be Updated on or Before November 18th</div>
    <div class="ChangeRight">
    <div style="top:20%; height: 285px; width:15px;background-image: url('images/icon-right.png');background-repeat:no-repeat;position:absolute; display:none" ></div>
    </div>
    </div>
    <div >
    <div id='jqxChart' style="width:475px; height:285px;float:right;overflow:hidden;"></div>
    <div style="color: #000000;overflow:hidden;" >Number of Member requests for contact handled by MSC.</div>
    </div>
    <div>
    <div id='jqxRequestResolved' style="width:450px; height:285px;float:right;overflow:hidden;"></div>
    <div style="color: #000000;overflow:hidden;" >Percentage of Requests for Contact from Members handled by MSC in 4 hours or less.</div>
    </div>
    </div>
    </div>
    </body>
    </html>
    in reply to: Test Topic Test Topic #10976

    dgindy
    Member

    Here is what i’m executing as line graphs but when i change the second line graph to a bar graph things fail.

    <!DOCTYPE html><html lang="en"><head>
    <link rel="stylesheet" href="/jqwidgets/styles/jqx.base.css"/>
        <link rel="stylesheet" href="/jqwidgets/styles/jqx.classic.css" />
        <script type="text/javascript" src="/scripts/gettheme.js"></script>
        <script type="text/javascript" src="/scripts/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="/jqwidgets/jqxscrollview.js"></script>
        <script type="text/javascript" src="/jqwidgets/jqxbuttons.js"></script>
    	<script type="text/javascript" src="/jqwidgets/jqxchart.js"></script>
    	<script type="text/javascript" src="/jqwidgets/jqxdata.js"></script>
    	<script type="text/javascript" src="/jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript">
    var Counter = 1;
    var myInterval;
    var source;
    var dataAdapter;
    $(function () {
    var theme = getTheme();
    var initChart = function () {
    source =
    {
    					datatype: "csv",
    datafields: [
    						{ name: 'Month'},
    						{ name: 'Requests'},
    						{ name: 'Precentage'}],
    						url: /MonthlyRequests.csv'
    };
    			dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : '+ error); } });
    // prepare jqxChart settings
    var settings = {
                    title: "Member Requests via Website",
    description: "",
    enableAnimations: true,
    showLegend: true,
    padding: { left: 10, top: 5, right: 10, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: dataAdapter,
    categoryAxis:
    {
                            text: 'Category Axis',
    textRotationAngle: 0,
                            dataField: 'Month',
    showTickMarks: true,
    valuesOnTicks: false,
    tickMarksInterval: 1,
                            tickMarksColor: '#888888',
    unitInterval: 1,
    gridLinesInterval: 1,
                            gridLinesColor: '#888888',
                            axisSize: 'auto'
    },
                    colorScheme: 'scheme05',
    seriesGroups:
    [
    {
                                type: 'line',
    showLabels: true,
                                symbolType: 'circle',
    valueAxis:
    {
    unitInterval: 100,
    minValue: 0,
    maxValue: 1000,
                                    description: 'Requests per month',
                                    axisSize: 'auto',
                                    tickMarksColor: '#888888'
    },
    series: [
                                        { dataField: 'Requests', displayText: 'Member Requests via Website'}
    ]
    }
    ]
    };         // setup the chart
    				$('#jqxChart').jqxChart(settings);
    }
    var initResovledPercent = function () {
    source =
    {
    					datatype: "csv",
    datafields: [
    						{ name: 'Month'},
    						{ name: 'Requests'},
    						{ name: 'Precentage'}],
    						url: /MonthlyRequests.csv'
    };
    			dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : '+ error); } });
    // prepare jqxChart settings
    var settings = {
                    title: "% Resoved within 4 Hr Service Level",
    description: "",
    enableAnimations: true,
    showLegend: true,
    padding: { left: 10, top: 5, right: 10, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: dataAdapter,
    categoryAxis:
    {
                            text: 'Category Axis',
    textRotationAngle: 0,
                            dataField: 'Month',
    showTickMarks: true,
    valuesOnTicks: false,
    tickMarksInterval: 1,
                            tickMarksColor: '#888888',
    unitInterval: 1,
    gridLinesInterval: 1,
                            gridLinesColor: '#888888',
                            axisSize: 'auto'
    },
                    colorScheme: 'scheme05',
    seriesGroups:
    [
    {
                                type: 'line',
    showLabels: true,
                                symbolType: 'circle',
    valueAxis:
    {
    unitInterval: 10,
    minValue: 0,
    maxValue: 100,
                                    description: 'Requests per month',
                                    axisSize: 'auto',
                                    tickMarksColor: '#888888'
    },
    series: [
                                        { dataField: 'Precentage', displayText: '% Resoved within Service Level'}
    ]
    }
    ]
    };      // setup the chart
    				$('#jqxRequestResolved').jqxChart(settings);
    }
    			//$('#jqxChart1').jqxChart(settings);
    var initWidgets = function (tab) {
    switch (tab) {
    case 0:
    break;
    case 1:
    initChart();
    break;
    case 2:
    initResovledPercent();
    break;
    }
    }
                $('#jqxTabs').jqxTabs({ width: 600, height: 375, position: 'bottom', theme: theme,initTabContent: initWidgets });
    myInterval=setInterval(function () {
    						var length = $('#jqxTabs').jqxTabs('length');
    						$('#jqxTabs').jqxTabs('select', (Counter % length));
    Counter++;
    },4000);
    			$('#jqxTabs').on('tabclick', function (event) {
    clearInterval(myInterval);
    });
    });
    $('#jqxScrollView').bind('pageChanged',function PC (event)
    {
    var page = event.args.currentPage;
    alert(page);
    }	 );
    </script>
        <style type="text/css">
    .photo
    {
    width: 600px;
    height: 450px;
    background-color: #000;
    background-position: center;
    background-repeat: no-repeat;
    }
        </style>
    </head>
    <body class="default">
    	<div id='jqxWidget'>
            <div id='jqxTabs'>
                <ul>
                    <li style="margin-left: 30px;">EPIP</li>
                    <li>Request via Website</li>
    				<li>% Resolved in 4 hours</li>
                </ul>
    			<div>
    				<img src="/MediaHandler.ashx?id=0001D500.png" style="float:right; vertical-align:middle;width: 490px; height: 285px;border: 0px solid;" />
    				<div style="color: #000000" >Progress as of September Month End <br> <br>October Month End Results will be Updated on or Before November 18th</div>
    			</div>
    			<div >
    				<div id='jqxChart' style="width:475px; height:285px;float:right;overflow:hidden;"></div>
    					<div style="color: #000000;overflow:hidden;" >Number of Member requests for contact handled by MSC.</div>
    			</div>
    			<div>
    				<div id='jqxRequestResolved' style="width:450px; height:285px;float:right;overflow:hidden;"></div>
    					<div style="color: #000000;overflow:hidden;" >Percentage of Requests for Contact from Members handled by MSC in 4 hours or less.</div>
    			</div>
    		</div>
    	</div>
    </body>
    </html>
    in reply to: Multiple Widgets in Tabs IE8 Multiple Widgets in Tabs IE8 #10818

    dgindy
    Member

    Those I did find out this only seems to be an issue when rendering the bar/column graph.

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