tyler.durden
/
pandorafms
mirror of https://github.com/pandorafms/pandorafms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixed there are many bullet charts in one page (such as dashboard). TICKET: #3187 

(cherry picked from commit 11f9f2ec32)
This commit is contained in:
mdtrooper 2016-01-11 15:18:13 +01:00
parent a5f8a9ca24
commit ed78a4e44f
1 changed files with 47 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
pandora_console/include/graphs/functions_d3.php
View File

@ -142,23 +142,25 @@ function d3_sunburst_graph ($data, $width = 700, $height = 700, $return = false)
}
function d3_bullet_chart($chart_data, $width, $height, $color, $legend,
$homeurl, $unit, $font, $font_size) {
$homeurl, $unit, $font, $font_size) {
global $config;
$output = '';
$output .= include_javascript_d3(true);
$id_bullet = uniqid();
$output .=
'<div id="bullet_graph" style="overflow: hidden;"></div>
'<div id="bullet_graph_' . $id_bullet . '" class="bulle" style="overflow: hidden;"></div>
<style>
#bullet_graph {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
padding-top: 40px;
position: relative;
width: 100%;
.bullet_graph {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
padding-top: 40px;
position: relative;
width: 100%;
}
.bullet { font: 7px sans-serif; }
@ -174,7 +176,7 @@ function d3_bullet_chart($chart_data, $width, $height, $color, $legend,
.bullet .title { font-size: 7pt; font-weight: bold; text-align:left; }
.bullet .subtitle { fill: #999; font-size: 7pt;}
.bullet g text { font-size: 7pt;}
</style>
<script src="'. $config['homeurl'] . 'include/graphs/bullet.js"></script>
<script language="javascript" type="text/javascript">
@ -209,46 +211,46 @@ function d3_bullet_chart($chart_data, $width, $height, $color, $legend,
$output .= 'var data = ['
. implode(",",$temp) . '];
';
$output .= '
$output .= '
var svg = d3.select("#bullet_graph").selectAll("svg")
.data(data)
var svg = d3.select("#bullet_graph_' . $id_bullet . '").selectAll("svg")
.data(data)
.enter().append("svg")
.attr("class", "bullet")
.attr("width", "100%")
.attr("height", height+ margin.top + margin.bottom)
.attr("class", "bullet")
.attr("width", "100%")
.attr("height", height+ margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + (margin.left) + "," + margin.top + ")")
.call(chart);
.attr("transform", "translate(" + (margin.left) + "," + margin.top + ")")
.call(chart);
var title = svg.append("g")
var title = svg.append("g")
.style("text-anchor", "end")
.attr("transform", "translate(-20," + height + ")");
title.append("text")
.attr("class", "title")
.text(function(d) { return d.title; });
title.append("text")
.attr("class", "subtitle")
.attr("dy", "1em")
.text(function(d) { return d.subtitle; });
$(".tick>text").each(function() {
label = $(this).text().replace(/,/g,"");
label = parseFloat(label);
text = label.toLocaleString();
if ( label >= 1000000)
text = text.substring(0,3) + "M";
else if (label >= 100000)
text = text.substring(0,3) + "K";
else if (label >= 1000)
text = text.substring(0,2) + "K";
$(this).text(text);
});
.attr("transform", "translate(-20," + height + ")");
title.append("text")
.attr("class", "title")
.text(function(d) { return d.title; });
title.append("text")
.attr("class", "subtitle")
.attr("dy", "1em")
.text(function(d) { return d.subtitle; });
$(".tick>text").each(function() {
label = $(this).text().replace(/,/g,"");
label = parseFloat(label);
text = label.toLocaleString();
if ( label >= 1000000)
text = text.substring(0,3) + "M";
else if (label >= 100000)
text = text.substring(0,3) + "K";
else if (label >= 1000)
text = text.substring(0,2) + "K";
$(this).text(text);
});
</script>';
return $output;