How to draw vertical Bars with dygraphs - javascript

I use R implementation of dygraphs to generate interactive charts in R. By default, it plots line chart of supplied data. However I would like to have vertical bars instead of line chart for below data -
library(dygraphs)
dygraph(mdeaths)
Appreciate if someone can give me any pointer to implement the same, as I failed to find any option to do the same.

Try dyBarChart
library(dygraphs)
dyBarChart(dygraph(mdeaths))

Try with Dygraphs plotters plugin. Have a look at below links for the implementation of Dygraphs Bar Chart implementation.
https://github.com/danvk/dygraphs/blob/master/tests/plotters.html#L97
http://dygraphs.com/tests/plotters.html
Maybe it can help you.

Related

is it possible to do range bar chart with curve line ( S Curve)

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

Which chart module/library should I use for Candlestick graphs in ReactJs?

I tried using apex charts, but did not find proper doc for the react-apexcharts. I also tried react-google-charts, although it works fine, but it has unwanted spaces on sides which spoils the layout. I'm not sure about which module to use. Do you have a suggestion??
Author of ApexCharts here.
Thanks for reminding me to update the docs for the candlestick charts.
Here is the page that explains what should be the data-format.
Also, there is no major difference in options if you use react-apexcharts. The series prop should be given the required format as specified in the docs and rest will fall into places.
For those who are still asking which library to use for candlestick graphs.
Take a look Highcharts Highcharts candlestick graph
Good documentation and great features

Custom JS chart similat to a vertical progress bar

I am searching for a JS chart like in the image. I got it from an excel file. The percentage is incorect, it should be from 0 to 100%. Does anyone know a library which provides this kind of chart ?
Seems like you're looking for a bullet chart. Most of the major charting libraries provide bullet charts as a standard chart type. You could also implement it as a column (vertical bar) chart with some additional styling.
Here is a ZingChart demo of a vertical bullet chart with an area marker and here is a similar demo implemented as a mixed chart - a column chart and a scatter plot marker for the "goal" line. Both replicate your image.
I'm on the ZingChart team, so don't hesitate to reach out if you have any questions!

how can i plot 2 dimensional bar chart with a jquery library?

I couldn't find any jquery library that can plot 2 dimensional bar charts (if i name it true). I want to plot a graph like this;
As you can see there are 2 variable for each bar. Width and height. But i can only change height of the bar charts in every library i tried.
I want to give 2 interval for each variable and plot a rectangle.
Can you help me to find a library that can plot it or share some information about it?
Thank you.
I found the answer with luck. It is called Marimekko graphs and you can plot it with this javascript library.
http://www.mekkographics.com/free-trial/ or
http://www.fusioncharts.com/charts/marimekko_2/
It solves many problems to know its name. You can search for marimekko charts. Also there are lots of free codes in internet like;
http://bl.ocks.org/mbostock/1005090
https://gist.github.com/mbostock/1005090
d3.js how do I add text to Marimekko chart
http://www.jqplot.com/deploy/dist/examples/mekkoCharts.html

ready to use dynamic pie chart in d3.js

I am evaluating to change the graphics I generated so far using highcharts.js to d3.js
just for fun and I want to learn how d3.js works.
I wonder if there is something similar to the url below (see if you click on a pie it gives you new data), something dynamic and ready to use (or not to implement from zero).
What I wanna achieve, more or less...
http://lully.snv.jussieu.fr/gbif/mapping/graphs/examples/pie-legend.htm
thanks in advance
Pere
If you want to replace Highcharts, I think the only good open-source alternative available at the moment is Bob Monteverde's Novus charts library: http://novus.github.com/nvd3/. NVD3 has a nice pie chart and also has good legends. Take a look at all the charts from this library and you will see what I mean. You can also find a good pie chart in Stephen Boak's tutorial: http://blog.stephenboak.com/2011/08/07/easy-as-a-pie.html. Another interesting option is to look for Frank Guerino's questions on the D3 js google group. I would use NVD3 if I were you. It might need some adjustments, but it seems to be the best option currently. Good luck!
Simple function to generate Pie Charts utilisiing d3.js. This function is part of the http://xhprof.io/ project. It is able to handle datasets of arbitrary size. It has several options that allow for customisation, such as the label margin, circle radius and visibility of the percentage data (refer to the source code).
The demo is available at https://dev.anuary.com/858b33b7-bd66-507b-a9f1-533e4de79ba3/. The source code is available at https://github.com/gajus/pie-chart.

Categories