jQWidgets Forums

Forum Replies Created

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

Author

Posts

August 21, 2015 at 4:28 am in reply to: Chart does not show when use rangeSelector Chart does not show when use rangeSelector #75027

vv9863

Participant

Thanks for answer.

But When use linear instead of basic, another problem occurred.

chart


var list = new Array();
list[0] = {
	ROUTE_ID : 100100100,
	ROUTE_NM  : "100",
	ROUTE_VER : 1,
	STDR_DE : 20150801,
	VAL : 93.5
};
list[1] = {
	ROUTE_ID : 100100206,
	ROUTE_NM  : "2235",
	ROUTE_VER : 1,
	STDR_DE : 20150801,
	VAL : 88.9
};
list[2] = {
	ROUTE_ID : 100100207,
	ROUTE_NM  : "2236",
	ROUTE_VER : 1,
	STDR_DE : 20150801,
	VAL : 91.2
};

this is my data, and settings are not changed except type (basic->linear).

August 20, 2015 at 7:04 am in reply to: Chart does not show when use rangeSelector Chart does not show when use rangeSelector #74973

vv9863

Participant


var list = new Array();
list[0] = {
	ROUTE_ID : 100100205,
	ROUTE_NM  : "2234",
	ROUTE_VER : 1,
	STDR_DE : 20150801,
	VAL : 93.5
};
list[1] = {
	ROUTE_ID : 100100206,
	ROUTE_NM  : "2235",
	ROUTE_VER : 1,
	STDR_DE : 20150801,
	VAL : 88.9
};
list[2] = {
	ROUTE_ID : 100100207,
	ROUTE_NM  : "2236",
	ROUTE_VER : 1,
	STDR_DE : 20150801,
	VAL : 91.2
};

August 20, 2015 at 4:23 am in reply to: Chart does not show when use rangeSelector Chart does not show when use rangeSelector #74971

vv9863

Participant

chart data example :


				var list = new Array();
				list[0] = {
						ROUTE_ID : 100100205,
						ROUTE_NM  : "2234",
						ROUTE_VER : 1,
						STDR_DE : 20150801,
						VAL : 93.5
				}

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

vv9863

Participant

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

June 8, 2015 at 6:03 am in reply to: weired Chart's xAxis with custom source 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 7, 2015 at 7:30 am in reply to: weired Chart's xAxis with custom source 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 7, 2015 at 7:10 am in reply to: weired Chart's xAxis with custom source 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..

Author

Posts

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