I am trying to download one chart with different scales in one click.
I have an array of scales and I loop over them and export chart each iteration with corresponding scale. However, chart gets downloaded once and scaled by 3 which is the last element of the scales array.
const scales = [1,2,3];
const exportChart = (scale) => chart.exportChart({scale});
$('button.export').click( function () {
scales.forEach(exportChart)
});
I assume I'm not allowed to export chart multiple times. Appreciate if someone can help me with that. Thanks!
Here is my fiddle https://jsfiddle.net/sabira/bf6yLcxw/
You can export and save separately multiple charts by clicking on a button. The reason why you get only one image is because you're trying to send multiple requests to the server at once, therefore only one success and the rest are canceled. Instead of sending POST requests to the server you can use the offline exporting module's method, exportChartLocal which does all the export stuff locally. I have prepared a simple example which can be found below.
Example:
https://jsfiddle.net/BlackLabel/w5boxq13/
Related
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.
Display the points at which they merge , I was not able to find any library .....
Displaying any form of charts in iOS can be done in 2 ways.
Using webView to load a html string with the javascript files imported into it.
Using stringByAppendingFormat you can change the data points and refresh the webview.
http://www.fusioncharts.com/blog/2012/02/create-charts-for-iphone-and-ipad-apps-using-fusioncharts-xt/
Using a library to display them Natively. Something like Charts by Daniel Iohen Gindi. It is a bit extensive so just use the line Charts in your case and ignore the others.
https://github.com/danielgindi/Charts
Using the 2nd method (native) will always perform better, but the simplicity of html5 charts make it very easy to implement
To obtain points when lines meet is basically saying when 2 data has the same value. So you can just add an if statement and print the value out or store it as a variable.
I have a webpage with a lot of checkboxes that I turn into pushbuttons with jQueryUI button() call. This slows the rendering of the page down to a crawl. Is it possible to speed this up?
I do the call in document.ready with selector
$("#containingdiv input[type='checkbox']).button()
I am building a control for a bracket cup. And i am showing the brackts for all agegroups, that is the reason for so many checkboxes. The ones marked in red boxes ar checkboxes and the other ones is normal buttons. There are up to 30 agegroups so i need to show alot of them.
Looks like i should build the ui myself instead of using the pushbuttons from jqueryui. When i profile i chrome it looks like it is building all the nodes that uses all the time.
Try the following trick. Instead of converting them all at once, convert first hundred (or how many user immidiately sees on the screen), and delay the rest with setTimeout(). This releases the UI thread almost immidiately, therefore browser can do other things like rendering and processing events. Initialization actually becomes longer, but the page is never frozen.
Something like:
var checkboxes_left = $("#containingdiv input[type='checkbox']");
convertRest();
// Convert the first 100 checkboxes, then schedule converting the rest
function convertRest() {
checkboxes_left.slice(0, 100).button();
checkboxes_left = checkboxes_left.slice(100);
if (checkboxes_left.length > 0) {
window.setTimeout(convertRest, 50);
}
}
I'm trying to build a dashboard using highcharts.js(multiple charts are displayed on a page), the data for these charts are fetched via ajax. Each of these charts can be refreshed independently. Initially when I was trying to get this working I was getting error #16 and I figured out that HighCharts.js was included and the ajax response was sending back HighCharts again and hence this error was being thrown by HighCharts.
To circumvent this I added js code to check if HighCharts was already defined and if it was I set it to null
if(window.Highcharts){
window.Highcharts = null;
}
This seemed to solve the problem, but however I now see that when I refresh one chart the other chart(s) on the dashboard seem to have some rendering issues - a part of the other chart(s) seems to have been stripped off.
Please let me know if what I'm doing is right, also please let me know a better way in which I can avoid loading HighCharts is its already loaded.
Assuming you have control over the HTML you're rendering, you need to do either;
Place highcharts (and other scripts) as a dependency in the page container so that you're sure it loads only once.
Conditionally load HighCharts dynamically rather than statically.
Eg something like this;
function buildChart(func) {
if (window.Highcharts === undefined) {
console.log("Highcharts is not loaded, fetching...");
$.getScript("http://code.highcharts.com/highcharts.js", function () {
alert("HighCharts was loaded");
func(); // build chart
});
}
else {
console.log("HighCharts was already loaded");
func(); // build chart
}
}
// test
buildChart(function () {
// build chart
console.log("Read to build chart with:", window.Highcharts);
})
However, this simple example doesn't cater for concurrent requests whilst highcharts is still being loaded. So for conditional loading like this, I would look into using a library like RequireJS, YepNope or HeadJS which can handle these dependencies for you. You are then able to include the HighCharts script in your components as often as you like and they'll only be loaded once.
Why are you loading highcharts with each span? You only need to load it once when the document loads.
Highcharts does not need to load each time a chart is refreshed...it's already there.
All you need to do to refresh individual charts via ajax is return a json object of the data for that chart, and re initialize the chart with the existing options that were set when the page loaded.
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);