score:3
it is true that you cannot pass functions in json. javascript is a superset of json.
a common approach is for the chart to be defined in javascript (e.g. during the page load), and the page then requests just the data via ajax. when the data is returned it can be added to the chart object, either before it is rendered or afterwards using the highcharts api.
if you really want to pass the formatter function from the server with the chart, send it as a string, and then turn it into a function like this:
var fn = function(mystring);
and use it in highcharts like:
chart.plotoptions.pie.datalabels = {"formatter":fn};
i've re-factored your example to show the approach: http://jsfiddle.net/wo7zn0bw/
score:0
i used a different approach. i created a json like below
{"formatter": "function(){ return this.point.name+':'+this.percentage.tofixed(1) + '%';}"}
when i came to evaluating the expression, i used (assuming that the value of the 'formatter' is formattervaluestring)
formattervaluestring = formattervaluestring.replace('function()', '');
let opts = (new function(formattervaluestring)).call(this);
formattervalue = opts;
the reason to use this approach was it became hard to bind 'this' with the function. the eval() function did not go well with accessing variable this. i am sure there are ways to do it. just thought this was quick.
score:2
i had a similar conundrum. i wanted to create the json server side (ruby on rails) so i could create images of charts for a web api and also present it on the client web browser with the same code. this is similar to stevep's answer.
to conform with json standards, i changed all formatter functions to strings
{"formatter": "function(){ return this.point.name+':'+this.percentage.tofixed(1) + '%';}"}
on the web side, i navigate the hash looking for formatter keys and replace them with the function using this code (may be a better way!?). javascript:
function hashnavigator(){
this.navigateandreplace = function(hash, key){
if (!this.isobject(hash)){
//nice if only navigated hashes and arrays
return;
}
var keys = object.keys(hash);
for(var i = 0; i< keys.length; i++){
if (keys[i] == key){
//convert string to js function
hash[keys[i]] = this.parsefunction(hash[keys[i]]);
} else if (this.isobject(hash[keys[i]])){
//navigate hash tree
this.navigateandreplace(hash[keys[i]], key);
} else {
//continue
}
}
};
this.isobject = function(testvar) {
return testvar !== null && typeof testvar === 'object'
}
//http://stackoverflow.com/questions/7650071/is-there-a-way-to-create-a-function-from-a-string-with-javascript
this.parsefunction = function(fstring){
var funcreg = /function *\(([^()]*)\)[ \n\t]*{(.*)}/gmi;
var match = funcreg.exec(fstring.replace(/\n/g, ' '));
if(match) {
return new function(match[1].split(','), match[2]);
}
return null;
};
}
to use this, would be something similar to this javascript:
hashnavigator = new hashnavigator();
hashnavigator.navigateandreplace(myhighchartshash, "formatter")
at that point the hash/js-object is highcharts ready
similar idea was used for the web image api.
i was really hoping that hacking at the json was not the only solution, but it works!
Source: stackoverflow.com
Related Query
- passing formatting JavaScript code to HighCharts with JSON
- Formatting JSON Data with ColdFusion for HighCharts
- passing json values to highcharts from .net code behind
- javascript associative array, looping, and / or scope issue with Highcharts JSON call
- Server-side c# and client side javascript with json loading Highcharts gantt chart Task Progress Indicator, need to change Tooltip and Label name
- Highcharts - Passing in Color with JSON
- HighCharts Data with JavaScript PHP JSON
- Passing data from PHP array to Highcharts chart with JSON
- Reload chart data via JSON with Highcharts
- Passing Django Database Queryset to Highcharts via JSON
- Highcharts Column chart with drilldown, remove hyperlink like formatting from x-axis labels
- Highcharts with JSON data and multiple series
- Formatting JSON data monthwise for HighCharts using MySQL
- Highcharts - Global configuration with common code and unique data & Headings
- Highcharts / JavaScript month is incompatible with MySQL
- Passing a JavaScript function from JSON encoded PHP
- Highcharts with ajax and json data what am i doing wrong?
- when printing page with highcharts using javascript this.print() width values in css in @media print seem to be ignored
- Date / Time problem in javascript with highcharts
- Highcharts multiple column chart with drilldown, correct formatting of drilldown axes
- Sending javascript function with JSON is possible?
- c# WPF Webbrowser with Highchart, Javascript from external source not working "An error has occurred in the script on this page"
- Highcharts : How do I keep the marker formatting and make the click event fire with a 5K+ point scatter plot?
- Formatting JSON from a Pandas data frame for Highcharts within a Django template
- dynamic highcharts with json data
- Passing data to highcharts from javascript array or variable
- In Highcharts drilldown charts, Custom Formatting of X-Axis label displays the label with underline even in the last level
- Passing JSON in variable to HighCharts
- Retrieving JSON data for Highcharts with multiple series?
- Highcharts add point to line chart with json
More Query from same tag
- Show only 1 Child node of Treemap HighCharts
- disabling click event for a series highchart
- How To Load Plist Data On HighChart Using Objective C?
- Is it possible to completely hide a tooltip using pointFormatter?
- HighCharts: add dashed line
- Highcharts Activity Gauge - how to get different behaviors while hover over
- Highmaps - Creating custom buttons using Exporting
- Highmaps logo string rendering invalid copyright character
- HighCharts Month/multiple data array error
- How to draw line from Data label to Marker in Highchart Scatter Plot
- Highstock type 'candlestick' - Change bordercolors
- Two columns with two legend items in highchars.js
- Hidden duplicate legends in Charts
- highcharts correct json input
- Highcharts - Dealing with small values in Funnel chart
- Legends in variable radius pie Highcharts
- formatting all the markers for the hovering series in a HighCharts scatterplot
- Embedding the view of a url inside the header of another view
- Nothing displayed in Highchart Column
- How do I preload or install static files into Highchart's export server?
- Possible to use Highcharts Scatter Plot with categories?
- Highcharts How to Show Loading Animation At Set Data
- Pie chart with two circles need to change background color in inner circle
- Date formatting for X-axis labels only showing as 'Jan'
- Need help in binding dynamic JSON to Highcharts
- Text Ellipsis in bubble chart
- Can we use Highcharts with React-Native?
- Convert Base64 to normal PNG for copy/pasting
- dynamic highcharts with json data
- Highcharts pie/variablepie align multilines label on plotedge