Why is this code not working? i'm getting a blank after clicking a piece in my pie chart..
drilldown: function (e) {
var selectedPoint = e.point;
var chart = this;
highChart_data = JSON.parse('{"' + e.point.name + '":{ "name": "' + e.point.name + '", "data": [{ "y": 426, "name": "2015-11-08 00:00:00" }, { "y": 229, "name": "2015-11-09 00:00:00" }] }}');
chart.(selectedPoint, highChart_data); }
my drilldown property for each data point is set to 'true'.
i have also tried setting it to a unique id and using it in an id attribute of my addSeriesAsDrilldown json. and nothing..
It works, but a couple of issues: http://jsfiddle.net/qfb4uxnj/
Here is a problem:
chart.(selectedPoint, highChart_data);
Should be:
chart.addSeriesAsDrilldown(selectedPoint, highChart_data[selectedPoint.name]);
You should pass as an argument series object. Not object of series with key-object pair.
Related
Using data from database I am trying to simulate the sankey diagram working JSFiddle.
I am assembling my data using the below code
// sdata.php
<?php
$con = sqlsrv_connect($server, $options);
if (!$con){die('Could not connect: ' . sqlsrv_error());}
$sql_query = "select * from test_data";
$result = sqlsrv_query($con, $sql_query);
$series = array();
$series['type'] = 'sankey';
$series['name'] = 'Gendata';
$series['keys'] = '[\'from\',\'to\',\'weight\']';
while($r = sqlsrv_fetch_array($result))
{
$series1 = array();
$series1[] = $r['PARENT'];
$series1[] = $r['CHILD'];
$series1[] = $r['DGEN'];
$series['data'][] = $series1;
}
$result = array();
array_push($result,$series);
print json_encode($result, JSON_NUMERIC_CHECK);
sqlsrv_close($con);
?>
My JSON looks like
[{
"type":"sankey",
"name":"Gendata",
"keys":"['from','to','weight']",
"data":[
["GROUP","COAL",24.46], ["GROUP","GAS",11.96],["GROUP","HYDRO",19.36],
["HYDRO","HYD",19.36], ["COAL","ER2",22.4],["GAS","NR",19]
]
}]
My Chart rending code looks like
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
showAxes: true
},
yAxis: [{
lineWidth: 1,
tickPositions: [0, 1, 2, 3]
}],
title: {
text: 'Sankey Diagram'
},
series: []
}
$.getJSON("sdata.php", function(resp) {
console.log(resp);
options.series[0] = resp[1]; //option 1 to assign the data in series
//options.series.push.resp; //option 2 to push the data in series
chart = new Highcharts.Chart(options);
});
});
but I am failing. I am unable to find the error I am missing
Kindly help me.
Let me know if I can be of any further information.
From the code you have posted here, the error is your keys assignment.
You have:
"keys":"['from','to','weight']",
But it needs to be:
"keys": ['from','to','weight'],
That is, the array should not be surrounded by quotes, because then it will be interpreted as a string.
In your PHP that would mean:
$series['keys'] = '[\'from\',\'to\',\'weight\']';
Needs to be:
$series['keys'] = ['from', 'to', 'weight'];
Working example: https://jsfiddle.net/ewolden/aeh02djx/
I'm trying to create a line diagram (datetime x-axis) with null values.
var rawData = [{
(...)
}, {
"PointOfTime": 1424991600,
"value": 6831.28806
}, {
"PointOfTime": 1425078000,
"value": null
}, {
"PointOfTime": 1425164400,
"value": null
}, {
(...)
}];
Adjust the data from a json source to an array:
rawData.forEach(function (d) {
var datetime = (d.PointOfTime + 3600) * 1000;
data.push([datetime, parseFloat(d.value)]);
});
As stated in the following fiddle, http://jsfiddle.net/wiesson/1m5hpLef there are no lines, only bullets. Any suggestions? I need the PointOfTime to create the range of the x-axis, even they are empty.
// Edit: As displayed in the following figure, the values in the future are unknown and not 0, therefore I would like to set them to null.
Add a condition, which check if your value is null. If yes then push this, instead of call parseFloat(null).
rawData.forEach(function (d) {
var datetime = d.PointOfTime * 1000;
if(d.value!==null)
data.push([datetime, parseFloat(d.value)]);
else
data.push([datetime, null]);
});
Example: http://jsfiddle.net/wiesson/1m5hpLef/
I'm creating a multichart (line and column) and I need to format the tooltip value for only one of my series. The thing is: formatter doesn't seem to work inside series.
I have a point value like: 212575200
In tooltip it's being formatted into 2.125.752,00
But I need it to be formatted into: 2.1 M (for million)
(K for thousand, M for million, B for billion)
How can I format a tooltip value for only one of my series?
This is the code I'm using:
series : [{
name : ((tipoGrafico == 'line' || tipoGrafico == 'column')?'ult':' '),
data : dadosJson,
pointStart: dadosJson[0][0],
pointInterval: 24 * 3600 * 1000,
yAxis: 0, // Em qual grafico do eixo Y irão esses dados
tooltip: {
valueDecimals: CASAS_DECIMAIS,
}
},{
type: 'column',
name: nomeEstudo,
data: volume,
pointStart: dadosJson[0][0],
pointInterval: 24 * 3600 * 1000,
yAxis: 1,
tooltip: {
valueDecimals: ((nomeEstudo != "neg") ? CASAS_DECIMAIS : 0),
pointFormat: '<tspan style="color:{series.color}"> {series.name}: </tspan><tspan> ' + formatNumber(('{point.y}'/formataValores('{point.y}').divisor))+formataValores('{point.y}').letra + '</tspan>'
},
}],
Notice that I'm trying pointFormat, but It's returning a NaN from my other JS functions, because it can't figure out in time '{point.y}' is actually a Number, not a String.
In the formatter you can check which serie is displayed in the tooltip, then use condition (i.e based on the id of serie or name or index) and return content.
Following kind of function will help you:
tooltip:
{
formatter: function() {
for(var temp=0,tempLength = this.points.length;temp<tempLength; temp++)
{
//You will get the point value here by using following code
var Value = this.points[temp].y;
//Now you can apply any format to this value
}
}
}
Need a hand deciphering the Highcharts methodology please.
I have input data that is a lot of records with three fields (timestamp, min, max) that I'd like to generate a plot from. Goal is to have two lines, one with max-vs-time and the other with min-vs.time, both on that one plot.
I got an arearange to work (fiddle here) but if I change the plot type to spline, I just get one line graph with min vs. time (i.e., it ignores the last data parameter).
Same thing happens when I mess with the Highcharts arearange example, so I'm guessing that my series is not defined correctly, but I'm not deciphering the right terminology to figure out how to ask the question yet I guess. Any help appreciated....
// data is timestamp,min,max for the day
// - this currently plots only the min for each day
// - intent is two lines, one for min and one for max
var data = [
[1186124400000, 57.2, 75.6],
[1186210800000, 51.8, 74.7],
[1186297200000, 53.8, 74.8],
[1186383600000, 56.7, 72.7],
[1186470000000, 59.0, 76.1]
];
var options = {
chart: {
renderTo: 'container',
type: 'arearange'
},
title: {
text: 'historical temperatures'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'outsideTemp (F)'
}
},
legend: {
enabled: false
},
series: [{
legend: {
enabled: false
},
data: data
}]
};
$(document).ready(function () {
var chart1 = new Highcharts.Chart(options)
});
You need to create two separate series.
So this:
var data = [
[1186124400000, 57.2, 75.6],
[1186210800000, 51.8, 74.7],
[1186297200000, 53.8, 74.8],
[1186383600000, 56.7, 72.7],
[1186470000000, 59.0, 76.1]
];
Will need to be two separate arrays, each with a single y value, and the same x values:
var data1 = [
[1186124400000, 57.2],
[1186210800000, 51.8],
[1186297200000, 53.8],
[1186383600000, 56.7],
[1186470000000, 59.0]
];
var data2 = [
[1186124400000, 75.6],
[1186210800000, 74.7],
[1186297200000, 74.8],
[1186383600000, 72.7],
[1186470000000, 76.1]
];
Updated Fiddle:
http://jsfiddle.net/jlbriggs/5q5HJ/12/
If your x values are at consistent intervals, you can use the pointStart and pointInterval properties and skip specifying the x values
http://api.highcharts.com/highcharts#plotOptions.series.pointStart
http://api.highcharts.com/highcharts#plotOptions.series.pointInterval
This is my data model:
data = [{y: 123, color: "#FF7600"}, {y: 321, color: "#00FFE3"}, {y: 213,color: "#444444"}]
Then the series is added to a pie chart:
$http({ method: 'GET', url: /pie-chart, params: {})
.success(function (data) {
chart.addSeries({
type: 'pie',
data: data
})
});
Here's the official highcharts demo: http://www.highcharts.com/demo/pie-gradient
It loops through data, read colors, creates color array and uses this array when drawing chart.
But i'm thinking about solution which avoids extracting colors from JSON.
Any idea? Thanks a lot.
Edited, solved
Gave it up :).
I ended up creating color arrays as described in highcharts demo.
It works well.
// Get colors from received data, create color array,
var colors = [];
for (var i = 0; i < data[0].series.length; i++) {
colors.push(data[0].series[i].color);
// Delete original colors, so that new radialized are used
delete(data[i].color);
}
// Use color array and radialize each color
Highcharts.getOptions().colors = Highcharts.map(colors, function(color) {
return {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
The solution mentioned above sets the colors in the global defaults. This is okay if you have only one chart, but if you have multiple it can be problematic, as the colors will apply for all charts.
You can colorize this on the individual chart level by remapping the colors just in the local data array. Here is what I do for my pie charts.
chartData is an array of data like:
[
{
"color": "#01080f",
"name": "No Status",
"y": 8570
},
{
"color": "#1A942C",
"name": "Deployed",
"y": 27952
},
...
{
"color": "#f36e20",
"name": "Out of sync",
"y": 241
}
]
In my javascript code it is retrieved from the server and applied to the Highcharts object's series.data element.
Just manipulate that data element before you add it to the highcharts object.
// Retrieve your chart data
$.getJSON('/api/endpoint/policystatus', function (chartData) {
// Function replaces flat colors with gradients
function colorizeData(data) {
data.color = {
radialGradient: {cx: 0.5, cy: 0.3, r: 0.7},
stops: [
[0, data.color],
[1, Highcharts.Color(data.color).brighten(-0.3).get('rgb')] // darken
]
};
}
// Call the function for each element in the retrieved data
chartData.forEach(colorizeData);
// Continue on to build your chart
$('#pie-general-status').highcharts({
// ....
The above 'colorizeData' takes the chart data input, looks for the 'color' element, then replaces it with the Highcharts gradient based on the same color.
Note that you must use hex or RGB values; it will not work with colors defined as the words 'green' or 'blue'.