i try the method you suggested to me, but nothing to display...guide me if
i'm wrong
function drawChart() {
var jsonData =$.ajax({
url: "lecturer.php",
dataType:"json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex');
columnsTable.addColumn('string', 'colLabel');
var initState= {selectedValues: []};
// put the columns into this data table (skip column 0)
for (var i = 3; i < data.getNumberOfColumns(); i++) {
columnsTable.addRow([i, data.getColumnLabel(i)]);
initState.selectedValues.push(data.getColumnLabel(i));
}
var chart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_div',
options: {
title: 'Lecturer Skill Over Semester',
width: 650,
height: 300,
animation: {
duration: 1000,
easing: 'out'
},
tooltip: {
isHtml: true
}
},
view: {
columns: [0, 3,{
// create a custom tooltip column
type: 'string',
role: 'tooltip',
properties: {
html: true
},
calc: function (dt, row) {
var tooltip='';
tooltip += '<ul>';
tooltip += '<li>Semester: ' + dt.getValue(row, 0) +
'</li>';
tooltip += '<li>Subject: ' + dt.getValue(row, 1) + '</li>';
tooltip += '<li>Category: ' + dt.getValue(row, 2) + '</li>';
tooltip += '<li>Personality ' + dt.getValue(row, 3) + '</li>';
tooltip += '</ul>';
return tooltip;
}
}, 4,{
// create a custom tooltip column
type: 'string',
role: 'tooltip',
properties: {
html: true
},
calc: function (dt, row) {
var tooltip='';
tooltip += '<ul>';
tooltip += '<li>Semester: ' + dt.getValue(row, 0) +
'</li>';
tooltip += '<li>Subject: ' + dt.getValue(row, 1) + '</li>';
tooltip += '<li>Category: ' + dt.getValue(row, 2) + '</li>';
tooltip += '<li>Communication ' + dt.getValue(row, 4) + '</li>';
tooltip += '</ul>';
return tooltip;
}
}, 5,{
// create a custom tooltip column
type: 'string',
role: 'tooltip',
properties: {
html: true
},
calc: function (dt, row) {
var tooltip='';
tooltip += '<ul>';
tooltip += '<li>Semester: ' + dt.getValue(row, 0) +
'</li>';
tooltip += '<li>Subject: ' + dt.getValue(row, 1) + '</li>';
tooltip += '<li>Category: ' + dt.getValue(row, 2) + '</li>';
tooltip += '<li>Teaching ' + dt.getValue(row, 5) + '</li>';
tooltip += '</ul>';
return tooltip;
}
}, 6,{
// create a custom tooltip column
type: 'string',
role: 'tooltip',
properties: {
html: true
},
calc: function (dt, row) {
var tooltip='';
tooltip += '<ul>';
tooltip += '<li>Semester: ' + dt.getValue(row, 0) +
'</li>';
tooltip += '<li>Subject: ' + dt.getValue(row, 1) + '</li>';
tooltip += '<li>Category: ' + dt.getValue(row, 2) + '</li>';
tooltip += '<li>Techinical ' + dt.getValue(row, 6) + '</li>';
tooltip += '</ul>';
return tooltip;
}
}]
}
});
var SubjectFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'SubjectFilter_div',
options: {
filterColumnLabel: 'Subject',
ui: {
label: 'Subject',
allowTyping: false,
allowMultiple: false,
selectedValuesLayout: 'belowStacked',
caption : 'Choose Subject'
}
}
});
var SemesterFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'SemesterFilter_div',
options: {
filterColumnLabel: 'Semester',
ui: {
label: 'Semester',
allowTyping: false,
allowMultiple: false,
selectedValuesLayout: 'belowStacked',
caption : 'Choose Semester'
}
}
});
var CategoryFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'CategoryFilter_div',
options: {
filterColumnLabel: 'Category',
ui: {
label: 'Category',
allowTyping: false,
allowMultiple: false,
selectedValuesLayout: 'belowStacked',
caption : 'Choose Category'
}
}
});
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'chart2',
options: {
width: '1330px',
height: 350,
allowHtml: true
}
});
var dashboard = new
google.visualization.Dashboard(document.getElementById('dash_div'));
dashboard.bind([SemesterFilter], [SubjectFilter]);
dashboard.bind([SubjectFilter], [CategoryFilter]);
dashboard.bind([CategoryFilter], [chart,table]);
var formatter = new google.visualization.ColorFormat();
formatter.addRange(0, 60, 'white', 'red');
formatter.addRange(80, null, 'black', '#33ff33');
formatter.format(data, 3);
formatter.format(data, 4);
formatter.format(data, 5);
formatter.format(data, 6);
dashboard.draw(data, {allowHtml: true, showRowNumber: true});
}
var count =0;
//document.write(count);
for (var i = 0; i < data.getNumberOfRows(); i++) {
if (data.getValue(i, 7) > 80) {
count ++;
}
}
document.write(count);
</script>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
