I want your opinion on how to create this materializecss admin dashboard line and bar charts moving from right to left with changing timelines
I have look at chartist.js and its animations, I didn't see it there. Please how I can achieve this marquee effect on the line and bar charts?
Thanks to #Lieutenant Jim Dangle and #Karthik VU. I found their comments useful. A look at path transition of D3.js https://bost.ocks.org/mike/path/ and Animating path at http://bl.ocks.org/duopixel/4063326 and also Spline updating using Highcharts http://www.highcharts.com/demo/dynamic-update answer this question.
Related
I'm using Charts JS and I'd like to create some custom Labels on a Stacked Bar Chart. I'm trying to recreate this following chart:
How do I create custom labels as circled in Red above? I'd like to link to other pages with these labels. Actually the bolded text would link to one page and the normal text would link to another page.
Also How would you label each bar in a way that the values drop down off the bar when there is not enough room to display it on the bar? See the "4%" or "6%" on the right side of the graph.
I also want to know how to put a margin spacing between each stacked bar. See the vertical white space between each bar on the image above.
Any help with the issues above would be greatly appreciated. Thanks.
I ended up creating my own chart using div and widths. Sometime you have more control over look and feel if you build it your self.
so i have this simple bar chart in plotlyJS, and it was requested that when a bar is higher compared to the other, it has to break to not display the entire bar, so that it does not shrink the others.
This is a simple image of my chart, i don't put the code because you know plotly has kind the same structure for all the charts.
And what i want to do is this is if is possible
Any information would help me, thanks!
This is not possible to do with Plotly.js at the moment.
I attached the graph I want to achieve.. can you recommend any library/ how to do this kind of graph?
I looked at libraries such as charts.js, anycharts,canvasJs, High Charts (has payment client wouldn't like that) One interesting I found is Google Charts' Combo chart but have no idea how to do it.
https://i.stack.imgur.com/hm5uf.png
I used d3 Line chart and append it on top of the progress bar chart. since it's an svg the background is transparent. hope that helps someone
As title sais. What I'm looking for is actualy more of a bar chart with only one axis and multiple bars overlapping. Sorry, hard to describe. I drew a sketch:
Note: It's not a stacked bar chart!
Thanks guys!
Finally I've found what I was looking for.
It's called a "Linear Gauge" and I realized it with chart.js using a gradient as background and hiding the y-Axis.
I have finally tried to rebuild my 12 month old project better.
What I Have:
A Doughnut Chart (chart.js) with an Accordion (jqueryUI) for the details.
When I click on a part of the doughnut, the Accordion on the left shows the Details (Text) for this Segment.
I would like to redesign the Tooltips as you can see in the both screenshots
where can i change the positioning of the Tooltips to be around the Chart and not on it? anyone any suggestions? all i can see in the Code is just the behavior to put the arrow above or below the tooltip...
thanks for help