Chart.js. Edit bar width -v2.5- - chart.js

I am having to give some symmetry to two charts. There is a big space under the chart at right I want to get rid of.
Probably is an easy to change parameter of yAxis in config, but I am quite lost. I don't find anything in official docs or web.
I've already tried with Barwidth, categorySpacing, barPercentage, etc
Real example at : https://jsfiddle.net/j1dffbgk/
.

The reason why that space is appearing, is because, you have an empty label in your labels array.
labels: [
["aaa", ' ff'],
["aa", " ddd"], "ee eeee", ""
^^
],
Remove that empty label (if not necessary) and you will be good to go.
Here is the working code on jsFiddle

Related

Regex for XAML Formatting

I'm attempting to build a PowerShell CmdLet that can parse and cleanly reformat a chunk of XAML or any other markup language.
So far, I've had to build an assortment of CmdLet's so that I can get the correct information to put into this thing (for indentation, counts, items, child items, etc, so forth...)
What I'm attempting to do is to collect ALL of the properties and values in a set of XAML/HTML, etc, and then once I have the lengths of all those variables, I can then start to chunk them out and properly format them so that they all output down a straight line. It may not make a super amount of sense as I describe it? So, here's an example.
<Window xmlns = 'http://schemas.microsoft.com/winfx/2006/xaml/presentation'
xmlns:x = 'http://schemas.microsoft.com/winfx/2006/xaml'
Title = 'Window Title'
Height = '600'
MinHeight = '600'
Width = '800'
MinWidth = '800'
BorderBrush = 'Black'
ResizeMode = 'CanResize'
HorizontalAlignment = 'Center'
WindowStartupLocation = 'CenterScreen'>
The reason I am attempting to build this, is so that I can programmatically save the instructions to a smaller footprint. So, instead of... having fluctuating numbers for each line and item and the end result looking like this...
<Window xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
xmlns:x = 'http://schemas.microsoft.com/winfx/2006/xaml' Title = 'Window Title' Height = '600'
MinHeight = '600' Width = '800' MinWidth = '800' BorderBrush = 'Black' ResizeMode = 'CanResize'
HorizontalAlignment = 'Center' WindowStartupLocation = 'CenterScreen'>
...I then have a set of instructions that can vectorize the content of the XAML, so that it has a pattern and less randomness. Sure, the line count might get expanded quite a bit, but there's no need to be concerned with that if all it is doing is expanding into RAM. Which is the point of it...
At any rate, the code that I am having trouble with is essentially a way to preserve the spacing between the quoted objects. I feel like I'm beating my head against a wall trying to get this to work correctly when I know it's a matter of Regex ...
I've posted the code I'm talking about via this link.
https://github.com/secure-digits-plus-llc/FightingEntropy/blob/master/Format-XAML.ps1
Lines 43-147
It is a script block, and testing with it requires a Xaml Here String.
Any suggestions would be appreciated. I'm not much of a Regex fan, I understand some basics to it but I'm not that great with it yet.
-MC
Found the answer I was looking for.
Not the most eloquent way to solve the issue I was having, but it works.
"(?<=\').+?(?=\')"
When the lines are split, and you want to preserve the spacing within the quotes, then you need something like this.
I was attempting to iterate through a do loop until the array/string contained (2) single quotes, but what was happening was... 'oh. I thought you wanted to match 'adbhjikvgrfe' with '21345rfs'.
No regex. Wasn't looking to match that. sigh.
Then it was taking the spacing out between the quotes.
sigh
I gotta say... anyone who truly writes good programming...? Well, I tip my hat off to you good sir/ma'am... because... it's a frustrating job. For certain.

Regex (re2 googlesheets) multiple values in multiline cell

