현재 버전

chart ajaxJsonView

구글차트예제


차트 공부중입니다!!

    public ModelAndView googleChart() { 	
    	List<ChartDTO> chartDto = boardService.chartList();
    	Map<String, Object> map = new HashMap<String, Object>();
    	map.put("chartDto", chartDto);		
	return new ModelAndView(ajaxJsonView, map);
    }

위의 방법으로 MappingJacksonJsonView를 사용하여 json 형식으로 보내는게 데이터 뽑기가 편하더라구요

근데 구글차트는 배열로만 가능한것 같으니

JSON을 배열로 변환하던지,

(JSON.parse() 함수를 써보려고 했으나 ajaxJsonView로 넘어오는건 쌍따옴표가 없기때문에

일일히 붙여주기도 깔끔하지 않은것 같아서..)

컨트롤러에서 배열로 주던지 해야 할것 같은데

ajax로 하는거라 어떤게 깔끔한지 조언 부탁드립니다.


function Chart() {
	
	$.ajax({
		type: "POST",
		url: "googleChart",
		success:function(msg) {
			test(msg.chartDto);
		},error:function(msg) {
			alert(msg.chartDto);
		}
	});
	
}


function test(datas) {
	// 차트 데이터
	var data = new google.visualization.arrayToDataTable([
		['phone', 'price', 'design', 'battery', 'specs', 'waterproof', 'camera', 'lifeSpan'],
		[],    // 요기에 값이 'iphone', 4, 2, 3, 5 ... String, int, int, ..들어와야함
		[]      // 요기에 값이 'galaxy', 2, 5, 3, 4 ... String, int, int, ...들어와야함
	]);
	
	var chart = new google.visualization.ColumnChart(document.getElementById('google_chart'));
	chart.draw(data, chart_options);
};


현재는 datas를 log찍어보면 값이

{modifyDate: null, statusKind: null, createDate: null, createUserId: null, camera: 10, …} 요런식으로 들어오는데

구글차트는 배열로 들어가야 하네용;


수정 이력

2018-02-26 17:48:43 에 아래 내용에서 변경 됨 #6

차트 공부중입니다!!

    public ModelAndView googleChart() { 	
    	List<ChartDTO> chartDto = boardService.chartList();
    	Map<String, Object> map = new HashMap<String, Object>();
    	map.put("chartDto", chartDto);		
	return new ModelAndView(ajaxJsonView, map);
    }

위의 방법으로 json 형식으로 보내는게 데이터 뽑기가 편하더라구요

근데 구글차트는 배열로만 가능한것 같으니

JSON을 배열로 변환하던지,

(JSON.parse() 함수를 써보려고 했으나 ajaxJsonView로 넘어오는건 쌍따옴표가 없기때문에

일일히 붙여주기도 깔끔하지 않은것 같아서..)

컨트롤러에서 배열로 주던지 해야 할것 같은데

ajax로 하는거라 어떤게 깔끔한지 조언 부탁드립니다.


function Chart() {
	
	$.ajax({
		type: "POST",
		url: "googleChart",
		success:function(msg) {
			test(msg.chartDto);
		},error:function(msg) {
			alert(msg.chartDto);
		}
	});
	
}


function test(datas) {
	// 차트 데이터
	var data = new google.visualization.arrayToDataTable([
		['phone', 'price', 'design', 'battery', 'specs', 'waterproof', 'camera', 'lifeSpan'],
		[],    // 요기에 값이 'iphone', 4, 2, 3, 5 ... String, int, int, ..들어와야함
		[]      // 요기에 값이 'galaxy', 2, 5, 3, 4 ... String, int, int, ...들어와야함
	]);
	
	var chart = new google.visualization.ColumnChart(document.getElementById('google_chart'));
	chart.draw(data, chart_options);
};


현재는 datas를 log찍어보면 값이

{modifyDate: null, statusKind: null, createDate: null, createUserId: null, camera: 10, …} 요런식으로 들어오는데

구글차트는 배열로 들어가야 하네용;

2018-02-26 17:47:33 에 아래 내용에서 변경 됨 #5

