Chart in HTML CSS, Astrological chart Options

[sujatha]

I want to make chart using html css design, I have attached design I tried table, tr, td, it didn't work since it is combination of square and triangle. Is there any way to make this design happen? After this code design, i will take care of value passing to all squares and triangles. I need just that diagram code or support. Thanks for your support.

[Jason Knight]

What makes that image a "chart"? What's the DATA? What are the semantic relationships of your data-points to each-other?

HTML is for saying what things are, not what they look like. CSS is appearance, but ... well, I'm guessing but I think whatever you are trying to do is beyond its capabilities.

This might be SVG or maybe JavaScript + <canvas>'s job.

[Christian J]

I suppose it's an Indian astrological chart, something I alas know nothing about.

[pandy]

How did Meyer create that chistmas tree again? But I assume the rhombi will be filled with content, so probably whatever method he used wouldn't work.

[Christian J]

Maybe an image map could be used?

[CharlesEF]

Could CSS help with this?

CODE

table
{
  transform: rotate(45deg);
}

[pandy]

I think it could! And assuming the content should not be tilted it could be rotated back again. Not the TDs, because the borders are needed, but a DIV or something inside the TDs. But how to crop the not needed bits off in a not too nasty way?

[sujatha]

Thanks for all your feed backs, yes it is North Indian style Astrological Chart. Nodejs generated Data is ready to pass on each square and triangle. I already created south indian hora chart using table successfully. Just need html , css diagram for that.
Thanks,
Sujatha

[pandy]

Could you show us how a complete chart with data looks? An image would be fine. Just want to get a grip of how it looks.

[pandy]

OK, using CharlesEF's idea, I came up with this. It's messy, but I can't think of another way. And I haven't figured out how to put a border around the whole thing - I think there is one in your image. I'd still like to see how the content looks. Maybe it isn't needed to rotate it back.

Note that when the table is rotated it sticks out of the box, so to speak. It even sticks out of the viewport. Hence the margins. This may make it hard to place on the page.

CODE

table    { transform: rotate(45deg);
           empty-cells: show;
           border-collapse: collapse;
           margin: 10em 0 0 10em }

td       { border: 2px solid;
           width: 6em; height: 6em }

td div   { transform: rotate(-45deg) }

#a .a    { border: none }
#a .b    { border-style: none solid solid none }
#a .c    { border-style: none none solid solid }
#a .d    { border: none }

#b .a    { border-style: none solid solid none }
#b .d    { border-style: none none solid solid }

#c .a    { border-style: solid solid none none }
#c .d    { border-style: solid none none solid }

#d .a    { border-style: none }
#d .b    { border-style: solid solid none none }
#d .c    { border-style: solid none none none }
#d .d    { border-style: none }

HTML

<table>
<tr id="a">
<td class="a"></td>
<td class="b"></td>
<td class="c"></td>
<td class="d"></td>
</tr>
<tr id="b">
<td class="a"></td>
<td><div>qwerty</div></td>
<td><div>qwerty</div></td>
<td class="d"></td>
</tr>
<tr id="c">
<td class="a"></td>
<td><div>qwerty</div></td>
<td><div>qwerty</div></td>
<tdv class="d"></td>
</tr>
<tr id="d">
<td class="a"></td>
<td class="b"></td>
<td class="c"></td>
<td class="d"></td>
</tr>
</table>

[sujatha]

Thank you so much for all your support putting together. I am sending code for south indian chart as you are interested, i may change height width later with little updates...

#######HTML ##########
<h4>South Indian Chart</h4>
<table className="tableA">
<tr>
<td id='Pi'>{PiVal}</td><td id='Ar'>{ArVal}</td><td id='Ta'>{TaVal}</td><td id='Ge'>{GeVal}</td>
</tr>
<tr>
<td id='Aq'>{AqVal}</td><td className="col">Rasi Chart</td><td></td><td id='Ca'>{CnVal}</td>
</tr>
<tr>
<td id='Ca'>{CpVal}</td><td></td><td className="col1"></td><td id='Le'>{LeVal}</td>
</tr>
<tr>
<td id='Sa'>{SgVal}</td><td id='Sc'>{ScVal}</td><td id='Li'>{LiVal}</td><td id='Vi'>{ViVal}</td>
</tr>
</table>

########### CSS###########
.col {
border-right: hidden;
border-bottom: hidden;
}
.col1 {
border-left: hidden;
border-top: hidden;
}
.tableA {
border-collapse: collapse;
/* border: 2px solid #ff4d00;*/
background-color:rgb(244, 244, 216);

inline-size: 2px solid;
height: 400px;
width: 600px;
margin-left: 10%;
&td, th, tr{
border: 1px solid #402cef;
text-align: center;
table-layout: left;
font-size: 15px;
}}

[coothead]

Hi there sujatha,

check out the attachment below to see a fully responsive example.

 North_Indian_Astrological_Chart.zip ( 1.47k ) Number of downloads: 96

coothead

[CharlesEF]

Hi there sujatha,

check out the attachment below to see a fully responsive example.
 North_Indian_Astrological_Chart.zip ( 1.47k ) Number of downloads: 96


coothead

Looks good to me but what do I know? Nice job.

This post has been edited by CharlesEF: Nov 21 2023, 08:09 PM

[coothead]

...but what do I know?

Well, hopefully, you now know how useful SVG can be for this type of task.

Also. you might have noticed that our resident coding guru - Jason Knight
had actually suggested it's possible suitability earlier in this thread.

coothead

[pandy]

Looks good, but I thought the purpose was to have some kind of structure. The text can't be copied and the chart can't be printed either. That could be problematic, I think,

[pandy]

Thank you so much for all your support putting together. I am sending code for south indian chart as you are interested, i may change height width later with little updates...

I meant I wanted to actually see the content. But I googled and know now it's just text, and horizontal at that. At least the charts I found looked like that.

[CharlesEF]

...but what do I know?

Well, hopefully, you now know how useful SVG can be for this type of task.

Also. you might have noticed that our resident coding guru - Jason Knight
had actually suggested it's possible suitability earlier in this thread.

coothead

To be honest, in all my years of programming I've never had the need to use an SVG. So, I know nothing about it.

[coothead]

...but I thought the purpose was to have some kind of structure.

Well, the svg element which I used may be considered as equivalent to
your table element and the path element may, likewise, be considered
as equivalent to your td element.

Also note that all the content items of the chart may be positioned
precisely in the totally responsive container.

Personally, I believe that using SVG is the perfect solution to the
O.P.'s problem.

coothead

[coothead]

To be honest, in all my years of programming I've never had the need to use an SVG.

Luckily for you, it seems that you have never needed to code a...
North Indian Astrological Chart.

coothead

[coothead]

The text can't be copied

The text from each "House" may be copied

and the chart can't be printed either.

So, what is wrong with taking an image?

coothead