Show values on each column in Chart.JS - javascript

I am working with Chart.js (http://www.chartjs.org/docs) and I am dealing with some problems here.
Is it possible to show values for each data point? It seems it is lacking that functionality or am I wrong?
I am also using the stacked bar chart (with additional line chart applied on it) so I would like to show the value for each data point for these two bar data sets (excluding the Line chart)
The app is made with Ionic 2 (Angular2) and it seems, that I don't have all of the possibilites to call different helpers provided by Chart class. I see that a lot of examples include such things.
Is it safe to use this in production, regarding the support of the project?
Thank you very much in advance!

Related

Adding a slider to a High Charts Treemap

I pretty new to both Highcharts and Javascript. I would am working on a treemap and would like to incorporate a slider to filter out datapoints based on their value key.
I am trying to use the slider code from this: http://jsfiddle.net/BLKQf/
When I integrate it into my code, the slider doesn't actually show up and my chart is not showing up.
http://jsfiddle.net/56huej7j/
I think it may be because my Data is in JSON and not a list (as in the sample), but I don't know enough javascript to fix it.
EDIT:
I got it working. Working solution at:
http://jsfiddle.net/8n3hfcn8/
You've got a few problems:
Missing an ending });
Not including jQueryUI (look at the javascript dropdown in the javascript panel. The 1st referenced fiddle includes jQuery UI 1.9.2
You are not setting the data correctly for a treemap.
http://jsfiddle.net/56huej7j/1/

D3.js boxplot - turn outliers on/off

I am using this (http://bl.ocks.org/mbostock/4061502) implementation of boxplot in d3.js.
Could someone please help me with implementing a checkbox that would allow me to dynamically turn the graphing of outliers on/off. As a result I would like to see the outliers removed and the y axis adapt itself to show a clearer view of the boxplots. Ideally you can implement this within the box.js file from the given implementation by adding a drawOutliers parameter.
In the sample below you can see my problem (it sometimes get's so bad you can't even see the boxplots).
My problems are implementing it in JS using d3 and selecting a good way of filtering them out from the data (simply not plotting them or filtering the data, #1 seems better).
Please do not get into discussions as to why it is bad to hide/ignore outliers, etc. I am not ignoring/deleting them, I just need a clearer view of the rest of the graph.
Thank you!

Pareto Chart/Graph using Javascript/Html/JSON

Im trying to find any plugins, examples or related resources on how to built a Pareto Chart for an html page. I'd like to be able to built it out of html, style it w/ CSS and populate data via json. Im willing to build it out of scratch by using a combination of a line graph and bar graph, however want to be sure there isnt anything already out there for this.
Here is an example of the output i hope to produce
Based on my searches i can only seem to find How-To's, Examples, etc on how to build one in Excel, however nothing for the web.
Any ideas or suggestions are greatly appreciated.
Pareto charts come standard in quite a few JS charting libraries. Here's a demo of one in ZingChart.
You can view the docs for creating pareto charts here. I'm part of the ZingChart team, and you're welcome to reach out to us if you have any questions at support#zingchart.com.
I am not sure from your description whether you would like to build from scratch or if you want to use a charts package. Normally, I would avoid re-inventing the wheel, but I sometimes do a challenge to learn. Below are a few links to pre-made packages of javascript charts that can do pareto, found with a google search (javascript pareto chart -excel -matlab).
http://cyberpython.github.io/AwesomeChartJS/ is apache 2.0
one of the better paid-for versions is http://www.dundas.com/ but there are others.
Sorry that this is a list of links. I would like to be able to rattle off the method from my memory, but I do not do HTML charts as much as I would like to.
It seems some of the options aren't free and/or open source :(
For building from scratch, or at least basing on common libraries, d3 might be a good choice. I ran into a similar issue looking to generate histograms with a cumulative frequency line included in the chart, and to build my own based on some examples. I then investigated further for options for pareto charts and sorted histograms.
If you want to try it with d3, here's some examples to start from (they're not as pretty rendered like the other answers, but a charting/UI web developer can prettify it I'm sure):
a basic d3 pareto chart based off Excel example
a histogram-based pareto chart in d3 - at the time of this post, this d3 sample is incomplete

d3-tooltips for multiple linked dc.js charts

I'm looking to modify the out-of-the-box tooltips for dc.js, and it seems there is a solution using d3.js tooltips as in this question. However, I'm confused about how to implement this so that the tooltip is modified for all linked graphs in a dc.js dashboard. The examples in the GitHub repo lend themselves well to individual graphs, but I'm currently working with six linked graphs and need to modify tooltips on all graphs. Any help would be appreciated.
Here is a good example of using d3.tip with dc.js:
http://saraquigley.github.io/uc-trends/
http://saraquigley.github.io/uc-trends/javascript/expenses_all.js
The things I would do differently are
do the selectAlls that apply the tips (at the end of her code) in a chart.renderlet(function(chart) { ... }) instead of at top-level, so that they react to changes in the charts.
use chart.selectAll instead of d3.selectAll, for clarity and to be sure that you are only selecting elements in the particular chart rather than across the page.
Hope to work up an example for web/examples or the FAQ but HTH for now.

ask for a lightweithg jquery based chart lib

I have to build some chart in my page,I use extjs chart now,but I found it is rather heavy...
Through the google,there some jquery based lib,but I have no idea which is better,and it seems test them one by one is not a good idea,so I ask you guys if you have any experiences?
I just care the following points:
1)support drawing chart based json
data.
2)reload chart when data refreshed.
3)easily and readable coding
4)the less thrid-part lib needed,the
better.
flot
ticks all your boxes. I have been using it, seems pretty slick to me.
Flot supports column-line combined chart, thats actually why I used it, see here and here for a more comprehensive list of functionality.
I like Flot, which does most of the things you require.
Here's a good list of charting libraries for jQuery:
http://www.reynoldsftw.com/2009/02/6-jquery-chart-plugins-reviewed/

Categories