차트 공부중입니다!!

    public ModelAndView googleChart() { 	
    	List<ChartDTO> chartDto = boardService.chartList();
    	Map<String, Object> map = new HashMap<String, Object>();
    	map.put("chartDto", chartDto);		
	return new ModelAndView(ajaxJsonView, map);
    }

위의 방법으로 json 형식으로 보내는게 데이터 뽑기가 편하더라구요

근데 구글차트는 배열로만 가능한것 같으니

JSON을 배열로 변환하던지,

(JSON.parse() 함수를 써보려고 했으나 ajaxJsonView로 넘어오는건 쌍따옴표가 없기때문에

일일히 붙여주기도 깔끔하지 않은것 같아서..)

컨트롤러에서 배열로 주던지 해야 할것 같은데

ajax로 하는거라 어떤게 깔끔한지 조언 부탁드립니다.


function Chart() {
	
	$.ajax({
		type: "POST",
		url: "googleChart",
		success:function(msg) {
			test(msg.chartDto);
		},error:function(msg) {
			alert(msg.chartDto);
		}
	});
	
}


function test(datas) {
	// 차트 데이터
	var data = new google.visualization.arrayToDataTable([
		['phone', 'price', 'design', 'battery', 'specs', 'waterproof', 'camera', 'lifeSpan'],
		[],    // 요기에 값이 들어와야함
		[]      // 요기에 값이 들어와야함
	]);
	
	var chart = new google.visualization.ColumnChart(document.getElementById('google_chart'));
	chart.draw(data, chart_options);
};


현재는 datas를 log찍어보면 값이

{modifyDate: null, statusKind: null, createDate: null, createUserId: null, camera: 10, …} 요런식으로 들어오는데

구글차트는 배열로 들어가야 하네용;

2018-02-19 16:12:32 에 아래 내용에서 변경 됨 #4

차트 공부중입니다!!

    public ModelAndView googleChart() { 	
    	List<ChartDTO> chartDto = boardService.chartList();
    	Map<String, Object> map = new HashMap<String, Object>();
    	map.put("chartDto", chartDto);		
	return new ModelAndView(ajaxJsonView, map);
    }

위의 방법으로 json 형식으로 보내는게 데이터 뽑기가 편하더라구요

근데 구글차트는 이중배열로만 가능한것 같으니

JSON을 배열로 변환하던지,

(JSON.parse() 함수를 써보려고 했으나 ajaxJsonView로 넘어오는건 쌍따옴표가 없기때문에

일일히 붙여주기도 깔끔하지 않은것 같아서..)

컨트롤러에서 배열로 주던지 해야 할것 같은데

ajax로 하는거라 어떤게 깔끔한지 조언 부탁드립니다.


function Chart() {
	
	$.ajax({
		type: "POST",
		url: "googleChart",
		success:function(msg) {
			test(msg.chartDto);
		},error:function(msg) {
			alert(msg.chartDto);
		}
	});
	
}


function test(datas) {
	// 차트 데이터
	var data = new google.visualization.arrayToDataTable([
		['phone', 'price', 'design', 'battery', 'specs', 'waterproof', 'camera', 'lifeSpan'],
		[],    // 요기에 값이 들어와야함
		[]      // 요기에 값이 들어와야함
	]);
	
	var chart = new google.visualization.ColumnChart(document.getElementById('google_chart'));
	chart.draw(data, chart_options);
};


현재는 datas를 log찍어보면 값이

{modifyDate: null, statusKind: null, createDate: null, createUserId: null, camera: 10, …} 요런식으로 들어오는데

구글차트는 배열로 들어가야 하네용;

2018-02-19 16:12:08 에 아래 내용에서 변경 됨 #3

차트 공부중입니다!!

    public ModelAndView googleChart() { 	
    	List<ChartDTO> chartDto = boardService.chartList();
    	Map<String, Object> map = new HashMap<String, Object>();
    	map.put("chartDto", chartDto);		
	return new ModelAndView(ajaxJsonView, map);
    }

위의 방법으로 json 형식으로 보내는게 데이터 뽑기가 편하더라구요

근데 구글차트는 이중배열로만 가능한것 같으니

JSON을 배열로 변환하던지,

