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);
Related
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.
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.
I have a question regarding highcharts, I'm generating a graph and sometimes the backend returns null for some days.
Json:
{"series":[{"id":548,"data":[null,1287.5,null,186.7777,null,null,null],"name":"Example"}],"categories":["May 04","May 05","May 06","May 07","May 08","May 09","May 10"]}
Im getting a graph like this
Which I think is completely fine. The requirement changed and the customer doesn't like to see it like this, he wants to have the two points liked by a line. I told him that it will give the impression of false data for the date in the middle, he said that he wants data but no point in the middle.
Is this possible?, I couldn't fine anything like that on the documentation. In this case to put 0 instead of null is not possible because of the nature of the data.
Simply set connectNulls: true, see API.
I've got a rails 4 app and I'm using chartkick. I'm currently using pie charts, and I'm wondering if there is a way I can get each section of my pie chart to navigate to an endpoint or a url or anything really.
How would someone tackle that? Would it be done in the ERB file, or the controller? And how would it be done?
I've spent a lot of time trying to figure this one out myself. Unfortunately, there does not seem to be a simple 'add the link here and go' kind of option.
Chartkick allows you to specify whether you want to use the Google Charts Library or the Highcharts library. Both of these libraries allow you to draw charts where you can specify the 'click' action of a particular data point / data series. To utilize this, you can draw your chart using straight JQuery/JS -- it's much easier than it seems if you're only used to the standard chartkick stuff.
Here is the HighCharts documentation for this:
http://api.highcharts.com/highcharts#plotOptions.pie.events.click
Here is an awesome blog post showing how to setup the JS/Jquery (you can convert this to Coffescript really easy using http://js2.coffee)
http://birdchan.com/home/2012/09/07/highcharts-pie-charts-can-have-url-links/
His approach there works great, and, you can make it easier by creating an endpoint on your resource's controller that serves up the data hash you'll need for the chart, replacing:
data: [
{name: 'Not Tested', color: '#FFA850', y: 87, url: 'http://my_site1.com'},
{name: 'Fail', color: '#FF2929', y: 2, url: 'http://my_site2.com'},
{name: 'Pass', color: '#31FF4F', y: 32, url: 'http://my_site3.com'}
]
With something like:
$.ajax {
url: "/place/resources/resource_id/top_members.json"
success: (data) ->
draw_some_pie_chart(data)
}
Or you can also use the GON gem to make that hash available as a variable in your Coffeescript/JS file.
I'm sure there is a more specific/thorough way to answer your question. I can update my answer if you'd like to post samples of the code you're trying to use
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