Develop Reference

Javascript chart library where you can attach extra data to each point

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

Implement a custom Y axis in chart.js using an array of values

I was unable to find the answer to this question. I'm a relative beginner in Javascript and chart.js, and I'm having a problem with customizing a line graph. I want to graph the difficulty of rock climbs, which use something called the Yosemite Decimal System. Is there a way to provide an array of values for the Y axis? Here is a short example of an array of climbing route values:
["5.10a", "5.10b", "5.10c", "5.10d", "5.11a", "5.11b", "5.11c", "5.11d", "5.12a"]
Is there a simple way to provide something like this as a scale for the Y axis? Or is it more complicated, necessitating the use of a comparator function or something like that?
Thanks!

Draw special line with js framework

I want to draw a line with x and y axis like this .
I searched Google and have found an example based d3. It can draw spline chart, but i can not find the kind of chat.
Can d3 or c3 or any others framework draw line like this? What function should I use?

This is a simple Line chart, Given that you provide the correct data points. You can easily draw that. We cannot help you since you have not shared your work.
Check this link for more info.

D3.js (Wilkinson type) Dot Plot Example

I've searched, but been unable to find an example of a dot plot in D3. Is anyone aware of this type of plot having been implemented in any of the charting libraries built on D3, or an example in base D3?
Just to be clear, a dot plot is similar to a histogram except that points are stacked on top of one another in place of a histogram's bars. In R this can be created using the ggplot package.
qplot(x=rnorm(200),geom="dotplot")
Edit:
So as Lars pointed out, the answer to this question solves the problem when the data has been aggregated into an array with the number of points in a column. In my case, I want to display interactive information about each of the points (e.g. a tool tip with the actual underlying data value), so I can't aggregate in this way. Here is some example data that I'd like to plot.
data = [0.4897,0.7685,-0.7367,-0.7483,-0.5149,0.0448,-1.7294,1.8667,1.0116,0.3896,-0.4267,-0.1161,-1.4618,-1.3198,-1.999,1.2883,1.7123,-1.5902,-0.7937,1.0359,-0.485,-0.2391,0.4136,-0.2506,0.7333,1.1902,0.7132,-0.3096,0.4793,-0.7779,-0.19,-0.0855,1.4498,1.0196,0.537,0.5341,0.5363,0.2664,-0.8586,-0.5667,1.2263,1.508,-0.139,-0.3015,-0.3679,0.483,0.9381,-0.1298,-0.1024,1.3079,-0.9554,1.167,0.3245,1.0424,-0.3589,1.3943,2.2537,-1.3225,0.8814,-0.2723,0.3782,0.8982,0.4167,0.1614,0.5659,-0.4672,-0.7634,-0.8591,-1.0887,0.4374,0.3618,-0.7074,-0.9812,-0.6216,1.0774,0.9979,-0.799,1.186,0.5704,1.8626,1.4321,0.3179,1.6356,0.1646,2.1265,-0.2409,0.0043,1.1503,-1.615,-0.677,-0.5573,1.9954,0.8123,-0.8011,0.2088,0.5007,0.9113,-0.8742,-0.5857,0.409,-1.0702,-0.016,0.6822,1.0133,-1.2022,0.0561,0.8704,-1.5982,1.6676,-0.0344,-1.739,-2.0362,-1.1955,0.7838,0.5037,-0.2123,0.2951,1.0192,0.97,0.2384,-0.2223,-0.1448,0.9924,1.5586,1.4238,-2.4781,-0.2456,-1.8822,-0.4424,-0.5941,-0.9948,1.8733,-0.2242,-1.5359,-0.103,0.7378,0.7691,0.069,0.3952,-0.4267,-0.2077,-0.4327,-1.1705,0.0399,-0.6586,0.1043,2.9475,-0.4968,-0.5432,0.4924,1.2173,0.177,0.2861,-0.709,1.4922,-1.1633,-0.084,-1.2275,0.5193,0.2404,-1.4495,-0.3346,0.3153,-0.573,0.4139,-0.9114,1.4844,0.1166,0.8734,2.182,-0.3765,2.0888,1.1178,0.2684,-0.5803,0.893,0.2127,-0.107,0.0569,1.0699,0.2975,1.3017,0.4541,1.8337,0.7915,1.705,-0.2708,-0.9626,1.1994,-1.6666,1.2642,0.5244,-1.1757,0.9278,0.882,-0.8993,1.2435,0.3841,0.6815,-0.1459]

You could use the d3.histogram function to bin your data and then use a nested structure to draw your circles.
See this bl.ocks for the code and a live demo of a self updating dot plot, with interactive information displayed (tooltip) when you .mouseover a dot.

The dot plot has nothing to do with a histogram or binning. The method involving d3.histogram would not produce a dot plot. Plase read the reprint of my article at https://www.cs.uic.edu/~wilkinson/Publications/dotplots.pdf. The proper algorithm is given there.

JavaScript / JSF2 data (rectangle) visualization in a cartesian coordinate system

I need to be able to visualize a special sort of diagram. In the past I always used Highcharts or Google charts for my data visualizations, but this time I cannot find any suitable chart in the mentioned libraries.
Actually the desired result should look like this:
So what I have is a cartesian coordinate system (with date axis), which contains several rectangles. Iam really looking forward to any recommendations on this.

If you want to stick with Highcharts, your best is probably going to be the renderer:
http://api.highcharts.com/highcharts#Renderer
You could also work this out using area series, but that could get a little messy after a while...
{{edit:
example using the area method:
http://jsfiddle.net/jlbriggs/8Xwuq/