fixed graph

This commit is contained in:
daniel 2018-04-24 13:19:24 +02:00
parent e7a8706434
commit 3fbd9adc38
7 changed files with 94 additions and 106 deletions

View File

@ -679,13 +679,14 @@ function grafico_modulo_sparse ($agent_module_id, $period, $show_events,
// ATTENTION: The min size is in constants.php // ATTENTION: The min size is in constants.php
// It's not the same minsize for all graphs, but we are choosed a prudent minsize for all // It's not the same minsize for all graphs, but we are choosed a prudent minsize for all
/*
if ($height <= CHART_DEFAULT_HEIGHT) { if ($height <= CHART_DEFAULT_HEIGHT) {
$height = CHART_DEFAULT_HEIGHT; $height = CHART_DEFAULT_HEIGHT;
} }
if ($width < CHART_DEFAULT_WIDTH) { if ($width < CHART_DEFAULT_WIDTH) {
$width = CHART_DEFAULT_WIDTH; $width = CHART_DEFAULT_WIDTH;
} }
*/
$format_graph = array(); $format_graph = array();
$format_graph['width'] = $width; $format_graph['width'] = $width;
$format_graph['height'] = $height; $format_graph['height'] = $height;
@ -2367,10 +2368,6 @@ function fullscale_data_combined($module_list, $period, $date, $flash_charts, $p
foreach ($data_uncompress as $key_data => $value_data) { foreach ($data_uncompress as $key_data => $value_data) {
foreach ($value_data['data'] as $k => $v) { foreach ($value_data['data'] as $k => $v) {
$real_date = $v['utimestamp']; $real_date = $v['utimestamp'];
<<<<<<< HEAD
=======
>>>>>>> origin/develop
if(!isset($v['datos'])){ if(!isset($v['datos'])){
$v['datos'] = $previous_data; $v['datos'] = $previous_data;
} }

View File

@ -251,20 +251,20 @@ function area_graph(
//XXXXX //XXXXX
//Corregir este problema //Corregir este problema
$graph = array(); $graph = array();
$graph['data'] = $chart_data; $graph['data'] = $chart_data;
$graph['width'] = $width; $graph['width'] = $width;
$graph['height'] = $height; $graph['height'] = $height;
$graph['color'] = $color; $graph['color'] = $color;
$graph['legend'] = $legend; $graph['legend'] = $legend;
$graph['xaxisname'] = $xaxisname; $graph['xaxisname'] = $xaxisname;
$graph['yaxisname'] = $yaxisname; $graph['yaxisname'] = $yaxisname;
$graph['water_mark'] = $water_mark_file; $graph['water_mark'] = $water_mark_file;
$graph['font'] = $font; $graph['font'] = $font;
$graph['font_size'] = $font_size; $graph['font_size'] = $font_size;
$graph['backgroundColor'] = $backgroundColor; $graph['backgroundColor'] = $backgroundColor;
$graph['unit'] = $unit; $graph['unit'] = $unit;
$graph['series_type'] = $series_type; $graph['series_type'] = $series_type;
$graph['percentil'] = $percentil_values; $graph['percentil'] = $percentil_values;
$id_graph = serialize_in_temp($graph, null, $ttl); $id_graph = serialize_in_temp($graph, null, $ttl);
// Warning: This string is used in the function "api_get_module_graph" from 'functions_api.php' with the regec patern "/<img src='(.+)'>/" // Warning: This string is used in the function "api_get_module_graph" from 'functions_api.php' with the regec patern "/<img src='(.+)'>/"

View File

@ -959,12 +959,6 @@ function adjust_left_width_canvas(adapter_id, adapted_id) {
$('#'+adapted_id).css('margin-left', adapter_left_margin); $('#'+adapted_id).css('margin-left', adapter_left_margin);
} }
function update_left_width_canvas(graph_id) {
$('#overview_'+graph_id).width($('#'+graph_id).width());
$('#overview_'+graph_id).css('margin-left', $('#'+graph_id+' .yAxis .tickLabel').width());
}
function check_adaptions(graph_id) { function check_adaptions(graph_id) {
var classes = $('#'+graph_id).attr('class').split(' '); var classes = $('#'+graph_id).attr('class').split(' ');
@ -1132,6 +1126,7 @@ function pandoraFlotArea(
background_color, legend_color, short_data, background_color, legend_color, short_data,
events_array events_array
) { ) {
console.log(format_graph.font_size);
//diferents vars //diferents vars
var unit = format_graph.unit ? format_graph.unit : ''; var unit = format_graph.unit ? format_graph.unit : '';
var homeurl = format_graph.homeurl; var homeurl = format_graph.homeurl;
@ -1156,8 +1151,6 @@ function pandoraFlotArea(
//XXXX ver que hay que hacer //XXXX ver que hay que hacer
var type = 'area_simple'; var type = 'area_simple';
//var xaxisname = 'xaxisname';
var labels_long = ''; var labels_long = '';
var min_check = 0; var min_check = 0;
var water_mark = ''; var water_mark = '';
@ -1784,7 +1777,7 @@ function pandoraFlotArea(
// The first execution, the graph data is the base data // The first execution, the graph data is the base data
datas = data_base; datas = data_base;
font_size = 8;
// minTickSize // minTickSize
var count_data = datas[0].data.length; var count_data = datas[0].data.length;
var min_tick_pixels = 80; var min_tick_pixels = 80;
@ -1799,7 +1792,7 @@ function pandoraFlotArea(
mode: 'xy' mode: 'xy'
}, },
selection: { selection: {
mode: 'x', mode: 'xy',
color: '#777' color: '#777'
}, },
export: { export: {
@ -1885,38 +1878,48 @@ function pandoraFlotArea(
var overview = $.plot($('#overview_'+graph_id),datas, { var overview = $.plot($('#overview_'+graph_id),datas, {
series: { series: {
stack: stacked, stack: stacked,
lines: { shadowSize: 0.1
show: true, },
lineWidth: 1 crosshair: {
}, mode: 'xy'
shadowSize: 0 },
selection: {
mode: 'xy',
color: '#777'
},
export: {
export_data: true,
labels_long: labels_long,
homeurl: homeurl
}, },
grid: { grid: {
borderWidth: 1,
borderColor: '#C1C1C1',
hoverable: true, hoverable: true,
autoHighlight: false clickable: true,
borderWidth:1,
borderColor: '#C1C1C1',
tickColor: background_color,
color: legend_color
}, },
xaxes: [ { xaxes: [{
axisLabelFontSizePixels: font_size, axisLabelFontSizePixels: font_size,
mode: "time", mode: "time",
tickFormatter: xFormatter, tickFormatter: xFormatter,
tickSize: [maxticks, 'hour'], tickSize: [maxticks, 'hour'],
labelWidth: 70, labelWidth: 70
} ], }],
yaxis: { yaxes: [{
ticks: [], tickFormatter: yFormatter,
autoscaleMargin: 0.1 color: '',
}, alignTicksWithAxis: 1,
selection: { labelWidth: 30,
mode: 'x', position: 'left',
color: '#777' font: font,
}, reserveSpace: true,
}],
legend: { legend: {
show: false position: 'se',
}, container: $('#legend_' + graph_id),
crosshair: { labelFormatter: lFormatter
mode: 'x'
} }
}); });
} }
@ -1954,6 +1957,19 @@ function pandoraFlotArea(
tickFormatter: xFormatter, tickFormatter: xFormatter,
tickSize: [maxticks_zoom, 'hour'] tickSize: [maxticks_zoom, 'hour']
}], }],
yaxis:{
min: ranges.yaxis.from,
max: ranges.yaxis.to
},
yaxes: [{
tickFormatter: yFormatter,
color: '',
alignTicksWithAxis: 1,
labelWidth: 30,
position: 'left',
font: font,
reserveSpace: true,
}],
legend: { legend: {
show: true show: true
} }
@ -2121,7 +2137,6 @@ function pandoraFlotArea(
plot.setCrosshair({ x: pos.x, y: 0 }); plot.setCrosshair({ x: pos.x, y: 0 });
currentPlot = plot; currentPlot = plot;
latestPosition = pos; latestPosition = pos;
if (!updateLegendTimeout) { if (!updateLegendTimeout) {
updateLegendTimeout = setTimeout(updateLegend, 50); updateLegendTimeout = setTimeout(updateLegend, 50);
} }
@ -2285,31 +2300,20 @@ function pandoraFlotArea(
if (menu) { if (menu) {
var parent_height; var parent_height;
$('#menu_overview_' + graph_id).click(function() { $('#menu_overview_' + graph_id).click(function() {
$('#overview_' + graph_id).toggle(); if($('#overview_' + graph_id).css('visibility') == 'visible'){
$('#overview_' + graph_id).css('visibility', 'hidden');
}
else{
$('#overview_' + graph_id).css('visibility', 'visible');
}
}); });
//~ $('#menu_export_csv_' + graph_id).click(function() {
//~ exportData({ type: 'csv' });
//~ });
$("#menu_export_csv_"+graph_id) $("#menu_export_csv_"+graph_id)
.click(function (event) { .click(function (event) {
event.preventDefault(); event.preventDefault();
plot.exportDataCSV(); plot.exportDataCSV();
}); });
//Not a correct call
//~ $('#menu_export_json_' + graph_id).click(function() {
//~ exportData({ type: 'json' });
//~ });
//This is a correct call to export data in json
//~ $("#menu_export_json_"+graph_id)
//~ .click(function (event) {
//~ event.preventDefault();
//~ plot.exportDataJSON();
//~ });
$('#menu_threshold_' + graph_id).click(function() { $('#menu_threshold_' + graph_id).click(function() {
datas = new Array(); datas = new Array();
@ -2408,12 +2412,6 @@ function adjust_menu(graph_id, plot, parent_height, width) {
var parent_height_new = 0; var parent_height_new = 0;
var legend_height = parseInt($('#legend_'+graph_id).css('height').split('px')[0]) + parseInt($('#legend_'+graph_id).css('margin-top').split('px')[0]); var legend_height = parseInt($('#legend_'+graph_id).css('height').split('px')[0]) + parseInt($('#legend_'+graph_id).css('margin-top').split('px')[0]);
if ($('#overview_'+graph_id).css('display') == 'none') {
overview_height = 0;
}
else {
overview_height = parseInt($('#overview_'+graph_id).css('height').split('px')[0]) + parseInt($('#overview_'+graph_id).css('margin-top').split('px')[0]);
}
var menu_height = '25'; var menu_height = '25';
@ -2425,10 +2423,6 @@ function adjust_menu(graph_id, plot, parent_height, width) {
$('#menu_' + graph_id).css('top', ((offset) + 'px')); $('#menu_' + graph_id).css('top', ((offset) + 'px'));
//$('#legend_' + graph_id).css('width',plot.width());
//~ $('#menu_' + graph_id).css('left', $('#'+graph_id)[0].offsetWidth);
$('#menu_' + graph_id).show(); $('#menu_' + graph_id).show();
} }
@ -2498,9 +2492,8 @@ function adjust_left_width_canvas(adapter_id, adapted_id) {
$('#'+adapted_id).css('margin-left', adapter_left_margin); $('#'+adapted_id).css('margin-left', adapter_left_margin);
} }
function update_left_width_canvas(graph_id) { function update_left_width_canvas(graph_id) {
$('#overview_'+graph_id).width($('#'+graph_id).width() - 30); $('#overview_'+graph_id).width($('#'+graph_id).width());
$('#overview_'+graph_id).css('margin-left', $('#'+graph_id+' .yAxis .tickLabel').width()); $('#overview_'+graph_id).css('margin-left', $('#'+graph_id+' .yAxis .tickLabel').width());
} }

View File

@ -205,7 +205,7 @@ function flot_area_graph (
} }
// Parent layer // Parent layer
$return = "<div class='parent_graph' style='width: " . ($format_graph['width']) . "px; " . $background_style . "'>"; $return = "<div class='parent_graph' style='width: " . ($format_graph['width']) . "; " . $background_style . "'>";
// Set some containers to legend, graph, timestamp tooltip, etc. // Set some containers to legend, graph, timestamp tooltip, etc.
$return .= "<p id='legend_$graph_id' class='legend_graph' style='font-size:" . $format_graph['font_size'] ."pt !important;'></p>"; $return .= "<p id='legend_$graph_id' class='legend_graph' style='font-size:" . $format_graph['font_size'] ."pt !important;'></p>";
@ -260,13 +260,14 @@ function flot_area_graph (
} }
if (!$vconsole){ if (!$vconsole){
$return .= "<div id='overview_$graph_id' $return .= "<div id='overview_$graph_id'
class='overview_graph' class='overview_graph'
style=' display: none; margin-left:0px; style=' margin:0px; margin-top:30px; margin-bottom:50px;
margin-top:20px; margin-bottom:50px; visibility:hidden;
width: ".$format_graph['width']."px; width: ".$format_graph['width'].";
height: ".$format_graph['height'] ."px;'></div>"; height: 200px;'></div>";
} }
//XXXXTODO //XXXXTODO
$water_mark = ''; $water_mark = '';
if ($water_mark != '') { if ($water_mark != '') {
@ -377,7 +378,7 @@ function menu_graph(
$return .= "<div id='geneal_menu_$graph_id' class='menu_graph' style=' $return .= "<div id='geneal_menu_$graph_id' class='menu_graph' style='
width: 30px; width: 30px;
height: 250px; height: 250px;
left: " . $width . "px; left: 100%;
position: absolute; position: absolute;
top: 0px; top: 0px;
background-color: white;'>"; background-color: white;'>";

View File

@ -4628,8 +4628,9 @@ form ul.form_flex li ul li{
border: 0px; border: 0px;
} }
/*
.tickLabel { .tickLabel {
white-space: nowrap; white-space: nowrap;
line-height: 1.05em!important; line-height: 1.05em!important;
} }
*/

View File

@ -316,10 +316,6 @@ div.graph {
margin: 0 auto; margin: 0 auto;
} }
.tickLabels * {
font-size: 10px !important;
}
table.alternate tr:nth-child(odd) td, table.alternate tr:nth-child(odd) th{ table.alternate tr:nth-child(odd) td, table.alternate tr:nth-child(odd) th{
background-color: #ffffff; background-color: #ffffff;
} }

View File

@ -90,7 +90,6 @@ $alias = db_get_value ("alias","tagente","id_agente",$id_agent);
} }
?> ?>
<script type='text/javascript'> <script type='text/javascript'>
<!--
window.onload = function() { window.onload = function() {
// Hack to repeat the init process to period select // Hack to repeat the init process to period select
var periodSelectId = $('[name="period"]').attr('class'); var periodSelectId = $('[name="period"]').attr('class');
@ -105,15 +104,7 @@ $alias = db_get_value ("alias","tagente","id_agente",$id_agent);
else { else {
$("#hidden-show_other").val(0); $("#hidden-show_other").val(0);
} }
//
// if ($('#hidden-avg_only_sent').is(":checked") == true) {
// $("#hidden-avg_only_sent").val(1);
// }
// else {
// $("#hidden-avg_only_sent").val(0);
// }
} }
//-->
</script> </script>
</head> </head>
<body bgcolor="#ffffff" style='background:#ffffff;'> <body bgcolor="#ffffff" style='background:#ffffff;'>
@ -163,8 +154,14 @@ $alias = db_get_value ("alias","tagente","id_agente",$id_agent);
$period = get_parameter ("period"); $period = get_parameter ("period");
$id = get_parameter ("id", 0); $id = get_parameter ("id", 0);
//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
/*
$width = get_parameter ("width", STATWIN_DEFAULT_CHART_WIDTH); $width = get_parameter ("width", STATWIN_DEFAULT_CHART_WIDTH);
$height = get_parameter ("height", STATWIN_DEFAULT_CHART_HEIGHT); $height = get_parameter ("height", STATWIN_DEFAULT_CHART_HEIGHT);
*/
$label = get_parameter ("label", ""); $label = get_parameter ("label", "");
$label_graph = base64_decode(get_parameter ("label", "")); $label_graph = base64_decode(get_parameter ("label", ""));
$start_date = get_parameter ("start_date", date("Y/m/d")); $start_date = get_parameter ("start_date", date("Y/m/d"));
@ -229,12 +226,14 @@ $alias = db_get_value ("alias","tagente","id_agente",$id_agent);
$unit = db_get_value('unit', 'tagente_modulo', 'id_agente_modulo', $id); $unit = db_get_value('unit', 'tagente_modulo', 'id_agente_modulo', $id);
// log4x doesnt support flash yet // log4x doesnt support flash yet
//
if ($config['flash_charts'] == 1) if ($config['flash_charts'] == 1)
echo '<div style="margin-left: 65px; padding-top: 10px;">'; echo '<div style="margin-left: 65px; padding-top: 10px;">';
else else
echo '<div style="margin-left: 20px; padding-top: 10px;">'; echo '<div style="margin-left: 20px; padding-top: 10px;">';
$width = '90%';
$height = '450';
switch ($graph_type) { switch ($graph_type) {
case 'boolean': case 'boolean':
case 'sparse': case 'sparse':
@ -488,6 +487,7 @@ ui_include_time_picker(true);
var show_overview = false; var show_overview = false;
var height_window; var height_window;
var width_window; var width_window;
$(window).ready(function() { $(window).ready(function() {
height_window = window.innerHeight; height_window = window.innerHeight;
width_window = window.innerWidth; width_window = window.innerWidth;