I send data inside an array of objects:
[{name: "x1" , data: [ ... ]}, {name: "x2" , data: [ ... ]} ... ]
Is it possible to show series name in the data point tooltip?
Yes, you can pass a tooltip formatter in the configuration, and the data object contains the series name:
new Contour({
el: '.chart',
tooltip: {
formatter: function (d) {
return d.series + ': ' + d.x + ', ' d.y;
}
}
})
.cartesian()
.line([1,2,3,3,5,6])
.tooltip()
.render();
Related
I have a server data embedded with values that determine the row-color.
var ngBody = angular.module ('BodySpace', [
'ui.grid', 'ngSanitize', 'ngResource'
, 'ui.grid.selection', 'ui.bootstrap'
, 'ui.grid.resizeColumns'
]);
ngBody.controller('ngController', function($scope, $http, $filter, uiGridConstants) {
angular.element(document).ready(function () {
initScope( $scope, uiGridConstants, $filter);
$scope.Get2Data();
} );
initScope( $scope, uiGridConstants, $filter);
$scope.Get2Data = function() {
$scope.uiGrid306.data = serverdata;
:
:
:
}
})
The requested data from the server has a column that controls the row color. What should I write in my row template to reference my data column that determines each row's color to render?
On initiating your ui-grid, you will apply a row-template in which you execute the code referencing your column data that decide the row-color - here in this example, it is _ab_x_style which stores the name of my style class.
function initGrid( $scope, uiGridConstants, $filter){
$scope.uiGrid306 = {
rowTemplate: 'rowTemp.html'
, columnDefs: [{
field: 'FIELD1', name: 'my field name', width: "7%"
, filter: { type: uiGridConstants.filter.SELECT, selectOptions: Opts }
}, { ...
}, { ...
}]
}
}
You place your rowTemp.html where your .html page is. In your rowTemp.html, you have
<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell' " class="ui-grid-cell" ng-class="row.entity._ab_x_style" role="{{col.isRowHeader ? 'rowheader' : 'gridcell' }}" ui-grid-cell></div>
plunker
I want to display vote records per service in my column chart. Then, when i click 1 of the service it will show up the vote records of that service by day.
<?php
$sql = $mysqli->query("SELECT * FROM services");
while ($row0 = $sql0->fetch_assoc()) {
$sid0 = $row0['sid'];
$service[] = $row0['service'];
$sql1 = $mysqli->query("SELECT COUNT(*) as totalVotes FROM entries where sid = '$sid0'");
while ($row01 = $sql01->fetch_assoc()) {
$totalVote01 = $row01['totalVotes'];
$vote01[] = (int)$totalVote01;
}
}
?>
<script>
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: ['<?php echo join($service, ', ') ?>']
}
series: [{
name: 'Total Votes per Service',
data: [{
name: '<?php echo join($service, ', ') ?>',
y: '<?php echo join($vote01, ', ') ?>',
drilldown: '<?php echo join($service, ', ') ?>'
}]
}]
})
</script>
Error: Highcharts error #14: www.highcharts.com/errors/14
Please help me with codes, my presentation is tomorrow badly need your help. Just a beginner. Thank you so very much!
Problem is in this line
y: '<?php echo join($vote01, ', ') ?>',
It will return a String as '12'
You need to pass a number here.
You can try withoit quote
y: <?php echo join($vote01, ', ') ?>,
or parse value before setting
y: parseFloat('<?php echo join($vote01, ', ') ?>' ),
I have a line chart with xAxis values as timestamps and yAxis values has a number. The definition is easy:
xAxis : [ {
type : 'datetime'
labels: {
formatter: function(){
// Custom function formatting timestamps
}
}
]
Data from my API come like this and works great.
data:[
[1558648800, 10256],
[1558648801, 10258],
[1558648802, 10259]
]
The issue now is that I need to show a message in a tooltip, so I found some solutions like https://stackoverflow.com/a/8515679.
data: [
{y : 10256, myData : 'Message 1'},
{y : 10258, myData : 'Message 2'},
{y : 10259, myData : 'Message 3'}
]
In this solution xAxis data dissapears so the unique way that I found is using name attribute as xAxis, but I thought that is not the best while managing timestamps and autommatic tikcIntervals.
(I delegate intervals on Highcharts, doesn't matter).
So my question is, what it would be the best way to create that extra attribute (myData) for tooltip, considering datetime with timestamps line chart?
Thanks in advance
You can use data with x, y and myData properties:
series: [{
data: [{
x: 1558648800,
y: 10256,
myData: 'Message 1'
},
{
x: 1558648801,
y: 10258,
myData: 'Message 2'
},
{
x: 1558648802,
y: 10259,
myData: 'Message 3'
}
]
}]
Or define the data as an array and use keys property:
series: [{
keys: ['x', 'y', 'myData'],
data: [
[1558648800, 10256, 'Message 1'],
[1558648801, 10258, 'Message 2'],
[1558648802, 10259, 'Message 3']
],
}]
Live demo: http://jsfiddle.net/BlackLabel/nsw46pLx/
API Reference:
https://api.highcharts.com/highcharts/series.line.data
https://api.highcharts.com/highcharts/series.line.keys
I have an issue with xAxis labels formatter.
At this link "http://api.highcharts.com/highcharts#xAxis.labels.formatter" highchart api show some additional properties for "this" (chart, axis, value, isFirst, isLast) and get different by this.value. But in my case have many item in categories same value (http://jsfiddle.net/xfetaarL). So is possible for adding more additional properties (ex: id ) for separate item and then we can use that "id" in formatter function ?
function() {
var id = this.id // this is my own property that I want to add
return this.value;
}
Thanks for any your help. :wink:
Yes, you can change format for xAxis.categories, see: http://jsfiddle.net/xfetaarL/2/
xAxis: {
categories: [{
name: 'Foobar',
id: '#1'
}, {
name: 'Foobar',
id: '#2'
}, {
name: 'Foobar',
id: '#3'
}],
labels: {
formatter: function () {
return '' + this.value.name + ' dhlId:' + this.value.id + '';
}
}
},
Let me know if something is not clear.
When using $('#container').highcharts('StockChart', { ... the highest value of the y-Axis is not shown. If I try it without StockChart, it is ok.
Example in http://jsfiddle.net/h5bSV/3/ the value 430 is missing.
Is there a possibility to show this label?
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=new-intraday.json&callback=?', function(data) {
// create the chart
$('#container').highcharts('StockChart', {
title: {
text: 'AAPL stock price by minute'
},
tooltip:{
formatter:function(){
return "open: " + this.points[0].point.open + 'close: ' + this.points[0].point.close + ' high: ' + this.points[0].point.high + ' low:' + this.points[0].point.low;
}
},
series : [{
name : 'AAPL',
type: 'candlestick',
data : data,
tooltip: { valueDecimals: 2}
}]
});
});
});
You need to set ShowLastLabel as true.