Highchart Solid Gauge Chart make one end straight/normal - highcharts

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.

Related

Do we have undo option in high charts?

Do we have undo option in high charts? For example I have few series on chart and I replaced them with new one. Do I have any option to revert it back?
This is a very general question, but 'undo' in the meaning of a special option is not available from the API.
However, there are many options which can be used for removing old and adding new data. In your example, you can use the remove() and addSeries() methods to achieve that.
Demo:
https://jsfiddle.net/BlackLabel/tyvbk62s/
API References:
https://api.highcharts.com/class-reference/Highcharts.Series#remove
https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries
You can also consider using localStorage as a place for storing chart.options.
Example demo:
http://jsfiddle.net/BlackLabel/9b3cx178/

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 :)

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.

Primefaces3.4 DateTime Support in Line Chart

I am trying to display a datetime line chart, in a continuous style, using primefaces 3.4 which internally uses jqplot.
It should be possible, according to this:
http://code.google.com/p/primefaces/issues/detail?id=2180
however, my result is just a normal discrete chart.
Has anyone succeeded?
The primefaces author says:
Using new extender feature you can configure the chart the way you want before it is rendered on client side. Extender is simply a javascript function that is called before the plot is drawn so that you can override PrimeFaces provided attributes and add more to support any jqplot configuration option
What am I supposed to put in the extender for the timeline to work?
This was promising:
kevindoran1.blogspot.co.nz/2012/02/using-google-charts-with-jsf.html
but xmlns:ti="http://tradeintel.co.nz/custom" no longer exists (?)
btw, continuous and discrete explained =
https://developers.google.com/chart/interactive/docs/customizing_axes#Discrete_vs_Continuous
Any alternative (free) chart libs, that I can easily integrate with JSF2 ?
This kevindoran1.blogspot.co.nz/2012/02/using-google-charts-with-jsf.html was promising
but xmlns:ti="http://tradeintel.co.nz/custom" no longer exists (?)
I made it work with primefaces look at my detailed post here http://forum.primefaces.org/viewtopic.php?f=3&t=23891&p=78637#p78637
If you have any doubt don't hesitate asking me the details

Donut chart in highcharts appears messed up on export

We are using highcharts as our charting library. It's great and exporting works well in all scenarios except one. We have a donut chart with two levels. When it is rendered in the browser it shows up fine:
If you now export this chart using the default highcharts service it shows a bit like this:
Anyone know why this is happening and if there is any way we can fix this?
I would recommend creating a fiddle of your problem, and emailing HighCharts support about it (or link the fiddle here), they are very helpful and usually respond quickly.
Your problem does however seem to be related to your code as I also generate and export donut charts with no problems
My mistake in the configuration was when I was dynamically updating the colour:
chart.series[0].data[s].update({color: "#FFFFFF")}, false);
This didn't just mean I was updating the color but also the whole point. This meant that by running the above I was running y to nothing! Although the chart displayed ok the data sent to the exporting service was with unset values for the slices.. hence the empty slices in the chart. to fix it I had to do something like:
chart.series[0].data[s].update({
color: "#FFFFFF",
y: chart.series[0].data[s].y,
name: chart.series[0].data[s].name,
)}, false);

Resources