Getting stuck on how to read and pretty up these values from a multiline cell via arrayformula.
Im using regex as preceding line can vary.
just formulas please, no custom code
The first column looks like a set of these:
```
[config]
name = the_name
texture = blah.dds
cost = 1000
[effect0]
value = 1000
type = ATTR_A
[effect1]
value = 8
type = ATTR_B
[feature0]
name = feature_blah
[components]
0 = comp_one,1
[resources]
res_one = 1
res_five = 1
res_four = 1
<br/>
Where to be useful elsewhere, at minimum it needs each [tag] set ([effect\d], [feature\d], ect) to be in one column each, for example the 'effects' column would look like:
ATTR_A:1000,ATTR_B:8
and so on.
Desired output can also be seen in the included spreadsheet
<br/>
<b>Here is the example spreadsheet:</b>
https://docs.google.com/spreadsheets/d/1arMaaT56S_STTvRr2OxCINTyF-VvZ95Pm3mljju8Cxw/edit?usp=sharing
**Current REGEXREPLACE**
Kinda works, finds each 'type' and 'value' great, just cant figure out how to extract just that from the rest, tried capture (and non-capturing) groups before and after but didnt work
=ARRAYFORMULA(REGEXREPLACE($A3:$A,"[\n.][effect\d][\n.](.)\n(.)","1:$1 2:$2"))
**Current SUBSTITUTE + REGEXEXTRACT + REGEXREPLACE**
A different approach entirely, also kinda works, longer form though and left with having to parse the values out of that string, where got stuck again. Idea was to use this to simplify, then regexreplace like above. Getting stuck removing content around the final matches though, and if can do that then above approach is fine too.
// First ran a substitute
=ARRAYFORMULA(SUBSTITUTE(SUBSTITUTE($A3:$A,char(10),";"),";;",char(10)))
// Then variation of this (gave up on single line 'effect/d' so broke it up to try and get it working)
=ARRAYFORMULA(IF(A3:A<>"",IFERROR(REGEXEXTRACT(A3:A,"(?m)^(?:[effect0]);(.)$")&";;")&""&IFERROR(REGEXEXTRACT(A3:A,"(?m)^(?:[effect1]);(.)$")&";;")&""&IFERROR(REGEXEXTRACT(A3:A,"(?m)^(?:[effect2]);(.)$")&";;"),""))
// Then use regexreplace like above
=ARRAYFORMULA(REGEXREPLACE($B3:$B,"value = (.);type = (.);;","1:$1 2:$2"))
**--EDIT--**
Also, as my updated 'Desired Output' sheet shows (see timestamped comment below), bonus kudos if you can also extract just the values of matching 'type's to those extra columns (see spreadsheet).
All good if you cant though, just realized would need that too for lookups.
**--END OF EDIT--**
<br/>
Ive tried dozens of things, discarding each in turn, had a quick look in version history to grab out two promising attempts and shared them in separate sheets.
One of these also used SUBSTITUTE to simplify input column, im happy for a solution using either RAW or the SUBSTITUTE results.
<br/>
**Potentially Useful links:**
https://github.com/google/re2/wiki/Syntax
<br/>
<b>Just some more words:</b>
I also have looked at dozens of stackoverflow and google support pages, so tried both REGEXEXTRACT and REGEXREPLACE, both promising but missing that final tweak. And i tried dozens of tweaks already on both.
Any help would be great, and hopefully help others in future since examples with spreadsheets are great since every new REGEX seems to be a new adventure ;)
<br/>
P.S. if we can think of better title for OP, please say in comment or your answer :)
paste in B3:
=ARRAYFORMULA(SUBSTITUTE(TRIM(TRANSPOSE(QUERY(TRANSPOSE(
IF(C3:E<>"", C2:E2&":"&C3:E, )),,999^99))), " ", ", "))
paste in C3:
=ARRAYFORMULA(IFNA(REGEXEXTRACT($A3:$A, "(\d+)\ntype = "&C2)))
paste in D3:
=ARRAYFORMULA(IFNA(REGEXEXTRACT($A3:$A, "(\d+)\ntype = "&D2)))
paste in E3:
=ARRAYFORMULA(IFNA(REGEXEXTRACT($A3:$A, "(\d+)\ntype = "&E2)))
paste in F3:
=ARRAYFORMULA(IFNA(REGEXEXTRACT(A3:A, "\[feature\d+\]\nname = (.*)")))
paste in G3:
=ARRAYFORMULA(IFNA(REGEXEXTRACT(A3:A, "\[components\]\n\d+ = (.*)")))
paste in H3:
=ARRAYFORMULA(IFNA(REGEXREPLACE(INDEX(SPLIT(REGEXEXTRACT(
REGEXREPLACE(A3:A, "\n", ", "), "\[resources\], (.*)"), "["),,1), ", , $", )))
spreadsheet demo
This was a fun exercise. :-)
Caveat first: I have added some "input data". Examples:
[feature1]
name = feature_active_spoiler2
[components]
0 = spoiler,1
1 = spoilerA, 2
So the output has "extra" output.
See the tab ADW's Solution.

Use image as table in RMarkdown?

I appreciate that what I'm trying to do will sound silly, but please bear with me. I want to insert an existing image (a PNG) of a table into an RMarkdown document that will be turned into a pdf. Is there any way I can do this and have the image treated as a table for numbering purposes? That is, obviously I could do
![A caption for my table](my_table_as_image.png)
but the problem is that it will be numbered as e.g. Figure X, not Table Y. I would like it to be named/numbered as a table.
Thank you for any advice.
Looks like I got to a way to do it with kable with some inspiration...this still has two horizontal lines but that's ok for the moment:
```{r echo=F, warning=F}
temp.df = data.frame(image="![](mytable.png)")
temp.mat <- as.matrix(temp.df)
colnames(temp.mat) <- NULL
knitr::kable(temp.mat, caption="This is my caption")
```
Edit: as suggested by #HoneyBuddha, when using Bookdown, you must add the flag format="pandoc", i.e. knitr::kable(temp.mat, caption="This is my caption", format="pandoc")

How do I remove the value label from a Google Visualizations gauge?

I'm using the Google Visualizations gauge on a page, but it's important that the value its displaying is not shown as a label right below the needle.
I've found two ways of doing this. Once you navigate through the DOM to the gauge widget, and navigating into the SVG pieces, you can either set the textContent element to be an empty string, or you can delete that whole text label entity, entirely.
function removeLabel(widget) {
var gauge_label_parent = widget.getElementsByTagName("g")[1];
var gauge_label = gauge_label_parent.getElementsByTagName("text")[0];
gauge_label.textContent = "";
// Another way of getting rid of the text: remove the element
// gauge_label_parent.removeChild(gauge_label);
}
The problem is: both of those techniques work only on the first time. If I re-draw the gauge with updated values, then the label re-appears, and trying to remove the label element or set textContent="" does nothing.
So, instead of just being able to update the value with:
data.setValue(0, 1, newValue);
chart.draw(data, options);
I have discovered that I have to change the options a little bit, like:
data.setValue(0, 1, newValue);
options.minorTicks = 3; // Change the options somehow
chart.draw(data, options); // Tell gauge to draw that
options.minorTicks = 2; // Change the options back to what they were
chart.draw(data, options); // Draw again
Here's a fiddle to see how it works or doesn't. Set the fixLabel to true or false depending upon whether you want the label problem to be present or not. Keep in mind that the label will (properly) be missing the first time. It re-appears when you update its value.
http://jsfiddle.net/jemenake/72dMt/2/
So, a few questions:
Any idea why it's doing this?
Is there a way to remove the label without having to go through this option-changing business?
Bonus question: Am I unclear about how minorTicks is supposed to work, or is it broken? The docs say that it's supposed to be the number of minor ticks between majors, but setting it to 2 gives me only 1 minor tick, 3 gives me 2, etc. And, if I set it to 0 or 1, I get "Problem parsing d=''" in the console.
Adding to Madthews answer:
To those of you who are trying to remove the label from the Google Gague Chart.
If you add the following code into your page (i have placed it in the header to keep things tidy) then you can set the font size of the Label to whatever you want.
<style>
* {text-rendering: optimizeLegibility; font-size:100%;}
svg g g {font-size:0px;}
</style>
I have been toying around with this for a while now and the top line of the css above is essential otherwise it will not work!
Ok I'll try to answer:
1) Label options are not managed by current API release
https://google-developers.appspot.com/chart/interactive/docs/gallery/gauge
Workaround: try with this CSS
svg g g {
font-size:0px;
}
http://jsfiddle.net/Madthew/72dMt/17/
Above fiddle explains you the meaning of the minorThicks. It's correct that if you set 2 you get 3 "spaces". Minor thicks represent the number of "BLANK" spaces between two major thicks. In the example you will se the perfect matching between your arrow and the thin line representing the minor thick.
Instead of messing with styles, you could just insert the value with a blank formatted field.
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Unitless Indicator', {v:counter, f:''} ]
]);
This also works with addRows.
jsfiddle here: https://jsfiddle.net/08x2m4vo/2/
Use this. This is also labelled by Google.
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['', {v: <Your_own_value_of_the_gauge_meter>, f: ''}],
]);
In place of "<Your_own_value_of_the_gauge_meter>" use your value variable. That's it.
What about this?
['Label', 'Value'],
['', 80]

Sencha Touch 2 list background change

I have a list within my application, but was wondering if it is possible to have each list displayed show a different background colour, rather than the same one through out each item?
I have created a template but would be nice to have the background of each change colour.
Thanks
EDIT: I have also created the same list via a 'Ext.dataview.component.DataItem' / 'DataView' so if this is easier to control separately then great, as I am looking at interfering in te process of creating each and setting its background, if that is at all possible.
You could try to do that with simply XTemplate:
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
'{name}',
'</div>',
'</tpl></p>'
);
take a look at their explanations, might find something interesting:
http://docs.sencha.com/touch/2-0/#!/api/Ext.XTemplate
I have seen many variants on the Ext.query('class').up().addCls('backgroundClass'); hack, which makes perfect sense to me, but my question is WHEN are people calling this? I can't put it in 'painted', since DOM doesn't seem to exist yet.. where/when are you guys executing the Ext.get(..) call?
I have been looking for this also, and I had a hard time finding out how to access the individual items of a xlist...
This is the way I finally did it:
in your itemTpl, add a class to your < div >, using the property 'id' of your model:
itemTpl:'< div class="my_list_item_{id}"> ... content ... < /div>'
the tricky part is that if you want to set the background color of the whole item area, you have to access to < div > with class 'x-item-label' that is wrapping your itemTpl < div >.
Here is how I did it (for the first item as an example):
Ext.select('.my_list_item_1').first().up('div.x-list-item-label').addCls('background_item');
where 'background_item' is a CSS style, defining your background color.
(Since there is no way (at least that I know of) to get the index count of your items in the 'itemTpl' config, I had to use to automatic 'id' property of my model/store.
Note that if you apply filtering/sorting/... on your store, this property will not be sorted anymore. So if you want to link the order displayed in your list to the 'id' property, you have to do something like 'Ext.StoreManager.get('MyStore').getAt(indexInList).get('id') )
Hope this helps...
Since Sencha Touch 2.2.1 it's also possible to use striped parameter (more info here). It will add x-list-item-odd class to odd items of your list.