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)
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.
I suppose it's an Indian astrological chart, something I alas know nothing about.
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.
Maybe an image map could be used?
Could CSS help with this?
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?
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
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.
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.
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;
}}
Hi there sujatha,
check out the attachment below to see a fully responsive example.
North_Indian_Astrological_Chart.zip ( 1.47k ) Number of downloads: 625
...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.
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,
...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.
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.
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?
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.
Thank you so much!
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.
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.
Thank you so much!
To whom are your thanks directed and for what?
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?
I'm just curious about different approaches and solutions.
That's OK then. I'm really happy with that.
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.
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)?
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.
I still don't understand how the Indian astrology charts work.
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.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)