I'm using primefaces 6.0 line chart component, which is based on jqPlot. In my charts I have null values, which I need because I'm making use of the breakOnNull plotting option, so the curves have breaks on the null points, but unfortunately the null "points" are being shown as string (see screenshot).
So far I have tried to solve this setting the hideZeros: true option - no success. I also tried a simple custom pointLabels renderer:
this.cfg.seriesDefaults.pointLabels =
{
show: true,
location: 's',
formatString: '%.1f',
formatter: function(format, val){
console.log(val);
return (val== null?"":val);}
}
but this doesn't work either since the null values are not being passed to it all, which I can not understand.
Any help will be appreciated.
You can iterate over the pointLabels divs with jQuery each function and when detecting a null string, change it to be null.
Here is an example for the approach, this addition function to the (document).ready event will remove the text of the x-axis labels, after the chart has been created. With a similar apporach you can remove your required values from the corresponding divs:
$('.jqplot-xaxis-tick').each(function(i,elem) {
$(this).text(null);
});
Here is a jsfiddle with example for the x-axis labels being removed by the described approach.
Tried checking if the null values are by accident 'null' strings by changing return (val== null?"":val);} to return (val== 'null'?"":val);}
Related
I have the below script with the purpose of retrieving the value in the google sheet which will either state TRUE or FALSE. If it states false I want this script to run the two functions below (updateWIPdata and updateDebtorsdata) but if the cell value is true I don't want those functions to run at all but the functions seem to run regardless of the value in the cell so any help would be much appreciated
function updateAll() {
var updateStatus = SpreadsheetApp.getActive().getSheetByName('Updated').getRange('C2').getValue();
Logger.log(updateStatus);
if (updateStatus = 'false') {
updateWIPdata();
updateDebtorsdata();
}
}
Probably the value is a boolean.
Also, please use == or ===
if (updateStatus == false) {
Reference:
Equality operators
The fix is simple
But you also want to improve a few things in your code
The main problem is in this line:
if (updateStatus = 'false')
You are not comparing updateStatus to false, you are assigning 'false' to updateStatus. On top of that you are assigning a string, not a boolean. The line needs to be
if (false === updateStatus)
Notice three things:
false is a boolean here, it doesn't have quotation marks around it
It's on the left side of the comparison; putting litteral values on the left side is a habbit that prevents this type of error
I'm using the === comparison operator instead of the = assignment operator
Another thing you need to do is forget about var and start using const and let. If your updateStatus was a const, you would have very quickly realized the error.
So I have a set of data that needs to be displayed on the admin dashboard.
I decided to use laravel charting package ConsoleTvs Charts by Erik Campobadal.
I am using the package above to create charts directly from the database, the issue is, within my table (user's table for example) there are columns with NULL value.
How do I ignore this null values and represent only columns with real values on my chart?
`
$chart_print_media = Charts::database(User::all(), 'pie', 'highcharts')
->title('Print Media Campaign')
->dimensions(450, 300)
->groupBy('print_media',null);`
Thanks to Eric Campobadal, am just going to post the answer here for anyone that this might help in the future.
`
$users_print = User::all()->filter(function ($user) {
return $user->print_media !== null;
});
$chart_print_media = Charts::database($users_print, 'pie', 'highcharts')
->title('Print Media Campaign')
->dimensions(450, 300)
->groupBy('print_media');
`
I believe this is self-explanatory enough
I've been looking into how to count cells with the countif function, and how to count cells that are colored using scripts and custom functions (like this thing: http://pastebin.com/4Yr095hV), but how would i count cells with a specific string AND color?
Example, I want to count every cell containing the word "one" that has a fill color of white.
EDIT: I was told to add what i had so far, but I am not sure what was meant by that. For counting cells with a specific string I used:
=COUNTIF(A1:A247,"string")
and for counting cells that are colored i used this what was on this page: https://webapps.stackexchange.com/questions/23881/google-spreadsheet-calculating-shaded-cells
but i still don't know how to combine these two TOGETHER.
EDIT: For those looking for this answer, I've found a way to utilize the script Tom posted, and adjusted a line within it.
For Tom's script to work with "wildcards", i used something called .indexOf to always look for any cells containing the string (effectively treating it as if there is always a star before and after the string). On line 32 of his script, I altered it to this:
.map (function(e,i,a) { if (e.toString().toUpperCase().indexOf(this.toString().toUpperCase()) >= 0){ return 1 } else { return 0 } },str))
So now whenever I want to look for a White cell containing the string "Apple1", it will count it regardless of if it's written as "OrangeApple1B" or whatever. And the casing doesn't matter since it seems like this script always converts the given string to Upper Case anyways.
I am still trying to find out how to incorporate this on a totally different spreadsheet though (using something like IMPORTRANGE to count cells on a TOTALLY DIFFERENT SHEET using this script)...
function countIfStringAndColor(r, str, color) {
var COLORS = {
"BLACK":"#000000",
"DARK GRAY 4":"#434343",
"DARK GRAY 3":"#666666",
"DARK GRAY 2":"#999999",
"DARK GRAY 1":"#B7B7B7",
"GRAY":"#CCCCCC"
};
var range = SpreadsheetApp
.getActive()
.getActiveSheet()
.getRange(r.toString());
color = color.indexOf("#") == 0 ? color : COLORS[color.toString().toUpperCase()];
return range
.getBackgrounds()
.reduce(function(a,b) { return a.concat(b) })
.map (function(e,i,a) { return e.toString().toUpperCase() === this.toString().toUpperCase(); },color)
.map(function(e,i,a) { return [e, this[i]] },
range
.getValues()
.reduce(function(a,b) { return a.concat(b) })
.map (function(e,i,a) { return e.toString().toUpperCase() === this.toString().toUpperCase() },str))
.filter(function(e,i,a) {return a[i][0] && a[i][1] })
.length;
}
METHOD OF OPERATION
The function takes three arguments: Range (String), String, String
The associative array 'COLORS' is supplied to convert the common names of colors to hex format. There are about 90 more colors in the list that I didn't supply for space reasons. I can get you the full list if you would like.
Grabbing the Range.
Checks to see if color is already in hex format. If not it tries to find a common name key in COLORS and return the hex value. From here out everything is toString() and toUpperCase() to help prevent errors.
The code from here out is one chain of array manipulation that will produce the solution for the function to return.
Grab the needed background colors.
.reduce, coupled with .concat (both Array Methods), is used to flatten the background color array. It changes it from a rectangular array of arrays to a one dimensional list.
.map goes through each element of the array and applies the given function. In this case we are seeing if the array element (e) is the same as the color supplied. Take note of how 'color' is called outside the closing curly bracket. It is the 'thisArg', and the 'this' inside the function is an image of it. The array is now reduced to a series of true/false elements.
This map is used to combine the two arrays, 'color' and 'str'. The indented part right below is the same steps we used to get 'color' to a series of true/false elements, but now applied to 'str'. All those operations are performed while 'str' is being called as the thisArg for the current map function. The map function then returns a single array of the form [color,str] which is made up of many elements of [true,false] [true,true] [false,false] pairs.
We are only interested in the solutions where both 'color' and 'str' are true, so we can use .filter to remove all the other elements, leaving use with an array of only [true, true] pairs.
Each [true, true] pair is a unique solution to the equation. We can just grab the length of the array to see how many solutions we have found! This is the value that is passed to the return at the beginning.
I'm trying to do some re-factoring on my charts to make them re-usable using this as a guide: http://bost.ocks.org/mike/chart/
I'm having problems drawing the lines in my multi-line graph though - specifically passing the data to the x and y values. If I hard code the element names it works, but if I try to use the xValue and yValue objects this does not work. I'm assuming that this is because I'm trying to call a function within the parameter of an other object, but I'm not sure how to get around this. In the exmaple Mike uses d[0] and d[1], but this won't work with JSON data (or I'm not sure how to make it work).
I've posted this JSFiddle so you can see the code. The problem lines are 125 to 131 which in turn is being called from line 165.
var main_line = d3.svg.line()
.interpolate("cardinal")
// Hard coding the elements works
//.x(function(d) { return main_x(d.date); })
//.y(function(d) { return main_y(d.buildFixTime); });
// Passing xValue and yValue does not work
.x(function(d) { return main_x(xValue); })
.y(function(d) { return main_y(yValue); });
http://jsfiddle.net/goodspeedj/fDyLY/
Thank you in advance.
You need to redefine your accessor method within .x() and .y(). The accessor method defines the way that a datum is pulled out of the data that is bound to the selection that you call the line generator on.
Suppose you have a relatively flat data structure such as the following.
data = [{x : 1, y : 2}, {x:1, y:3}, {x:4, y:5}];
You then bind the data to a selection with the following statement
d3.select("body").datum(data).append("path").attr("d",lineGenerator);
Quite a bit is going on underneath this statement. I'll give you a bit more of a walkthrough after showing you a commonly used example.
The important aspect to understand is that similarly to other calls in d3 such as
var exampleRectangles = d3.select("body")
.data(data).enter()
.append("rect")
.attr("width",2)
.attr("height", 3)
.attr("x",function(datum){return datum.x}) // pay attention to this line
.attr("y",0);
d3 is implicitly iterating over each element in your data. For each datum in your data array, in this case there is a total of three datum, you are going to add a rectangle to the dom.
In the line that I tell you to pay attention to you notice that you're defining an anonymous (unnamed) function. What is that datum parameter coming from? It's implicitly being passed to your anonymous function.
So each rectangle has it's own corresponding datum {x : 1, y : 2}, {x:1, y:3}, {x:4, y:5} respectively. Each rectangle's x coordinate is defined by the respective datum.x attribute. Under the sheets, d3 is implicitly looping over the data array that you've defined. A similar approach to the example d3 code could be written as above.
for (var i = 0; i < data.length; i++)
{
d3.select("body").append("rect")
.attr("width",2)
.attr("height", 3)
.attr("x",data[i].x)
.attr("y",0);
}
This follows from the notion of data driven documents (d3). For each item added (a rectangle in the above example a piece of data is tied to it. In the above example you see that there is something kind of similar to your .x() and .y() accessor functions :
.attr("x",function(datum){return datum.x})
This function is telling d3 how to filter over the total datum that's being passed to the .attr() accessor method.
So, you need to determine which data you need to get a hold of to make your .attr("d", lineGenerator)call make sense. The difference between your.datum(data)call and the typical.data(data)call is that instead of parceling the data that's being passed to.data(data)`, the whole array is given as a single piece of data to the line generator function (similar to main_line(data), wherein it will again implicitly loop over the points to construct your path.
So, what you need to do is determine what a single datum will be defined as for your function to operate on.
I'm not going to define that as I don't seem to know quite which information you are operating on, but I would hazard a guess at something like.
.x(xAccessor)
.y(yAccessor)
function xAccessor(datum)
{
return xScale(datum._id.month);
}
function yAccessor(datum)
{
return yScale(datum.buildFixTime);
}
The way you have it set up, xValue and yValue are functions; you have to actually execute them on something to get a value back.
.x(function(d) { return main_x( xValue(d) ); })
.y(function(d) { return main_y( yValue(d) ); });
If you weren't using a scale, you could use
.x(xValue)
.y(yValue);
but only because if you pass in a function d3 executes it for you with the data as a parameter. And that only works for d3 methods that expect functions as possible input -- the scale functions expect data values as input.
I wrote a long piece work for another user last week that you may find useful, explaining methods that accept functions as parameters.
I am using primefaces p:barChart which is a part of the jqplot api.
I want to remove the column number (the lest number 1 ) from the jqplot-highlighter-tooltip()
I assume the answer is in one of the options in the following
http://www.jqplot.com/docs/files/jqPlotOptions-txt.html but I didn't find the correct one
Can someone can please point me to the relevant attr ?
Thanks
function ext() {
this.cfg.highlighter = {
tooltipAxes: 'y'
};
}