score:224
yes, if you set up the series object like the following, where each data point is a hash, then you can pass extra values:
new highcharts.chart( {
...,
series: [ {
name: 'foo',
data: [
{
y : 3,
mydata : 'firstpoint'
},
{
y : 7,
mydata : 'secondpoint'
},
{
y : 1,
mydata : 'thirdpoint'
}
]
} ]
} );
in your tooltip you can access it via the "point" attribute of the object passed in:
tooltip: {
formatter: function() {
return 'extra data: <b>' + this.point.mydata + '</b>';
}
}
full example here: https://jsfiddle.net/burwelldesigns/jeol5y7s/
score:1
just to add some kind of dynamism :
did this for generating data for a stacked column chart with 10 categories.
i wanted to have for each category 4 data series and wanted to display additional information (image, question, distractor and expected answer) for each of the data series :
<?php
while($n<=10)
{
$data1[]=array(
"y"=>$nber1,
"img"=>$image1,
"ques"=>$ques,
"distractor"=>$distractor1,
"answer"=>$ans
);
$data2[]=array(
"y"=>$nber2,
"img"=>$image2,
"ques"=>$ques,
"distractor"=>$distractor2,
"answer"=>$ans
);
$data3[]=array(
"y"=>$nber3,
"img"=>$image3,
"ques"=>$ques,
"distractor"=>$distractor3,
"answer"=>$ans
);
$data4[]=array(
"y"=>$nber4,
"img"=>$image4,
"ques"=>$ques,
"distractor"=>$distractor4,
"answer"=>$ans
);
}
// then convert the data into data series:
$mydata[]=array(
"name"=>"distractor #1",
"data"=>$data1,
"stack"=>"distractor #1"
);
$mydata[]=array(
"name"=>"distractor #2",
"data"=>$data2,
"stack"=>"distractor #2"
);
$mydata[]=array(
"name"=>"distractor #3",
"data"=>$data3,
"stack"=>"distractor #3"
);
$mydata[]=array(
"name"=>"distractor #4",
"data"=>$data4,
"stack"=>"distractor #4"
);
?>
in the highcharts section:
var mydata=<? echo json_encode($mydata)?>;
// tooltip section
tooltip: {
usehtml: true,
formatter: function() {
return 'question id: <b>'+ this.x +'</b><br/>'+
'question: <b>'+ this.point.ques +'</b><br/>'+
this.series.name+'<br> total attempts: '+ this.y +'<br/>'+
"<img src=\"images/"+ this.point.img +"\" width=\"100px\" height=\"50px\"/><br>"+
'distractor: <b>'+ this.point.distractor +'</b><br/>'+
'expected answer: <b>'+ this.point.answer +'</b><br/>';
}
},
// series section of the highcharts
series: mydata
// for the category section, just prepare an array of elements and assign to the category variable as the way i did it on series.
hope it helps someone.
score:3
i am using ajax to get my data from sql server, then i prepare a js array that is used as the data in my chart. javascript code once the ajax is successfull:
...,
success: function (data) {
var fseries = [];
var series = [];
for (var arr in data) {
for (var i in data[arr]['data'] ){
var d = data[arr]['data'][i];
//if (i < 5) alert("d.method = " + d.method);
var serie = {x:date.parse(d.value), y:d.item, method:d.method };
series.push(serie);
}
fseries.push({name: data[arr]['name'], data: series, location: data[arr]['location']});
series = [];
};
drawchart(fseries);
},
now to show extra meta-data in the tooltip:
...
tooltip: {
xdateformat: '%m/%d/%y',
headerformat: '<b>{series.name}</b><br>',
pointformat: 'method: {point.method}<br>date: {point.x:%m/%d/%y } <br>reading: {point.y:,.2f}',
shared: false,
},
i use a datarow to iterate through my result set, then i use a class to assign the values prior to passing back in json format. here is the c# code in the controller action called by ajax.
public jsonresult chartdata(string datasource, string locationtype, string[] locations, string[] methods, string fromdate, string todate, string[] lstparams)
{
list<dictionary<string, object>> dataresult = new list<dictionary<string, object>>();
dictionary<string, object> aseries = new dictionary<string, object>();
string currparam = string.empty;
lstparams = (lstparams == null) ? new string[1] : lstparams;
foreach (datarow dr in getchartdata(datasource, locationtype, locations, methods, fromdate, todate, lstparams).rows)
{
if (currparam != dr[1].tostring())
{
if (!string.isnullorempty(currparam)) //a new standard parameter is read and add to dataresult. skips first record.
{
dictionary<string, object> bseries = new dictionary<string, object>(aseries); //required else when clearing out aseries, dataresult values are also cleared
dataresult.add(bseries);
aseries.clear();
}
currparam = dr[1].tostring();
aseries["name"] = cparam;
aseries["data"] = new list<chartdatamodel>();
aseries["location"] = dr[0].tostring();
}
chartdatamodel lst = new chartdatamodel();
lst.value = convert.todatetime(dr[3]).toshortdatestring();
lst.item = convert.todouble(dr[2]);
lst.method = dr[4].tostring();
((list<chartdatamodel>)aseries["data"]).add(lst);
}
dataresult.add(aseries);
var result = json(dataresult.tolist(), jsonrequestbehavior.allowget); //used to debug final dataresult before returning to ajax call.
return result;
}
i realize there is a more efficient and acceptable way to code in c# but i inherited the project.
score:16
for time series data, especially with enough data points to activate the turbo threshold, the proposed solutions above will not work. in the case of the turbo threshold, this is because highcarts expects the data points to be an array like:
series: [{
name: 'numbers over the course of time',
data: [
[1515059819853, 1],
[1515059838069, 2],
[1515059838080, 3],
// you get the idea
]
}]
in order not to lose the benefits of the turbo threshold (which is important when dealing with lots of data points), i store the data outside of the chart and look up the data point in the tooltip formatter
function. here's an example:
const chartdata = [
{ timestamp: 1515059819853, value: 1, somethingelse: 'foo'},
{ timestamp: 1515059838069, value: 2, somethingelse: 'bar'},
{ timestamp: 1515059838080, value: 3, somethingelse: 'baz'},
// you get the idea
]
const chart = highcharts.stockchart(mychart, {
// ...options
tooltip: {
formatter () {
// this.point.x is the timestamp in my original chartdata array
const pointdata = chartdata.find(row => row.timestamp === this.point.x)
console.log(pointdata.somethingelse)
}
},
series: [{
name: 'numbers over the course of time',
// restructure the data as an array as highcharts expects it
// array index 0 is the x value, index 1 is the y value in the chart
data: chartdata.map(row => [row.timestamp, row.value])
}]
})
this approach will work for all chart types.
score:17
additionally, with this solution, you can even put multiple data as much as you want :
tooltip: {
formatter: function () {
return 'extra data: <b>' + this.point.mydata + '</b><br> another data: <b>' + this.point.myotherdata + '</b>';
}
},
series: [{
name: 'foo',
data: [{
y: 3,
mydata: 'firstpoint',
myotherdata: 'other first data'
}, {
y: 7,
mydata: 'secondpoint',
myotherdata: 'other second data'
}, {
y: 1,
mydata: 'thirdpoint',
myotherdata: 'other third data'
}]
}]
thank you nick.
Source: stackoverflow.com
Related Query
- Set Additional Data to highcharts series
- Add additional data to a Highcharts series for use in formatters
- HighCharts how to add live series data set to existing chart
- Include additional highcharts source data in angular2 app
- Highcharts series visibility with csv data source
- How to have multiple highcharts with different series data in vuejs without repeating code
- Highcharts Highstock How to Plot OHLC and Line Charts from One Set of Embedded CSV Data Using Series Map Tools?
- Parse string to set of data in JavaScript(jQuery) to match series in HighCharts
- How to set Highcharts data series in x-axis using crosshairs?
- Angular Highcharts-ng how to set additional data series as tooltip
- Highcharts displays series names but missing data points from json source
- How to set columnrange width to expand the length of the x-axis in multiple data series in Highcharts
- Proper way to remove all series data from a highcharts chart?
- Changing data dynamically for a series in Highcharts
- Set highcharts y-axis min value to 0, unless there is negative data
- Highcharts How to Show Loading Animation At Set Data
- Get Highcharts Series Data after Load
- Highcharts doesn't display series with lots of data points
- Highcharts data series issue with ajax/json and PHP
- Changing Highcharts data series type dynamically
- Highcharts - How to set custom colors for the series
- how to set dynamic data in highcharts
- Highcharts series data array
- Use an array of objects for series data in Highcharts
- Add additional data to Pie Tooltip on Highcharts
- Highcharts how to use JavaScript variable as series data source?
- How to get multiple data series into Highcharts
- Highcharts with JSON data and multiple series
- Highcharts large data set clustering
- Highcharts - Provide URL's for series data to open clickable link
More Query from same tag
- Charting with 500K data points
- Ruby 2D array of different types
- Remove datalabels from formatter with Highchart
- What means '404 2716' when trying to run JavaScript library with Django?
- Custom SVGElement labels loose positioning on zoom
- High chart on click event listening
- Adding a string to highcharts tooltip based on a separate data series
- Error dynamically adding a highchart
- Highcharts yLow / yHigh not working
- Highcharts timelines with a single data point
- How to make label in highcharts area graph display absolute values instead of negative values?
- Highcharts stacking misfunctioning
- Highchart general drawing svg label zoom-in on mouse hover
- How to show more than one "dataMax" in Highcharts?
- Text Gradient Highcharts Wordcloud
- How to add group secondary x-axis to highcharts
- Highcharts - Changing chart type
- 3D Pie chart in Highcharts/Javascript
- Can't build multilevel drilldown chart using Highchart API
- Highcharts - How to combine unique legend for multi-series pie chart which perform same action for both series? (like onclick: show/hide)
- Highchart Polar chart - 4 nested circle with different series
- Highcharts - Space between bars based on the bars' width
- Highcharts dataLabel overlap
- Highstock inputDateParser fires three times
- How do you execute javascript on demand
- php: laravel slow view render time when rendering javascript for highcharts
- Highcharts with live data: align chart on left side
- Pass Data String as parameter to a Function for HighCharts
- No animation when adding points to two serieses in Highcharts
- HighCharts: Labels visible over tooltip