1
위쪽 전면 ... 큰 도움을 청하기 위해 포럼에 오신 것을 환영합니다!group() 함수를 사용하여 Google 시각화 누적 세로 막 대형 차트
group() 함수를 사용하여 4 개의 누적 열
과 1 줄
이있는 차트를 작성하려고합니다.
는 원시 데이터 테이블 (목표를 무시하십시오) 다음과 같습니다 [! [] 여기에 이미지 설명을 입력 [1] [1]
그룹화 된 데이터 테이블 (목표를 무시하세요 같이해야하며, 총 목표) : [! [여기에 이미지 설명을 입력하십시오.] [2]] [2]
대시 보드가 렌더링되는 것을 볼 수 있지만 실제로는 마른 체형이어서 어떻게하는지 알 수 없습니다. 마우스 오버시 그룹화 된 합계가 예상대로 표시되기 때문에 적어도 그룹화 된 EZ 수치를 선택하는 것 같습니다.
목표는 이상하게도 행동합니다. 나는이 부분을 고치기 위해 하루 총계에 대해 일종의 계산을 할 필요가 있다고 생각한다. 누적 막대가 수정 된 후에이 문제를 해결하겠습니다.
(편집 : 나는 지금 이것을 어떻게 처리해야하는지 이미 알고 있습니다.)
하지만 너무 작기 때문에 실제로 무엇을하는지 말할 수는 없습니다!
편집 : 아래에서 WhiteHat의 답장이 아름답게 작동했습니다. 당신은 x 축에 3 날짜가있는 경우 마른 열에서 x 축 결과에
// Load the Visualization API and the corechart package.
google.charts.load('current', {
'packages': ['corechart', 'table', 'gauge', 'controls']
});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(gChart0);
function gChart0() {
drawDashboard_TEMPLATE4("2", "LineName");
};
function drawDashboard_TEMPLATE4(p1, v1) {
var divID_suffixFunction = '_TEMPLATE';
var divID_suffixParameter1 = '';
var urlParameter1 = '?prodID=';
var urlParameter1_Value = p1; //comes from index
var prodID_Name = v1; //comes from index
//Temporary until final data source. Then use above.
var urlParameter1 = '?ohg='
var urlParameter1_Value = '982A01';
//Temporary until final data source used as filter instead. Use above.
var prodFilter = Number(p1);
var urlString = '../WWIDetailRaws/filterWWIDetails' + urlParameter1 + urlParameter1_Value;
var urlString_temp = 'https://httpbin.org/get'; //HTTP Test server that accepts GET/Post calls
$.ajax({
type: 'GET',
dataType: 'json',
contentType: "application/json",
//url: urlString,
url: urlString_temp,
success: function(result) {
//Manually loaded "result" with JSON that normally comes from "urlString".
result = [{
"prodID": 2,
"calDay": new Date(2017, 10, 15),
"v1": 100,
"goal": 200,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "EZRS",
"p7": "3000",
"p8": "I",
"p9": "6002LG0024"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 15),
"v1": 110,
"goal": 210,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "EZRS",
"p7": "3000",
"p8": "I",
"p9": "6002LG0025"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 16),
"v1": 120,
"goal": 220,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "EZRS",
"p7": "3000",
"p8": "I",
"p9": "6002LG0024"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 16),
"v1": 130,
"goal": 230,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "EZRS",
"p7": "3000",
"p8": "I",
"p9": "6002LG0025"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 15),
"v1": 140,
"goal": 240,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "EZFE",
"p7": "7900",
"p8": "I",
"p9": "0258017423"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 15),
"v1": 150,
"goal": 250,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "EZFE",
"p7": "7900",
"p8": "I",
"p9": "0258017424"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 16),
"v1": 160,
"goal": 260,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "EZFE",
"p7": "7900",
"p8": "I",
"p9": "0258017423"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 16),
"v1": 170,
"goal": 270,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "EZFE",
"p7": "7900",
"p8": "I",
"p9": "0258017424"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 15),
"v1": 180,
"goal": 280,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "FE",
"p7": "7920",
"p8": "I",
"p9": "02580173502MG"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 15),
"v1": 190,
"goal": 290,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "FE",
"p7": "7920",
"p8": "I",
"p9": "02580173502MF"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 16),
"v1": 300,
"goal": 400,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "FE",
"p7": "7920",
"p8": "I",
"p9": "02580173502MG"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 16),
"v1": 310,
"goal": 410,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "FE",
"p7": "7920",
"p8": "I",
"p9": "02580173502MF"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 17),
"v1": 320,
"goal": 420,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "FE",
"p7": "7920",
"p8": "I",
"p9": "02580173502MG"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 17),
"v1": 330,
"goal": 430,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "FE",
"p7": "7920",
"p8": "I",
"p9": "02580173502MF"
}
];
//Create DataTable
var data = new google.visualization.DataTable();
//Add Columns
data.addColumn('number', 'prodID'); //0 prodID
data.addColumn('date', 'Calendar Day'); //1 calDay
data.addColumn('number', 'EZFE'); //2 case from v1
data.addColumn('number', 'EZRS'); //3 case from v1
data.addColumn('number', 'EZ'); //4 case from v1
data.addColumn('number', 'Other'); //5 case from v1
data.addColumn('number', 'Goal'); //6 goal
data.addColumn('string', 'Plant'); //7 p1
data.addColumn('string', 'GB'); //8 p2
data.addColumn('string', 'Overhead Group'); //9 p3
data.addColumn('string', 'Profit Center'); //10 p4
data.addColumn('string', 'MRP'); //11 p5
data.addColumn('string', 'MBR Stock Category'); //12 p6
data.addColumn('string', 'Valuation Class'); //13 p7
data.addColumn('string', 'Inventory Element'); //14 p8
data.addColumn('string', 'Material'); //15 p9
//Format date object into from JSON to ISO
var dateJSON = new Date(); //obj.clnDate
var y = dateJSON.getFullYear();
var m = dateJSON.getMonth();
var d = dateJSON.getDate();
var dateISO = new Date(y, m, d);
//Add Rows
var dataArray = [];
$.each(result, function(i, obj) {
var bar1 = 0; //EZRS
var bar2 = 0; //EZFE
var bar3 = 0; //FE
var bar4 = 0; //Other
switch (obj.p6) {
case 'EZRS':
bar1 = obj.v1;
break;
case 'EZFE':
bar2 = obj.v1;
break;
case 'FE':
bar3 = obj.v1;
break;
default:
bar4 = obj.v1;
}
dataArray.push([
obj.prodID,
//dateISO,
obj.calDay,
bar1, bar2, bar3, bar4, obj.goal,
obj.p1, obj.p2, obj.p3, obj.p4, obj.p5, obj.p6, obj.p7, obj.p8, obj.p9
]);
});
data.addRows(dataArray);
//Create Data View
var view = new google.visualization.DataView(data);
view.setRows(data.getFilteredRows([{
column: 0,
value: prodFilter
}]));
//view.setColumns([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
//Create Data Aggregation
var groupView = google.visualization.data.group(view, [{
column: 1,
type: 'date'
}, //0
{
column: 12,
type: 'string'
} //1 MBR
], [{
column: 2,
aggregation: google.visualization.data.sum,
type: 'number'
}, //2 EZRS
{
column: 3,
aggregation: google.visualization.data.sum,
type: 'number'
}, //3 EZFE
{
column: 4,
aggregation: google.visualization.data.sum,
type: 'number'
}, //4 FE
{
column: 5,
aggregation: google.visualization.data.sum,
type: 'number'
}, //5 OTHER
//{
//column: 6,
//aggregation: google.visualization.data.sum,
//type: 'number'
//} //6
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('div_dashboard' + divID_suffixFunction + divID_suffixParameter1));
var categoryPicker1 = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'div_dashboard_categoryPicker1' + divID_suffixFunction + divID_suffixParameter1,
'options': {
filterColumnIndex: 0,
ui: {
chartType: 'ComboChart',
chartView: {
columns: [0, 2, 3, 4, 5] //removed 6 goal
},
chartOptions: {
//seriesType: 'bars',
height: 50,
//width: 600,
chartArea: {
width: '80%'
},
series: {
//column 1 is first v1 - Start couting 0 here for series.
0: {
color: 'rgb(0, 86, 145)'
},
/* Dark Blue */
1: {
color: 'rgb(0, 142, 207)'
},
/* Light Blue */
2: {
color: 'rgb(127, 198, 231)'
},
/* Light Blue Pastell */
3: {
color: 'rgb(191,192,194)'
},
/* Light Gray */
4: {
color: 'rgb(226,0,21)'
},
/* Red */
},
}, //END chartOptions
} //END ui
} //END 'options'
}); //END categoryPicker1
var chart = new google.visualization.ChartWrapper({
'chartType': 'ComboChart',
'containerId': 'div_dashboard_chart' + divID_suffixFunction + divID_suffixParameter1,
'view': {
'columns': [0, 2, 3, 4, 5] //removed 6 goal
},
'options': {
width: '100%',
height: 'auto',
seriesType: 'bars',
isStacked: true,
series: {
//column 1 is first v1 - Start couting 0 here for series.
0: {
color: 'rgb(0, 86, 145)'
},
/* Dark Blue */
1: {
color: 'rgb(0, 142, 207)'
},
/* Light Blue */
2: {
color: 'rgb(127, 198, 231)'
},
/* Light Blue Pastell */
3: {
color: 'rgb(191,192,194)'
},
/* Light Gray */
4: {
color: 'rgb(226,0,21)',
type: 'line',
} /* Red */
},
}
});
//Object binding
dashboard.bind([categoryPicker1], [chart]);
//Draw dashboard
dashboard.draw(groupView);
} //END success: function (result) {
}); //END $.ajax({
} //END function drawChart()<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="div_dashboard_TEMPLATE" style="">
<div id="div_dashboard_table_TEMPLATE" style="width:100%;"></div>
<div id="div_dashboard_chart_TEMPLATE" style="width:100%;"></div>
<div id="div_dashboard_categoryPicker1_TEMPLATE" style="width:100%;"></div>
</div>
의미가 있습니다. 나는 그것이 그렇게 측정되었다는 것을 몰랐습니다. 나는 다음 주에 휴가에서 돌아올 때 그것을 점검 할 것이다. 감사합니다. 감사합니다. – cmill
다시 한번 감사드립니다! – cmill