(JSON.parse() 함수를 써보려고 했으나 ajaxJsonView로 넘어오는건 쌍따옴표가 없기때문에

일일히 붙여주기도 깔끔하지 않은것 같아서..)

컨트롤러에서 배열로 주던지 해야 할것 같은데

ajax로 하는거라 어떤게 깔끔한지 조언 부탁드립니다.


function Chart() {
	
	$.ajax({
		type: "POST",
		url: "googleChart",
		success:function(msg) {
			test(msg.chartDto);
		},error:function(msg) {
			alert(msg.chartDto);
		}
	});
	
}


function test(datas) {
	// 차트 데이터
	var data = new google.visualization.arrayToDataTable([
		['phone', 'price', 'design', 'battery', 'specs', 'waterproof', 'camera', 'lifeSpan'],
		[],    // 요기에 값이 들어와야함
		[]      // 요기에 값이 들어와야함
	]);
	
	var chart = new google.visualization.ColumnChart(document.getElementById('google_chart'));
	chart.draw(data, chart_options);
};


2018-02-19 16:10:05 에 아래 내용에서 변경 됨 #2

차트 공부중입니다!!

    public ModelAndView googleChart() { 	
    	List<ChartDTO> chartDto = boardService.chartList();
    	Map<String, Object> map = new HashMap<String, Object>();
    	map.put("chartDto", chartDto);		
	return new ModelAndView(ajaxJsonView, map);
    }

위의 방법으로 json 형식으로 보내는게 데이터 뽑기가 편하더라구요

근데 구글차트는 이중배열로만 가능한것 같으니

JSON을 배열로 변환하던지,

(JSON.parse() 함수를 써보려고 했으나 ajaxJsonView로 넘어오는건 쌍따옴표가 없기때문에

일일히 붙여주기도 깔끔하지 않은것 같아서..)

컨트롤러에서 배열로 주던지 해야 할것 같은데

ajax로 하는거라 어떤게 깔끔한지 조언 부탁드립니다.


function Chart() {
	
	$.ajax({
		type: "POST",
		url: "googleChart",
		success:function(msg) {
			test(msg.chartDto);
		},error:function(msg) {
			alert(msg.chartDto);
		}
	});
	
}


function test(datas) {
	// 차트 데이터
	var data = new google.visualization.arrayToDataTable([
		['phone', 'price', 'design', 'battery', 'specs', 'waterproof', 'camera', 'lifeSpan'],
		[],    // 요기에 값이 들어와야함
		[]      // 요기에 값이 들어와야함
	]);
	
	var chart = new google.visualization.ColumnChart(document.getElementById('google_chart'));
	chart.draw(data, chart_options);
};


2018-02-19 16:09:24 에 아래 내용에서 변경 됨 #1

차트 공부중입니다!!

    public ModelAndView googleChart() { 	
    	List<ChartDTO> chartDto = boardService.chartList();
    	Map<String, Object> map = new HashMap<String, Object>();
    	map.put("chartDto", chartDto);		
	return new ModelAndView(ajaxJsonView, map);
    }

위의 방법으로 json 형식으로 보내는게 데이터 뽑기가 편하더라구요

근데 구글차트는 이중배열로만 가능한것 같으니

JSON을 배열로 변환하던지,

(JSON.parse() 함수를 써보려고 했으나 ajaxJsonView로 넘어오는건 쌍따옴표가 없기때문에

일일히 붙여주기도 깔끔하지 않은것 같아서..)

컨트롤러에서 배열로 주던지 해야 할것 같은데

ajax로 하는거라 어떤게 깔끔한지 조언 부탁드립니다.


function Chart() {
	
	$.ajax({
		type: "POST",
		url: "googleChart",
		success:function(msg) {
			test(msg.chartDto);
		},error:function(msg) {
			alert(msg.chartDto);
		}
	});
	
}


function test(data) {
	// 차트 데이터
	var data = new google.visualization.arrayToDataTable([
		['phone', 'price', 'design', 'battery', 'specs', 'waterproof', 'camera', 'lifeSpan'],
//		[],
//		[]
	]);
	
	var chart = new google.visualization.ColumnChart(document.getElementById('google_chart'));
	chart.draw(data, chart_options);
};