Develop Reference

HighCharts.js: How to Create a Boxplot with stems representing confidence intervals, NOT max/min?

I'm trying to get my HighCharts code to generate a graphic visually the same as the attached goal image.
I need to figure out:
How to get the tooltip on a Boxplot to read "Upper Interval" and "Lower Interval" instead for the Minimum and Maximum labels respectively (marked by red arrows in attached Highcharts image).
Need to find a way to remove the Box on the Boxplot. Essentially, each data point in the series will display two long stems meeting # median in the center and top and bottom stems as Confidence Intervals. (changed from min and max as they were previously) Attached Goal image shows this.
Thank you for any help.

For edit tooltip try to use options from series.boxplot.tooltip.
Here is a possible solution from another SO thread, showing how to hide boxplot series, you can check it.
How to hide data in a series in highcharts boxplot?
Useful information from highcharts documentation how to styling the boxes.

To remove the boxes from the boxplot, I used this solution posted by user Fusher:
Highchart Forum Post
This involved setting the q1 and q3 to be the same value as the median for all data points in the boxplot series.
To change the tooltip to read "Upper Interval" and "Lower Interval" in place of Maximum and Minimum respectively, I used: plotOptions.boxplot.tooltips.pointFormat
I overrode the default value of <span style="color:{point.color}">●</span> <b> {series.name}</b><br/>Maximum: {point.high}<br/>Upper quartile: {point.q3}<br/>Median: {point.median}<br/>Lower quartile: {point.q1}<br/>Minimum: {point.low}<br/>
to
<span style="color:{point.color}">●</span> <b> {series.name}</b><br/>**UPPER INTERVAL**: {point.high}<br/>Upper quartile: {point.q3}<br/>Median: {point.median}<br/>Lower quartile: {point.q1}<br/>**LOWER INTERVAL**: {point.low}<br/>

Jquery Graph to display Engine Status

I need to draw a graph to display engine status.That is i will be having time like 1-2,2-3,3-4 along axis and by using bar graph i need to display whether engine was on or off at these time.
That is from 1-2 if it is off it will how black and 2-4 if it is on it will show blue color and again if the status is changed it should show black from blue.Right now i have customised jquery high charts for displaying one bar,by removing some parameters.
I need to know how i implment this here or is it possible in this graph?

You can do this with a column range chart, with minimal fudging.
The main issue is making sure you set your data points correctly, and to set grouping:false in the plotOptions. The x value needs to be specified for each data as well, or else they will all be given a separate x value
Example:
http://jsfiddle.net/jlbriggs/o9ck2zLn/
This can easily be adapted to a time axis by supplying the timestamps as the y values.

Use a jquery type slider to iterate through a csv and display one bar at a time in a d3.js bar chart

So I'm generating bar chart in D3.js with a csv file a la the basic columns example. What I want to do is show just one bar at a time for each row of data. A JQuery-like slider will iterate over the csv rows and update the chart. For the user, it'll just look like the single bar's height is changing but the x axis should update with the date as well.
Here's an example of the data that I'll be feeding into it:
DATE,INFLOW (CF),OUTFLOW (CF),STORAGE (CF)
20120101,950400,28857600,11084277600
20120102,60912000,28771200,11099959200
20120103,56505600,28857600,11130451200
20120104,55900800,28771200,11158765200
20120105,55987200,28771200,11189692800
20120106,56419200,28771200,11220620400
20120107,55123200,28684800,11246756400
The only thing I actually want to show is DATE and STORAGE (CF). So I'll probably have to do some parsing of the CSV somewhere to get it in the best shape.
I've attempted this and would post some code but all of my attempts are a mess. I can generate a plausible bar chart with all of the rows at once, but when I attempt to show a single one, everything breaks. Here are the challenges that I could use some guidance one:
How to splice or filter my csv with a slider so that only a single row is selected
Best way to generate a bar chart that only has a single bar from a single row in a csv (every time I try to do this I have trouble with axes and accessing the array values correctly)
Best way to update the bar, changing only height but also updating the x axis ticks
Also any examples would be very helpful! Have been googling like mad but am mostly finding sliders that affect range and scale

There are many pieces to this...parsing and slicing the data, setting up the x axis, etc. Here is one segment of the code.
d3.select("#slider")
.on("input", function() {update(+this.value);});
function update(row) {
viewdata = data.slice((row-1), row);
redraw();
}
Here is a complete PLUNK with the solution. NOTE: I have placed comments in several parts of the code, for orientation. I strongly suggest you fork this plunk so that it will not be lost if I inadvertently delete it.

Kendo ui Column Chart Labels

With the Kendo UI column chart, is there a possible way to show a series default label with a value of 0? The labels work for pie charts and line charts.
Here is my javascript and I don't see any configuration options
http://jsfiddle.net/8YnKv/30/
Thanks.

It's a hack solution, but if you are not concerned about decimal values, you could always set your 0 value values to something like .00001 and then use the kendo.format to round it to the nearest whole number, which is 0. Example jsFiddle:
http://jsfiddle.net/8YnKv/31/
Now, if you need to preserve decimal values, then this solution will not work for you. I hope that Telerik comes up with a solution soon.

draw vertical lines using jquery

I have the following json and I need to create a grid and also above the grid need to show vertical lines based on the values :
var arr = [];
arr= [
{"Measure":"Air Pollution","Rank":"1","Value":"15.5"},
{"Measure":"Water Pollution","Rank":"2","Value":"13.5"},
{"Measure":"Soil Erosion","Rank":"3","Value":"10.5"}
]
Now I need to create a grid and above the grid, need to create vertical bars based on the "Value". There will be 3 bars created since there are 3 Values. Now when 1st row in the grid is selected, the first vertical bar needs to be highlighted . Similarly, when the 1st vertical bar is selected, the 1st row in the grid to be selected. Creating the grid is not a problem since I am using KendoUI grid but to create the vertical bars and the selection is the one where I am stuck . Any views ?
Thanks.

Based on #Bogdan M.'s suggestion on using div elements, I've set up a jsFiddle demonstrating vertical bars built using jQuery. It relays on the input of values as an array of numbers, and converts those to DOM elements, setting their height accordingly.
This demo can be very easily updated to use the OP's supplied data structure, and selection behavior functionality can be added as well.
This final version (contains the complete solution, both for building the component and for assigning it with selection behavior) can be seen in the full demo on jsFiddle.
All that's left now is to assign handlers for the selection functionality - as cell / row listeners - to the KendoUI grid.

I see that you aim to visualize your data as a bar-chart. If so, don't re-invent the wheel. there are a lot of good JS libraries designated for that purpose.
I've had a good experience using HighCharts, try it out.
Disclaimer: This may be an overkill, but is a suited solution should the component be generic (for future compatibility with flexible data)