Having trouble spider charting with only one series.
I tried working off this example:
http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/charting/tests/test_spidersingle.html
And set that up here:
http://jsfiddle.net/mstefanko/FHnwd/72/
Firebug is throwing:
Unexpected value NaN parsing cy attribute.
I'm completely new to the dojo toolkit. I know I need to addAxis, but it doesn't look like the code from the top URL is working. The axis is starting and ending at the same number despite my trying to set min/max.
Any help is appreciated!
Problem has to do with spider charts figuring out the min/max of the axis on it's own. Even when I was using:
chart1.addAxis("Answer 3", { type: "Base", min: 0, max: 250 });
to set the min and max, the spider chart still bombed with only one series.
After playing around with the information in this ticket:
http://bugs.dojotoolkit.org/ticket/14583
I still wasn't able to get this working, I stumbled onto an answer here that basically said as a workaround add series for min and max then remove them after render. So thats exactly what I ended up doing.
chart.render();
chart.removeSeries("min");
chart.removeSeries("max");
Demonstrated here:
http://jsfiddle.net/FHnwd/90/
Related
I recently started experimenting with a stylesheet (.mplstyle) for my graphs. I found examples for altering the font globally,specifically for the labels and for titles:
axes.labelweight: bold
axes.titleweight: bold
font.size: 12
However, in the documentation I can't seem to find a way to adjust the ticklabel font, font-size and/or weight. Note that the syntax is different for stylesheets (.mplstyle) than doing it right in the code (for example, using rcParams doesn't seem to work).
I tried the following already but got a "Bad key" error:
Axes.set_yticklabels: fontdict:{'fontsize': 8,
'fontweight': rcParams['axes.titleweight'],
'verticalalignment': 'baseline',
'horizontalalignment': loc}
Very late answer here, but I found your post while trying to figure the same thing out. You've probably figured it out, but I thought I would comment so others that find this post find the answer.
You simply set:
xtick.labelsize : 10
ytick.labelsize : 10
If you want a fontsize of 10 for instance.
I'm trying to run a playwright test that keeps failing the screenshot match because of timestamps (ex. 3 hours ago, 1 day ago, 5 days ago) that are posted on the page next to some content, not matching the current timestamps that have changed because the test is being run after the initial baseline screenshot is taken.
What is a way that I can store the current date and time at the time of capturing baseline screenshots and telling playwright this is always the timestamp I want to compare against in all tests?
As I see it, as long as you don't ignore the date comparison in your screenshots, they will keep throwing errors. Take into account your snapshot is just a moment in time, we may say. so if your baseline snapshot (the one you compare your current status against) contains the text "5 days ago", that's unchangeable unless you update the snapshot, but the whole comparing snapshots is all about comparing current state vs previous state to check there are no unwanted regressions, so updating the snapshot for this test every time would not make much sense.
In my opinion, you should ignore the given text. A good way to do it is using the option "mask" included in version 1.20. So imagine you want to ignore the number of stars the playwright repo has in its homepage. You could do this:
test('homepage', async({ page }) => {
await page.goto('https://playwright.dev/');
const stars = page.locator('.gh-count');
expect(await page.screenshot({ mask: [stars] })).toMatchSnapshot();
});
This would take a snapshot of playwright's homepage, masking the element with the stars count, sticking the element into a pink-coloured box. That would prevent the snapshots from failing, no matter how many stars the repo gets.
If for whatever reason you cannot update your version up to 1.20, you can also "fake" the element with the evaluate() function, from changing the text before you take the snapshot to a fixed text (with the innerHTML property) or even making the element itself disappear changing its visibility with the setAttribute property. It's all about getting creative on this regard.
I know the question is old, but maybe someone will find the answer useful. What we did to go around the issue is inject css to hide the time stamps:
await page.addStyleTag({
content: `
.timestamp { display: none !important; }
`})
You just need to find the selector for the timestamp and use this code to hide it.
Thought this would be simple enough but am having not much luck finding a reference to this in the Highchart API.
I would like to have the dynamic line chart display the xAxis updates from left to right. i.e., the tadpole swimming to the left margin.
Can't for the life of me find a parameter to do this.
https://www.highcharts.com/demo/dynamic-update
Well.... should have seen that.
xAxis: {
type: 'datetime',
tickPixelInterval: 100,
reversed:true,
},
I'm importing someone's createjs application into an application loader which imports each developers application javascript to a global canvas. The application is working standalone but when I load the javascript dynamically I'm getting some strange behavior surrounding the getBounds() function.
I have some text created like this:
dialogText = new createjs.Text(text, 'bold ' + (28 * scale) + 'px Calibri', '#FFFFFF');
Then later on I use dialogText.getBounds() which returns null.
I try console logging dialogText and I can see that it is set and there is a value _bounds which reads null.
At what point do these values get set when the element in drawn to the canvas?
Note: I'm already adding the text to a createjs.Container() which has its bounds set before I run getBounds().
For a quick reference, I pasted EaselJS's update regarding getBounds():
(This dates back from "August 21, 2013", not sure if this is still necessary nowadays, but using setBounds(x, y, w, h) helped me with Shapes today [in 2017] actually!)
Source: http://blog.createjs.com/update-width-height-in-easeljs/
The _bounds property reflects a value that is manually set on the DisplayObject - which is helpful if you know the bounds of something that can't calculate it (like a Shape). It will always be null, unless you set it directly.
I tested your code, and it seems fine. Are you sure the scale or text values are not null? Maybe hard-code them to see if it works.
Do you have a sample somewhere? I noticed in the GitHub issue you posted that you mentioned it worked fine without RequireJS (though you don't mention that here). I would definitely ensure that the values are being set properly.
Here is the fiddle, as well as a simpler one with no EaselJS stage. Note that I have Calibri installed on my machine, so you might get different results if you are loading it in.
Sample code:
var dialogText = new createjs.Text("This is some text", 'bold ' + (28 * 1.5) + 'px Calibrix', '#FFFFFF');
console.log(">>",dialogText.getBounds());
I have this interactive chart here. As its data change depending on selected time period I wish to set the date range from Nov-10 to Jul-14, no matter the data. I know that I must use overrideMax on x axis, but I can't make it to work. I guess it's a matter of date formatting. Every single combination I've tried gives the following as result.
What is the right formatting? Thanks a lot.
EDIT: Thank you very much on your quick response, John. Now it is working. I'm loving Dimple more and more!
I have another question regarding this chart. Is there any way to arrange drawing order of series? I would like 'Previsión' to be sent to back. Now it is drawn depending on time period.
EDIT 2: Based on this other question I think I figured out a solution. With a 50ms delay after the chart is drawn I simple erase the circles and paths I wish to be at the front and then append them to the chart svg object.
setTimeout(function () {
var datoCircles = svg.selectAll('circle[id*=Dato]:not([id*=futuro])');
var prevCircles = svg.selectAll('circle[id*=Prev]');
var prevPaths = svg.selectAll('path[class*=Prev]');
datoCircles.remove();
prevCircles.remove();
prevPaths.remove();
// Convertimos la seleción d3 a objetos jQuery
$(svg.selectAll('svg > g')[0])
.append($(prevPaths[0]))
.append($(prevCircles[0]))
.append($(datoCircles[0]));
}, 50);
They need to be set with JavaScript date objects, as native date parsing in JavaScript causes cross browser problems, I recommend using the d3 method:
x.overrideMax = d3.time.format("%Y-%m-%d").parse("2014-05-09");
With this approach you can use whichever date format suits you.