Looking for a way to implement something similar to the prototype on the picture.
I went through the Highcharts docs, but it seems that the only way to achieve this is to extend Highcharts with some custom code. Are there any other options?
A different library would work too, however Highcharts is already used in a bunch of other screens of the app.
Related
I'm trying to setup a graph that looks somewhat like this:
The graph consists of two data series, one for the stacked and another for the averages. Pay attention that is has two x-axis (multiaxis).
Looking at the ChartJS documentation, mixed graph types are possible, but not for stacked horizontal bars. Other articles seem to outline this as well, like this one on Alligator.io. I've yet to see any chart library to showcase such an example even.
Question is therefore if this is even possible, or if I should look into alternate approaches instead.
Currently it's not possible (only proof I could find right now).
The next version of chart.js will be 3.0 which has many major impovements, including changes to the horizontal bar chart, verbatim "Remove horizontalBar and make all charts capable of being horizontal". I think it will be possible with this version. But unfortunately not now.
I would like to plot price data and include a size attribute to each point so each data point would be (time, price, size=100) for instance. The canvas should plot the price data as a line but when hovering the mouse over the plot, I would like to be able to see the size at that point. I've accomplished this using jfreecharts in Java but I'm looking for something in the javascript space like d3.js or similar that might be able to achieve this. Any recommendations on charting libraries to try?
d3 is great, and probably the most flexible out there, but can be complicated, depending on your level of javascript. I think the most popular and easy to use libraries are:
Chartjs,
Google charts and
ECharts
If you're a beginner, checkout something like Anychart playground
I have imported the lib: angular-chart.js
Now i am trying to make a chart that contains both a bar graph and a line graph
Sadly though the documentation does not specify how i can achieve this.
Does anyone have any experience with this and know how i can accomplish the issue?
And know if it is even possible since the creating is rather different since you are using 1 canvas to contain your chart
Try Highcharts ng
Here is Angular Highcharts
Highchart bar-line chart example Bar-line
There are many questions out there relating to issues with chart.js re-sizing charts if the same canvas is reused (on some devices). Most of the answers refer to the fact that you need to "destroy" the chart before reusing.
pie = new Chart(pieContext).Pie(data);
and then next time, before doing the above call
pie.destroy();
And in hindsight, this appears to work. However, I had already moved onto using ChartNew.js (https://github.com/FVANCOP/ChartNew.js/) as it seems to have some enhanced functionality above (and was based on) chart.js.
NewChart.js experiences the same 're-sizing' issue, but does NOT seem to provide a destroy() method on the chart object.
How do I fix the re-sizing issue? Is there a destroy() equivalent on ChartNew.js?
Or.. Is there an alternative free library that will allow me to display Pie charts, with the data values written inside the segments and a legend down the right-hand side?
I've read a couple of posts to the developer or ChartNew.js and it seems like functions like destroy() or clean() are missing from the original Chart.js
Now, I'm not familiar with the library but maybe this thread lights up one of your lightbulbs.
Sorry if not very useful :)
I am trying to learn D3 JS and how it can be applied in current application.I am new to this application.
While going through the application I found that there is already a feature providing data visualization in the form of graphs using EXT Js charts.
Could anybody help me understand the advantage of data visualization using ext js over D3 JS and is there any reason for going with one over other? Thanks in advance.
ExtJS is a commercial web app framework for many things including data visualization. D3.js is an open source low level library for creating svg-based charts.
The first question you need to figure out is if you only want charts or all the features that come with ExtJS.
If you just want to draw standard charts (bar, line, area, pie etc.) you may consider using highcharts, google charts, or a higher level library on top of d3.js such as nvd3.js or Rickshaw since they are easier to use. Otherwise if you want a very non-standard and customized chart, d3.js is very powerful for implementing any possible kind of visualization.
D3 is just for visualization, ExtJS is a full framework that hast a lot of other components (grids, windows, layouts, etc...).
Also ExtJS doesn't get well with other libraries, since it overrides several things in the global CSS.
Therefore, if you have a full page that has more than just graphs... feel free to use ExtJS for the whole page, but if you already have something else on the page, then go for D3.