Are there any javascript charting scripts / frameworks that support a drill down 'Diskring' style chart? as shown below, when you click on a section the chart should reanimate to the next level.
Yes, take a look at D3.js sunburst diagram
Related
I am looking for this solution. I would like to know how to recreate this style of the stacked bar chart.
I will use this to indicate the status of the machinery during the day. so the color can be used more than once like in the picture.
Show picture of Example graph
Would suggest you to use any library -
Chart.js is good one that I have used and they do support stacked-bar graph
https://www.chartjs.org/docs/3.5.0/samples/bar/stacked.html
They have a good document also on how to use it.
I have been using plotly but it doesn't support images or other custom designs inside the hover tooltip.
What javascript / react packages have highly customizable tooltips? I just need it for a scatter plot and bar chart
I think Apache ECharts might help you on that, it is really customizable (open source!) and has good documentation.
Some links for the stuff you are looking to work on:
Scatter Plot examples: https://echarts.apache.org/examples/en/index.html#chart-type-scatter
Bar Chart examples: https://echarts.apache.org/examples/en/index.html#chart-type-bar
Tooltip documentation: https://echarts.apache.org/en/option.html#tooltip
Recharts seems to have a custom tooltips supported, should work:
https://recharts.org/en-US/examples/CustomContentOfTooltip
In my project I work on a web app that shall provide interactive charts to the user. Interactive is meant in that way that the user can adjust single data points by dragging them around in chart.
More specifically, assume a line chart consisting of six data points. The user clicks one data point and drags it to different coordinates within the chart (drag and drop). Afterwards the line should be rendered again considering the adapted coordinates.
I had a look into Chart.js already but found that this feature is not provided out-of-the-box. I rather have to implement that myself.
Are you aware of any chart library for JS that provides such feature?
UPDATE
Meanwhile I found two potential solutions:
Plugin for Highcharts
Draggable charts of FusionCharts
You can take a look to D3.js, it's battery-included and drag&drop is supported too.
But you have to make the chart in HTML/CSS yourself.
I am trying to develop an interactive chart using Vega-Lite but I am not able to find any documentation that refers to interactive chart, mainly eventlisteners.
So, wanted to know if Vega-Lite has that capability.
Please help me here as I am a newbie and really need to develop an interactive chart preferably using Vega-Lite, if possible; otherwise I will go with Vega.
No. Vega supports everything that vega-lite does, as vega-lite is compiled into vega code. However, vega-lite does not support everything that vega does.
However, if you want to use vega-lite, but want to take advantage of a feature available only in vega (like interactivity), you can start with vega-lite code, convert it into vega code (the online vega editor allows this) and then continue editing the vega code.
Specifying interactivity in Vega-Lite will be possible as of some time in mid-2017. Here is the announcement, including a paper and a demo video: Vega-Lite: A Grammar of Interactive Graphics
As the accepted answer said: No.
Let me provide examples:
SVG graphics support: You can't choose how to render your chart (image, svg) in Vega Lite.
Week timeunit support: You can set timeunit to "week" only in Vega, this missing property is particularly frustrating.
Select drop-down lists: Adding drop down lists that update chart upon selection are available only in Vega.
Some Donut chart styling properties: Vega privdes more options to customize the look of the Donut chart.
I have to draw a stacked column chart in a php web. The chart must has lines connect assosiated stacks in itself, and that is the important thing I don't have solution for. The chart look like this
Do you have any ideas to draw this? I precious you helping so much!
I would check out https://developers.google.com/chart/ or YUI Charts.
I'm using d3.js for these kind of visualizations. This is a pure JavaScript library which you could use easily. Take a look at this and update for yourself as you wish: http://bl.ocks.org/mbostock/3886208
Or a list of available charts: https://github.com/mbostock/d3/wiki/Gallery