kibo / astrochart Goto Github PK

Hi Kibo,

I have a fork of the javascript code that is able to produce dual or more astrochart charts.

Currently if you initialize a second chart to be shown, the wrapper always produced any second charts on the first html entities.

I can send you the code to merge with the master branch.

We're trying to implement a feature on our app that depends on the user clicking on the symbols (planets, cusps, signs). We do this using this code:

svg g[id*="astrology-radix-planets-"],
svg g[id*="astrology-radix-cusps-"],
svg g[id*="astrology-radix-signs-"] {
    pointer-events: all;
    cursor: pointer;
}

It works, but some symbols don't have a bounding box, which makes the click very difficult.
You can see this behaviour here (I've zoomed in so it is easier to notice the problem):

Notice the Scorpio symbol has a "bounding box", so it is clickable through all its area. The same isn't true for the Libra sign, with the way it is drawn, I have to click exactly on its stroke paths, which is very difficult with no zoom, as you can imagine. This makes clicking very erratic.

Workaround

As a workaround, we've added a transparent rect for all the signs, like this:

	function createRectForClick(x, y, width, height) {
		var rect = document.createElementNS(context.root.namespaceURI, 'rect')
		rect.setAttribute('x', x - astrology.SIGNS_STROKE)
		rect.setAttribute('y', y - astrology.SIGNS_STROKE)
		rect.setAttribute('width', width)
		rect.setAttribute('height', height)
		rect.setAttribute('fill', 'transparent')
		return rect
	}

This makes the whole sign area clickable again.

Would you be interested in fixing this behaviour? I could open a PR.

Hello,

Very nicely written code. Can you give a little more detailed description of
the type of expected data. Is it the longitude and latitude of the given planet or
something else... ? And also the same question for the cusps array.
Thank you for the effort tho.

Best regards,
Constantin

Is there a way to generate svg and send it or i can only use it inside html when i try to use it outside of html says document not found (i want to run it on the server convert the data to png and send it to the frontend(flutter)) if there is a way could you please help me thanks.

Hi,

thanks for the amazing job here.

This is probably not an issue but I don't think the transit cusps are necesary and are more noisy than helpful. How can I remove them so I only have the transit planets on the outer layer?

Thanks again.

Good morning Kibo

I am trying to add the Vertex point also in the chart - like the As, Dc, Ic, and MC. I got a red dot with a line at the right position....

I made the following changes to the code. I added the var

astrology.SYMBOL_VX = "Vx";

In the

astrology.Radix.prototype.drawAxis = function(){

function, I coded:

var VX = 12; ... [AS,IC,DC,MC,VX].forEach( function(i) {

There, if i==12, I made

startPosition = astrology.utils.getPointPosition( this.cx, this.cy, this.radius, this.data.planets['Vertex'] + this.shift); endPosition = astrology.utils.getPointPosition( this.cx, this.cy, axisRadius, this.data.planets['Vertex'] + this.shift);

As you can see, I've passed the Vertex as if it was a planet.

And finnaly added - in the same function:

if(i == VX){ textPosition = astrology.utils.getPointPosition( this.cx, this.cy, axisRadius + (10 * astrology.SYMBOL_SCALE), this.data.planets['Vertex'] - 2 + this.shift); wrapper.appendChild( this.paper.getSymbol( astrology.SYMBOL_VX, textPosition.x, textPosition.y)); }

Can you please help?

Kind regards

Hi,

Kibo, first of all, great job with these astrology projects, the code and the documentation. It is everything very well structured.

I have a demand of creating a Synastry chart, and I'd like to use your project as a starting point. Could you give any directions on where to start?

My intention is to make it open source afterwards as well, and your help would be very welcome.

Thanks in advance.

Hi,

i am struggling with the settings, i can change most settings. But if i try to change background color of the signs, nothing happens.

var settings = { COLOR_TAURUS:"#fff" };
var radix = new astrology.Chart('wheel', 600, 600, settings).radix( data );

Other options like SIGNS_COLOR seem to work, but the sign colors don't...

Hello developers,
I would like to use this chart for my project.
Is there a simple way I could update this design with my graphic design?

When searching for collisions of planets in the method astrology.utils.assemble may occur maximum call stack size exceeded.

The method is called recursively and under unfulfilled conditions (COLLISION_RADIUS X SCALE X paper size ) can terminated by stack size exceeded.

Behavior can be affected by setting the value:

• astrology.COLLISION_RADIUS
• astrology.SYMBOL_SCALE
• paper size

@see
#3

However, the error condition must be catch.

I would like to know if there is any reason for houses number to be svg path and not text with the numbers.

Function:
astrology.utils.comparePoints

The function was erased by mistake.
Need to add it.

Greatings

I'm creating a new simbol for the chart library. Can you please tell me in which units should I create it (px, mm, or etc.), with what size, and in which program (CorelDraw, Inkscape,etc) so they can be compatible to your own?

Kind regards

CPtolemy

Hi, I am very impressed by your job.
However, I have found Libra symbol is confused with North node symbol.
As far as I know, the symbol on the seventh sign should look like this: ♎.
Thank you for your good job!

Hi,

First of all, congratulations for the code - it's great in my opinion.

I was wondering if you could tell me what is the id in the html page of the svg canvas. I want to use the following code (which works with a previous canvas named 'myCanvas')):

var data = document.getElementById("myCanvas");

But the canvas generated by the radix.html (for instance) is not just 'paper'. Its child is 'svg' I think.

Can you help me out?

Kind regards

CPtolemy

When drawing the transit chart I want to be able to not display the cusps of the transit chart.

All the planets have unique ids, but sign and houses no.

To be easier to manipulate them will be good to each one have an id.

I'll send a PR for that.

Whats is the license of this repository?

Could be MIT?

Good morning,

The routines are working great, but I found a small bug. If you look at the chart I send, to the red zone, you see that the planets are in the right place but in a litle bit "messy order". For instance, Saturn should be in Neptune's place - the line would be direct and closer and they wouldn't cross each other. What do you think?

Best regards

Kepler

Good afternoon,

Is it possible to turn the Libra (balance) sign in the zodiac more like the original symbol instead of looking like the ascending node?

Cheers,

Ptolemy

I don't see the option to change the orb at settings.js

Good morning,

I think astrochart is a very well written piece of code - congrats.

Still, I'm calculating several charts making several calls and I get this error:

Uncaught RangeError: Maximum call stack size exceeded at Array.sort (native)

The error occurs in in these lines:

astrology.utils.assemble = function( locatedPoints, point, universe){
	
	// first item
	if(locatedPoints.length == 0){
		locatedPoints.push(point);
		return locatedPoints; //================>
	}
	
	var isCollision = false;
	locatedPoints.sort(astrology.utils.comparePoints); //<<<< ERROR HERE

To be honest, I can't find "astrology.utils.comparePoints". The error occurs in dates which really have many planets near each other.

Can you please advise?

Kind regards

Kepler

Hey @Kibo,

Don't know if you heard about Hacktoberfest, it's a great opportunity to have nice contributions to your code.

To make this repo a valid one, you need to opt-in adding the topic hacktoberfest to this repo. As a participant of Hacktoberfest and a contributor, I'll be very glad if you could do this.

What does meaning addPointsOfInterest?
Does it influences the line of specs on the map?

None of the setting parameters below can be customized to a different SVG path.

	astrology.SYMBOL_ARIES = "Aries";
	astrology.SYMBOL_TAURUS = "Taurus";
	astrology.SYMBOL_GEMINI= "Gemini";
	astrology.SYMBOL_CANCER = "Cancer"; 
	astrology.SYMBOL_LEO = "Leo"; 
	astrology.SYMBOL_VIRGO = "Virgo"; 
	astrology.SYMBOL_LIBRA = "Libra";  
	astrology.SYMBOL_SCORPIO = "Scorpio";  
	astrology.SYMBOL_SAGITTARIUS = "Sagittarius";
	astrology.SYMBOL_CAPRICORN = "Capricorn"; 
	astrology.SYMBOL_AQUARIUS = "Aquarius"; 
	astrology.SYMBOL_PISCES = "Pisces";