Not sure this question is allowed here. I am not looking for an opinion but an answer on how to approach this. I am scratching my head where to find help on technically how to approach this.- not sure where else to look for it.
Rails 6.0
tailwindcss
stimulusjs
Here is my question:
I am plotting 2 axis of data (plan to use Chartkick & scattergraph). Once I plot them, I want to show them against a background image. I want to do it on a background like this?
[https://monosnap.com/file/4NNH3y9nOPxXFaClg661DQBw6ujyBe]
I am a novice on CSS. Is it just straight CSS? What is best approach to this? Raw CSS? Plugin? other?
Related
I'd like to make a 'dashboard' page and show some figures in a graphical nice way.
My idea is to use an Illustrator design, export it as SVG and change the charts with CSS according to the values from the database.
Like these elements: http://graphicriver.net/item/infographic-elements/2656503?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=REDPENCILMEDIA
I would like to use those donut charts to visualize percentages. But how do I adjust the graphic with CSS (or jQuery).
Found some tutorials on d3.js and other libraries, but I'd like to use the Illustator design instead of generating the graph. Been on Google for 2 days now..
Any tips, hints, links, etc are welcome! Thanks :)
I think this is what you've been looking for: http://www.chartjs.org/
It's a lightweight js-library that allows you to make piecharts, doughnutcharts, .. easily.
Pretty easy to customize too.
Customization is always a pain in the ass for such things, but starting from scratch is much harder, so i highly recommend this.
I was looking at https://stackexchange.com/sites where clicking on an image swaps with another seemingly random image, and it looks like a really cool effect, and was trying to figure out how it was implemented - is it some sort of plugin? Also not sure if there is a proper name for this effect - if so, what it is?
They are using a jquery plugin called isotope: http://isotope.metafizzy.co/
for similar effects http://stackexchange.com/sites
you can find from here: http://packery.metafizzy.co/
I am really hoping someone can help me. I am trying to create a round menubar in CSS and I've searched and searched for solutions but have found nothing. I know how to create round areas (by setting the radius), and I know how to create a simple straight line menu using <ul> & <li> but, as said, I want to create a round one.
there is a picture of something alike what I'd love to get working:
If anyone could help me on this I'd be so thoroughly grateful.
Closest things I know of are these:
http://www.cssplay.co.uk/menus/cssplay-round-and-round.html
http://codepen.io/tgrant54/pen/lBHwK
Is that what you're after?
This menu looks almost like Path's Button.
You can find the link to Path's Button here.
You just need to modify it a bit so the menu displayed in full sphere.
This isn't something you really want to be doing in pure CSS.
You may be able to make circle shapes with border-radius, but you're not actually making a circular object -- it's still a regular box shape as far as the browser is concerned, just with the corners rounded off. This has absolutely no bearing at all on your ability to do anything else to do with circles or curves in CSS.
Yes, it's possible to do something along the lines you're after, by putting every character into its own element, and styling each of them with a specific position, but that's going to be painful, inflexible, and difficult to work with. If you really want to do this, there's a code generator you could try out here, but I'd say you're barking up the wrong tree.
If you want to do this kind of thing properly, what you really need to be thinking about is doing it in graphical format, using either Canvas or SVG, plus plenty of javascript code.
I'd suggest looking into a JS library like Raphael for this; there are people who have tried similar things already using Raphael, which may help you -- see here, for example: Radial Pie Menu With Raphael JS
Hope that helps.
I've already asked a very similar question but that was using javascript/php - i've not had much luck finding an ideal solution so want try to emulate a chart using just CSS that looks similar to that below
As you can see the chart rows have a secondary element that is overlayed in a different colour & with a black border. This is the style that I am trying to achieve - can anyone suggest how to best go about this?
Can anyone suggest the best way to go about this possibly by creating another chart overlayed on top of another?
My attempt at doing the chart with pure CSS http://dabblet.com/gist/3142994
... and a second version with a lot less HTML and cleaner CSS: http://dabblet.com/gist/3143479
Instead of reinventing the wheel, in this case I'd recommend using an existing visualisation API. Google offer a fairly extensive one:
https://developers.google.com/chart/interactive/docs/gallery
If you're feeling adventurous and this isn't what you're after, use float: right; to align the left bars to the right.
I'm trying to create a symmetrical pie-chart with 6 pieces of 60 degrees each using html and CSS3 (only).
I've come across this article http://www.kylejlarson.com/blog/2011/how-to-create-pie-charts-with-css3/ but doesn't quite understand the concept.
Can anyone help me with it or explain what is .pieSliceBlue, .hold and .pie classes in the link above responsible for?
Try this:
http://www.elated.com/articles/snazzy-animated-pie-chart-html5-jquery/
It is far more easier to use this JQuery and CSS, just need to give the values and pie chart will be created automatically.