gian/phpmyadmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve creating charts with query results

Browse Source
This commit is contained in:
Madhura Jayaratne 2012-04-28 07:24:50 +05:30
parent 9fe22f9e58
commit 3c9378b8e7
2 changed files with 73 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
js/tbl_chart.js
View File

@ -93,6 +93,15 @@ $(function() {
$('select[name="chartSeries"]').change(function() {
chart_series = this.value;
chart_series_index = this.selectedIndex;
if (chart_series_index != 0) {
$('span.span_pie').show();
} else if ($(this).children('option').size() > 2) {
$('span.span_pie').hide();
if (currentSettings.chart.type == 'pie') {
$('input#radio_line').prop('checked', true);
currentSettings.chart.type = 'line';
}
}
drawChart();
});
@ -137,6 +146,21 @@ function in_array(element, array)
return false;
}
function isColumnNumeric(columnName)
{
var first = true;
var isNumeric = false;
$('select[name="chartSeries"] option').each(function() {
if (first) {
first = false;
} else if ($(this).val() == columnName) {
isNumeric = true;
return false;
}
});
return isNumeric;
}
function PMA_queryChart(data, passedSettings)
{
if ($('#querychart').length == 0) {
@ -162,54 +186,55 @@ function PMA_queryChart(data, passedSettings)
if (chart_series == 'columns') {
var j = 0;
for (var i = 0, l = columnNames.length; i<l; i++)
for (var i = 0, l = columnNames.length; i<l; i++) {
if (! isColumnNumeric(columnNames[i])) {
continue;
}
if (i != chart_xaxis_idx) {
series[j] = new Object();
series[j].data = new Array();
series[j].name = columnNames[i];
$.each(data, function(key, value) {
series[j].data.push(parseFloat(value[columnNames[i]]));
if ( j == 0 && chart_xaxis_idx != -1 && ! xaxis.categories[value[columnNames[chart_xaxis_idx]]])
var floatVal;
if (value[columnNames[i]] != null) {
floatVal = parseFloat(value[columnNames[i]]);
} else {
floatVal = null;
}
series[j].data.push({
name: value[columnNames[chart_xaxis_idx]],
y: floatVal
});
if (j == 0 && ! xaxis.categories[value[columnNames[chart_xaxis_idx]]]) {
xaxis.categories.push(value[columnNames[chart_xaxis_idx]]);
}
});
j++;
}
}
} else {
var j = 0;
var seriesIndex = new Object();
// Get series types and build series object from the query data
$.each(data, function(index, element) {
var contains = false;
for (var i = 0, l = series.length; i < l; i++) {
if (series[i].name == element[chart_series]) {
contains = true;
}
}
series[0] = new Object();
series[0].data = new Array();
series[0].name = chart_series;
if (! contains) {
seriesIndex[element[chart_series]] = j;
series[j] = new Object();
series[j].data = new Array();
series[j].name = element[chart_series]; // columnNames[i];
j++;
}
});
var type;
// Get series points from query data
$.each(data, function(key, value) {
type = value[chart_series];
series[seriesIndex[type]].data.push(parseFloat(value[columnNames[0]]));
if ( ! in_array(value[columnNames[chart_xaxis_idx]], xaxis.categories)) {
var floatVal;
if (value[chart_series] != null) {
floatVal = parseFloat(value[chart_series]);
} else {
floatVal = null;
}
series[0].data.push({
name: value[columnNames[chart_xaxis_idx]],
y: floatVal
});
if (! xaxis.categories[value[columnNames[chart_xaxis_idx]]]) {
xaxis.categories.push(value[columnNames[chart_xaxis_idx]]);
}
});
}
if (columnNames.length == 2) {
yaxis.title = { text: columnNames[0] };
}
@ -218,12 +243,19 @@ function PMA_queryChart(data, passedSettings)
case 'pie':
series[0] = new Object();
series[0].data = new Array();
series[0].name = chart_series;
$.each(data, function(key, value) {
series[0].data.push({
name: value[columnNames[chart_xaxis_idx]],
y: parseFloat(value[columnNames[0]])
});
var floatVal;
if (value[chart_series] != null) {
floatVal = parseFloat(value[chart_series]);
} else {
floatVal = null;
}
series[0].data.push({
name: value[columnNames[chart_xaxis_idx]],
y: floatVal
});
});
break;
}
@ -264,12 +296,6 @@ function PMA_queryChart(data, passedSettings)
}
};
if (passedSettings.chart.type == 'pie') {
settings.tooltip.formatter = function() {
return '<b>' + columnNames[0] + '</b><br/>' + this.y;
};
}
// Overwrite/Merge default settings with passedsettings
$.extend(true, settings, passedSettings);

8
tbl_chart.php
View File

@ -48,6 +48,7 @@ if (strlen($GLOBALS['table'])) {
$data = array();
$result = PMA_DBI_try_query($sql_query);
$fields_meta = PMA_DBI_get_fields_meta($result);
while ($row = PMA_DBI_fetch_assoc($result)) {
$data[] = $row;
}
@ -85,8 +86,10 @@ url_query = '<?php echo $url_query;?>';
<label for ="radio_line"><?php echo _pgettext('Chart type', 'Line'); ?></label>
<input type="radio" name="chartType" value="spline" id="radio_spline" />
<label for ="radio_spline"><?php echo _pgettext('Chart type', 'Spline'); ?></label>
<span class="span_pie" style="display:none;">
<input type="radio" name="chartType" value="pie" id="radio_pie" />
<label for ="radio_pie"><?php echo _pgettext('Chart type', 'Pie'); ?></label>
</span>
<span class="barStacked" style="display:none;">
<input type="checkbox" name="barStacked" value="1" id="checkbox_barStacked" />
<label for ="checkbox_barStacked"><?php echo __('Stacked'); ?></label>
@ -117,8 +120,11 @@ url_query = '<?php echo $url_query;?>';
<select name="chartSeries" id="select_chartSeries">
<option value="columns"><?php echo __('The remaining columns'); ?></option>
<?php
$numeric_types = array('int', 'real', 'year', 'bit');
foreach ($keys as $idx => $key) {
echo '<option>' . htmlspecialchars($key) . '</option>';
if (in_array($fields_meta[$idx]->type, $numeric_types)) {
echo '<option>' . htmlspecialchars($key) . '</option>';
}
}
?>
</select>