Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ General Web Design _ Chart in HTML CSS
Posted by: sujatha Nov 18 2023, 09:27 AM
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.
Attached thumbnail(s)
Posted by: Jason Knight Nov 18 2023, 06:12 PM
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.
Posted by: Christian J Nov 18 2023, 08:20 PM
I suppose it's an Indian astrological chart, something I alas know nothing about.
Posted by: pandy Nov 19 2023, 07:53 AM
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.
Posted by: Christian J Nov 19 2023, 08:57 AM
Maybe an image map could be used?
Posted by: CharlesEF Nov 19 2023, 12:56 PM
Could CSS help with this?
{
transform: rotate(45deg);
}
Posted by: pandy Nov 19 2023, 09:32 PM
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?
Posted by: sujatha Nov 20 2023, 02:31 AM
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
Posted by: pandy Nov 20 2023, 05:01 PM
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.
Posted by: pandy Nov 20 2023, 05:49 PM
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.
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 }
<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>
Posted by: sujatha Nov 21 2023, 07:51 AM
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;
}}
Posted by: coothead Nov 21 2023, 11:05 AM
Hi there sujatha,
check out the attachment below to see a fully responsive example.North_Indian_Astrological_Chart.zip ( 1.47k ) Number of downloads: 294
coothead
Posted by: CharlesEF Nov 21 2023, 08:08 PM
Hi there sujatha,
check out the attachment below to see a fully responsive example.
North_Indian_Astrological_Chart.zip ( 1.47k )
Number of downloads: 294coothead
Looks good to me but what do I know? Nice job.
Posted by: coothead Nov 22 2023, 01:35 PM
...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 - https://forums.htmlhelp.com/index.php?showuser=28719
had actually suggested it's possible suitability earlier in this thread.
coothead
Posted by: pandy Nov 23 2023, 02:27 PM
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,
Posted by: pandy Nov 23 2023, 02:31 PM
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.
Posted by: CharlesEF Nov 23 2023, 02:58 PM
...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 - https://forums.htmlhelp.com/index.php?showuser=28719
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.
Posted by: coothead Nov 23 2023, 03:21 PM
...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
Posted by: coothead Nov 23 2023, 03:32 PM
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
Posted by: coothead Nov 23 2023, 03:53 PM
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
Posted by: pandy Nov 23 2023, 09:14 PM
I couldn't copy.
Right, and a DIV is equivalent to a para or a heading. No need to bother with all those other pesky elements anymore.
Posted by: CharlesEF Nov 24 2023, 01:34 AM
North Indian Astrological Chart.
coothead
No, I mainly code business software.
Posted by: sujatha Nov 24 2023, 06:56 AM
Thank you so much!
Posted by: Christian J Nov 24 2023, 07:48 AM
I'm still not sure of the structural/semantic meaning of the rhombuses/triangles in the Astrological Chart. But if the diagonal lines are mostly decorational, maybe you could just create them with a single background image (using CSS background-size to fit the container)? But you'd still need to place the text's HTML elements between the lines with CSS, which might be fragile of course.
Posted by: coothead Nov 24 2023, 08:58 AM
I'm still not sure of the structural/semantic meaning of the rhombuses/triangles in the
Astrological Chart. But if the diagonal lines are mostly decorational, maybe you could
just create them with a single background image (using CSS background-size to fit the
container)? But you'd still need to place the text's HTML elements between the lines
with CSS, which might be fragile of course.
As Jason Knight pointed out here...
https://forums.htmlhelp.com/index.php?s=&showtopic=61411&view=findpost&p=146708
...that SVG was a reasonable way to go, and as I fully trust his judgement in these
matters, I went straight ahead and provided a coded example.
As far as I can see my example works perfectly well.
What I cannot see, though, is why you keep on beefing about it.
coothead
Posted by: coothead Nov 24 2023, 09:05 AM
Thank you so much!
To whom are your thanks directed and for what?
coothead
Posted by: coothead Nov 24 2023, 09:19 AM
No, I mainly code business software.
So why the interest in general with the "General Web Design" forum
and in particular with the "Chart in HTML CSS" post?
coothead
Posted by: Christian J Nov 24 2023, 12:18 PM
What I cannot see, though, is why you keep on beefing about it.
I'm just curious about different approaches and solutions.
Posted by: coothead Nov 24 2023, 02:03 PM
I'm just curious about different approaches and solutions.
That's OK then. I'm really happy with that.
coothead
Posted by: CharlesEF Nov 24 2023, 02:16 PM
and in particular with the "Chart in HTML CSS" post?
coothead
Like Christian J, I like to see how things are done. And since most of my software is for use on the web now I've been using HTML since version 3.2.
Posted by: coothead Nov 24 2023, 02:41 PM
Like Christian J, I like to see how things are done.
In that case you may find enlightenment here...
https://developer.mozilla.org/en-US/docs/Web/SVG.
coothead
Posted by: Christian J Nov 25 2023, 05:38 AM
I still don't understand how the Indian astrology charts work. Are the 12 Houses and 4 Quarters related to each other like tabular data, or is it more like a "circular list" (similar to an analog clock face)?
Posted by: coothead Nov 25 2023, 11:35 AM
I still don't understand how the Indian astrology charts work.
Me too.
But then I have always treated astrology as total bunkum.
All that I did was to create the twelve containers into which
the astrological bullshit might be placed.
Create your own personal chart here...
http://www.mysticscripts.com/astrology/vedic-astrology/vedic-astrology-charts/rashi-chart-north-indian-style/index.php
Of course, don't expect the result to make you any the wiser.
coothead
Posted by: Christian J Nov 25 2023, 05:27 PM
I still don't understand how the Indian astrology charts work.
[indent]
Me too.
But then I have always treated astrology as total bunkum.
That's another issue --perhaps a skilled practicioner of astrology* can use the charts on his clients in a similar to Rorschach tests. But besides the effect on humans, the astronomical foundation of astrology seems logical (apparently Galileo and others did astrology too).
http://www.mysticscripts.com/astrology/vedic-astrology/vedic-astrology-charts/rashi-chart-north-indian-style/index.php
That page generates an image of the chart, but no information on how to interpret it (maybe the latter is how astrologers make money). Perhaps the Houses make up a circular array, where the indexing varies depending on birth date? Or do the Houses interact with each other in more dimensions?
* Our forum software seems to censor the term for "practicing astrology" (*spam*).
Posted by: coothead Nov 25 2023, 06:11 PM
That page generates an image of the chart, but no information on how to interpret it.
I am surprised that you actually want/need to do that.
Perhaps, this site...
https://manifestinghumandesign.com/vedic-chart-calculator/
...might possibly satisfy this unexpected curiosity.
coothead
Posted by: Christian J Nov 26 2023, 07:25 AM
I am surprised that you actually want/need to do that.
How the Houses relate to each other might determine the HTML structure. Maybe it's just a simple list of name/value pairs, but for a while I was hoping for some kind of multidimensional array.
https://manifestinghumandesign.com/vedic-chart-calculator/
...might possibly satisfy this unexpected curiosity.
Thanks, that seems informative, can't say I understand much though. I've actually taken a general interest in Indian culture for some time.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)