jQuery UI Widgets Forums Chart weired Chart's xAxis with custom source

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author

  • vv9863
    Participant
    
    $("#jqxChart").jqxChart({
        source : chartSources,
        description : description,
        xAxis : {
            dataField: 'Day',
    	displayText : 'Date',
            unitInterval: 1,
    	tickMarks: { visible: true, interval: 1 },
    	gridLinesInterval: { visible: true, interval: 1 },
    	valuesOnTicks: false,
    	padding: { bottom: 10 },
        }, 
        valueAxis: {
    	title: { text: '(%)<br><br>' },
    	labels: { horizontalAlignment: 'right' }
        },
        seriesGroups : series
    });
    					
    $("#jqxChart").jqxChart('refresh');
    

    this is my jqxChart code.
    now I’m creating ‘chartSource’ in my function,
    and result is :

    question

    is any wrong in my custom sources?

    Thanks, and regards.


    Dimitar
    Participant

    Hello vv9863,

    Could you, please, also post the definitions of chartSources and series and at least some sample data so that we can test your scenario?

    Best Regards,
    Dimitar

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


    vv9863
    Participant
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
            <link rel="stylesheet" href="./js/jqwidgets/styles/jqx.base.css" type="text/css" />
            <script src="//code.jquery.com/jquery.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxcore.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxdata.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxscrollbar.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxlistbox.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxdropdownlist.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxmenu.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxgrid.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxgrid.filter.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxgrid.sort.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxgrid.selection.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxgrid.pager.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxpanel.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/globalization/globalize.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxcalendar.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxdatetimeinput.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxcheckbox.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxinput.js"></script>
    		<script type="text/javascript" src="./js/jqwidgets/jqxbuttons.js"></script>
    		<script type="text/javascript" src="./js/jqwidgets/jqxwindow.js"></script>
            <script type="text/javascript" src="./js/demos/jqxgrid/generatedata.js"></script>
    		<script type="text/javascript" src="./js/jqwidgets/jqxgrid.export.js"></script>
    		<script type="text/javascript" src="./js/jqwidgets/jqxdata.export.js"></script>
    		<script type="text/javascript" src="./js/jqwidgets/jqxchart.js"></script>
    		<script type="text/javascript" src="./js/jqwidgets/jqxdata.js"></script>
    		<script type="text/javascript">
    
    		
    
    		var dateList = new Array();
    		var data = new Array();
    		var chartSources = new Array();
    		var series = new Array();
    
    		function doSomething(){
    
    			// dateList
    			dateList = new Array();
    			dateList[0] = "20150424";
    			dateList[1] = "20150425";
    			dateList[2] = "20150426";
    			dateList[3] = "20150427";
    			dateList[4] = "20150428";
    			dateList[5] = "20150429";
    			dateList[6] = "20150430";
    			dateList[7] = "20150501";
    
    			//data
    			data = new Array();
    			data[0] = {};
    			data[0]._20150424 = 0;
    			data[0]._20150425 = 175;
    			data[0]._20150426 = 0;
    			data[0]._20150427 = 0;
    			data[0]._20150428 = 0;
    			data[0]._20150429 = 0;
    			data[0]._20150430 = 0;
    			data[0]._20150501 = 0;
    			data[0].ROUTE_NM = "501";
    
    			data[1] = {};
    			data[1]._20150424 = 300;
    			data[1]._20150425 = 0;
    			data[1]._20150426 = 0;
    			data[1]._20150427 = 0;
    			data[1]._20150428 = 0;
    			data[1]._20150429 = 0;
    			data[1]._20150430 = 0;
    			data[1]._20150501 = 0;
    			data[1].ROUTE_NM = "8774";
    
    			chartSources = new Array();
    			chartSources = fn_createChartSources(chartSources, data, "ROUTE_NM");
    
    			console.log(chartSources);
    
    			series = new Array();
    			series = fn_createChartSeries(series, data, "ROUTE_NM");
    
    			console.log(series);
    		}
    
    		// create Chart Source
    		function fn_createChartSources(chartSources, data, fieldName){
    			
    			for(var i=0;i<dateList.length;i++){
    				chartSources[i] = {};
    				chartSources[i].Day = dateList[i];
    
    				for(var j=0;j<data.length;j++){
    					var field = data[j][fieldName];
    					chartSources[i][field] = data[j]["_" + dateList[i]];
    				}
    
    			}
    			
    			return chartSources;
    		}
    
    		// create Chart Series
    		function fn_createChartSeries(series, data, fieldName){
    
    			series[0] = {};
    			series[0].series = new Array();
    			series[0].type = "line";
    
    			for(var i=0;i<data.length;i++){
    				series[0].series[i] = {};
    				series[0].series[i].dataField = data[i][fieldName];
    			}
    			
    			return series;
    		}
    
            $(document).ready(function () {
    			
    			doSomething();
    			
    			$("#jqxChart").jqxChart({
    					source : chartSources,
    					description : '전체 조회',
    					xAxis : {
    						dataField: 'Day',
    						displayText: '날짜',
    	                    unitInterval: 1,
    	                    tickMarks: { visible: true, interval: 1 },
    	                    gridLinesInterval: { visible: true, interval: 1 },
    	                    valuesOnTicks: false,
    	                    padding: { bottom: 10 }
    					}, 
    
    	                seriesGroups : series
    	                	
    				});
    
            });
        </script>
    </head>
    <body style="background: white;">
        <div>
            <div id='jqxChart' style="width: 1000px; height: 500px" />
        </div>
    </body>
    </html>
    

    sorry for late..

    • This reply was modified 8 years, 8 months ago by  vv9863.

    vv9863
    Participant
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
            <link rel="stylesheet" href="./js/jqwidgets/styles/jqx.base.css" type="text/css" />
            <script src="//code.jquery.com/jquery.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxcore.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxdata.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxscrollbar.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxlistbox.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxdropdownlist.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxmenu.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxgrid.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxgrid.filter.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxgrid.sort.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxgrid.selection.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxgrid.pager.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxpanel.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/globalization/globalize.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxcalendar.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxdatetimeinput.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxcheckbox.js"></script>
            <script type="text/javascript" src="./js/jqwidgets/jqxinput.js"></script>
    		<script type="text/javascript" src="./js/jqwidgets/jqxbuttons.js"></script>
    		<script type="text/javascript" src="./js/jqwidgets/jqxwindow.js"></script>
            <script type="text/javascript" src="./js/demos/jqxgrid/generatedata.js"></script>
    		<script type="text/javascript" src="./js/jqwidgets/jqxgrid.export.js"></script>
    		<script type="text/javascript" src="./js/jqwidgets/jqxdata.export.js"></script>
    		<script type="text/javascript" src="./js/jqwidgets/jqxchart.js"></script>
    		<script type="text/javascript" src="./js/jqwidgets/jqxdata.js"></script>
    		<script type="text/javascript">
    
    		
    
    		var dateList = new Array();
    		var data = new Array();
    		var chartSources = new Array();
    		var series = new Array();
    
    		function doSomething(){
    
    			// dateList
    			dateList = new Array();
    			dateList[0] = "20150424";
    			dateList[1] = "20150425";
    			dateList[2] = "20150426";
    			dateList[3] = "20150427";
    			dateList[4] = "20150428";
    			dateList[5] = "20150429";
    			dateList[6] = "20150430";
    			dateList[7] = "20150501";
    
    			//data
    			data = new Array();
    			data[0] = {};
    			data[0]._20150424 = 0;
    			data[0]._20150425 = 175;
    			data[0]._20150426 = 0;
    			data[0]._20150427 = 0;
    			data[0]._20150428 = 0;
    			data[0]._20150429 = 0;
    			data[0]._20150430 = 0;
    			data[0]._20150501 = 0;
    			data[0].ROUTE_NM = "501";
    
    			data[1] = {};
    			data[1]._20150424 = 300;
    			data[1]._20150425 = 0;
    			data[1]._20150426 = 0;
    			data[1]._20150427 = 0;
    			data[1]._20150428 = 0;
    			data[1]._20150429 = 0;
    			data[1]._20150430 = 0;
    			data[1]._20150501 = 0;
    			data[1].ROUTE_NM = "8774";
    
    			chartSources = new Array();
    			chartSources = fn_createChartSources(chartSources, data, "ROUTE_NM");
    
    			console.log(chartSources);
    
    			series = new Array();
    			series = fn_createChartSeries(series, data, "ROUTE_NM");
    
    			console.log(series);
    		}
    
    		// create Chart Source
    		function fn_createChartSources(chartSources, data, fieldName){
    			
    			for(var i=0;i<dateList.length;i++){
    				chartSources[i] = {};
    				chartSources[i].Day = dateList[i];
    
    				for(var j=0;j<data.length;j++){
    					var field = data[j][fieldName];
    					chartSources[i][field] = data[j]["_" + dateList[i]];
    				}
    
    			}
    			
    			return chartSources;
    		}
    
    		// create Chart Series
    		function fn_createChartSeries(series, data, fieldName){
    
    			series[0] = {};
    			series[0].series = new Array();
    			series[0].type = "line";
    
    			for(var i=0;i<data.length;i++){
    				series[0].series[i] = {};
    				series[0].series[i].dataField = data[i][fieldName];
    			}
    			
    			return series;
    		}
    
            $(document).ready(function () {
    			
    			doSomething();
    			
    			$("#jqxChart").jqxChart({
    					source : chartSources,
    					xAxis : {
    						dataField: 'Day',
    	                    unitInterval: 1,
    	                    tickMarks: { visible: true, interval: 1 },
    	                    gridLinesInterval: { visible: true, interval: 1 },
    	                    valuesOnTicks: false,
    	                    padding: { bottom: 10 }
    					}, 
    
    	                seriesGroups : series
    	                	
    				});
    
            });
        </script>
    </head>
    <body style="background: white;">
        <div>
            <div id='jqxChart' style="width: 1000px; height: 500px" />
        </div>
    </body>
    </html>
    

    Dimitar
    Participant

    Hi vv9863,

    It seems to me the chart is plotted correctly – there are only two data points in your source different than 0data[0]._20150425 = 175; and data[1]._20150424 = 300; and they are reflected in your chart (as shown by the image you posted). If you have meant another issue, please clarify.

    Best Regards,
    Dimitar

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


    vv9863
    Participant

    umm, sorry for short english.

    my issue is not about data.

    when I refresh chart like this condition :
    2015-04-29 ~ 2015-05-01
    2015-03-28 ~ 2015-04-03
    2015-05-30 ~ 2015-06-05

    xAxis are too much.
    ex ) 2015-04-29, 2015-04-30, 2015-04-31, 2015-04-32, 2015-04-33 … 2015-04-51… 2015-04-77 … 2015-04-99, 2015-05-01

    but, when I refresh chart like this condition :
    2015-04-20 ~ 2015-04-25
    2015-03-01 ~ 2015-03-20
    2015-05-11 ~ 2015-05-30

    this is any problem in xAxis.


    Dimitar
    Participant

    Hi vv9863,

    You can try fixing this by not setting the xAxis unitInterval.

    Best Regards,
    Dimitar

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


    vv9863
    Participant

    umm, I solved problem change xAxis type : date -> basic.

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

You must be logged in to reply to this topic.