currently i am using chartjs to generate chart data for 12 countries.
i have date for 12 countries in Line Chart.
but the problem is that i cannot get country details when i hover over the points. Instead i get x and y axis values which are time and (sum) on y axis. how could i get data about country when i hover.
also if clicked on certain point i should get that data on click.
supposes i hovered on england and cliecked on it i should get a alert box containing england data only.
is there any solution to it in chartjs
The second point's functionality has been added in the ChartJS v2 beta if you're still having problems. As for the first point I don't think that's easily possible unless you're just wanting what country/dataset it is.
Related
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/>
I have a highstock chart to render a stock price and I have an issue when render the tooltip.
The issue is that even I move my mouse across the boundary of the chart, the tooltip still shows up.
For example,
I have a series of stock price from 2015-01-01 to 2015-12-30 rendered on the chart. Then I zoom in from 2015-05-05 to 2015-06-30. Then the x axis of the chart is from 2015-05-05 to 2015-06-30. When I mouse over at the position of 2015-05-05, I can see the value of the stock price for that date and this is as expected. But when I move my mouse a little bit to the right, I can still see the tooltip show the stock price for 2015-05-04.
I can imagine this is an issue related to rounding. But I am not sure how to get rid of this since people may think that the zoom in range is from 2015-05-04 rather than 2015-05-05. To be more specific, how could I make tooltip not show up when the range is out of chart's x axis boundaries?
Any hint or help would be appreciated!
Right now i am able to form the Json data and got the lables alligned perfectly on 3 axes(X,y1,y2). The problem i am facing in this chart is the tooltip. I am getting the x axis labelled correctly from the row grouping of my matrix report. So on hovering my pointer i am getting the date value as 12/31/1969 by default at any point instead of taking the date from wherever the pointer is placed.Is there any workaround for that!
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.
I am just trying to achieve few things in my chart(Highcharts).
1). I want to show the full date always even its the same year. Currently its shows only day and Month.
2). How can i pass the colour to each one of the y axis labels.
(E.g.)
xAxis: {
categories: [[0],['Contract Period', 'blue'], ['Pre Contract Period', 'green'], ['Tender Period', 'red']]
}
3). I want to show the date for each point of the xaxis. Currently its shows just the starting date wherever i hover it.
4). My charts colors are depends upon Y axis labels. Not the X axis labels. I dont want to show any colors for the labels inside the legend. I just want to show the text Original Date and Actual Date. No colors. So only when i click the Original Date, its just display the Original Dates.
Moreover, I am just trying to get this chart like Gantt. Thanks.
What I got so far,
CHART SO FAR
1) You can use dateTimeLabelFormats and place %Y for day/month
2) You need to use labelFormatter and return value i.e as span with color.
3) Do you mean that on entire bar, toolip should display dates for each "part" of bar? If yes it is not possible.
4) So how it should look like?