How do I dynamically change a data point in Highcharts using JavaScript - highcharts

I'm trying to change a point in an existing series. From looking at the API, I've been trying the following:
chart.series[0].data[0].y = 43;
chart.redraw();
I'm sure I'm missing something simple but I can't figure it out. Thanks for your help.

You can't just set the value. chart.series[0].data[0] returns a point object, which you can then use it's 'update' method to change it's values.
chart.series[0].data[0].update(y += 10);
You can see an example here:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/point-update-column/

Well it works properly for both coordinates:
http://jsfiddle.net/PsBh7/
chart.series[0].data[0].update({
x:20
});

Related

Highcharts: use of PointClass in Angular

I'm trying to apply a tooltip to plotLines as shown in this example: http://jsfiddle.net/tw6rmc1r/2/
I'm stuck at this line: PointClass = series.pointClass
I can't manage to create the PointClass object. I can't really find the equivalent definition in Angular.
Please can you help me creating that Object in Angular?
Thank you :)

Highchart Solid Gauge Chart make one end straight/normal

I'm using Angular-Highcharts and creating solidgauge graph. I wanted to make the start point square/straight and other end rounded. Is it possible to do that with Highcharts? Kindly find below is the live example.
Thanks in advance.
Unfortunately, it is not supported from the basic API options, however, can be done by doing some changes in the solid-gauge core code.
Demo: https://jsfiddle.net/BlackLabel/tym9xfwb/
Line nr 87:
//path[4] = roundStart;
You can delete this part of the code from your app.

How to Add Extra Information in Hover/Tooltip

I want to add extra information in hover/tooltip in below shared highcharts links.
Please check and help.
https://www.highcharts.com/demo/line-basic
https://www.highcharts.com/demo/pie-drilldown
Did similar thing by using tooltip point formatter. Added the data as a different property "tooltipData" in series object, and later used it in the formatter and modified tooltip accordingly.
Link: https://api.highcharts.com/highcharts/tooltip.formatter

Tooltips sometimes appear empty under splite-plot-bands highcharts

I'm testint information from a page with Selenium Webdriver. I have a graphic like this: https://www.highcharts.com/demo/spline-plot-bands
and I'm having a problem when I try to get the info inside of every dot.
You have to know that this type of highcharts, every dot has the same xpath so, it's impossible to reach to different dots. I can only get one info in one dot.
//Click on toolip
WebElement element = driver.findElement(By.xpath(dot));
// action class to click
Actions action = new Actions((WebDriver) driver); action.click(element).build().perform();
String toolTipText = driver.findElement(By.xpath(tooltip)).getText(); if(!toolTipText.contains(example))
sb.append("===> Content error");
The problem is that ramdomly, I get empty info from that tooltips. Sometimes I correctly get the info but sometimes it appears empty. Why? Will it be problem because json call? I don't know what could I do...do you have any ideas?
Thanks so much in advance guys!!
I think you are looking wrong way at highcharts, please refer this highchart docs. Highchart is chart plugin that auto render HTML SVG based on highchart options.
To understand problem with tooltip information, you need to look into highchart series data, point objects. point object is contains information related to each dot in chart.

How to set MarkerOptions in gmaps4rails (optimized = false)?

My custom icons in gmaps4rails are not displaying correctly. I need to set MarkerOptions to optimized = false:
https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions
I have looked at the documentation for gmaps4rails but I can't seem to find the correct place to set this option. Any ideas?
Johann
You can put whatever option you desire as documented here.
Simply use the raw key.

Resources