weired Chart's xAxis with custom source - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Angular chart, chart, data, jquery chart, jqxChart, source, xAxis

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

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

Author

weired Chart's xAxis with custom source Posts

June 3, 2015 at 12:12 am weired Chart's xAxis with custom source #71934

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.

June 3, 2015 at 5:18 am weired Chart's xAxis with custom source #71941

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/

June 7, 2015 at 7:10 am weired Chart's xAxis with custom source #72117

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..

June 7, 2015 at 7:30 am weired Chart's xAxis with custom source #72119

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>

June 8, 2015 at 5:33 am weired Chart's xAxis with custom source #72124

Dimitar

Participant

Hi vv9863,

It seems to me the chart is plotted correctly – there are only two data points in your source different than 0 – data[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/

June 8, 2015 at 6:03 am weired Chart's xAxis with custom source #72128

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.

June 8, 2015 at 6:50 am weired Chart's xAxis with custom source #72137

Dimitar

Participant

Hi vv9863,

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

Best Regards,
Dimitar

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

June 8, 2015 at 8:31 am weired Chart's xAxis with custom source #72142

vv9863

Participant

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

Author

Posts

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

You must be logged in to reply to this topic.