Develop Reference

Chart.js: Label each dataset

I've been trying to make chart.js have a label for each dataset but the first label is located underneath both datasets and the second on an empty area of the chart.
var powerChart = new Chart(powerCanvas, {
type: "bar",
data: {
labels: ["Volts", "Amperes"],
datasets: [
{
label: "Volts", // This bar should have this label underneath itself
data: [24.78], // Initial value, will be overwritten
},
{
label: "Amperes", // This bar should have this label underneath itself
data: [14.51],
},
],
},
options: {},
});
See https://jsfiddle.net/w20c3tru/2/ for what I have tried and a working example.
Note: I tried to follow
Chart.js Line-Chart with different Labels for each Dataset
but could not see any difference.

Note the comments below:
var powerChart = new Chart(powerCanvas,
{
type: 'bar',
data:
{
labels: ['Volts', 'Amperes'],
datasets:
[
{
label: 'Value', // This is actually the label that shows up when you hover over a bar
data: [24.78, 14.51] // NOTE: Number of labels defined above should equal number of values here
},
]
},
options:
{
}
}
);
Edit:
data:
{
labels: ['Volts', 'Amperes'],
datasets:
[
{
data: [24.78, 14.51], // Volts and amperes, respectively
borderWidth: 1,
borderColor: ['#0000e0', '#e00000'], // Border colors for volts and amperes, respectively
},
]
},

Finally I have it working as I want thanks to a hint by a user who separated the data in x and y sections
Code on jsFiddle
Full working example here:
jsFiddle

Pushing data from json to Chart.js labels and data

I am using the Chart.js lib to make charts.
I have a json array that I am getting from a database.
Here is the console log of it: Data
I need to get the address, speed, and speed limit for every element in the list and use it in a chart.
My current code is as follows:
function ShowChart() {
var popCanvas = document.getElementById("speedLimitsChart");
console.dir(speeddata);
var labels = speeddata.map(function (e) {
return e.Adress;
});
var speed = speeddata.map(function (e) {
return e.Speed;
});
var speedlimits = speeddata.map(function (e) {
return e.SpeedLimits;
});
console.dir(labels);
var barChart = new Chart(popCanvas, {
type: 'bar',
data: {
datasets: [{
label: 'Speed',
data: speed,
backgroundColor: '#1E90FF'
}, {
label: 'Speed Limits',
data: speedlimits,
backgroundColor: '#B22222',
type: 'line'
}],
},
labels: labels
});
}
But in the result I only have the first element in my chart, and there are no labels.
Here is the output screen: Chart
I checked speed, speedlimits and labels and all of them have 2 elements. Can you please advise where my problem might be?

I found where is my problem
I need to write labels inside of data
Like this
var barChart = new Chart(popCanvas, {
type: 'bar',
data: {
labels: labels ,
datasets: [{
label: 'Speed',
data: speed,
backgroundColor: '#1E90FF'
}, {
label: 'Speed Limits',
data: speedlimits,
backgroundColor: '#B22222',
type: 'line'
}],
},
});

How to sort XY line chart tooltip items based on value and add thousands separators?

I'm using Chart.js 2.1.4 and I would like to sort tooltip items based on the tooltip item value (yAxis value). I would also like to add thousands separator to values.
The lines in following picture should be sorted based on the value:
This adds separator for Scales: Chart.js 2.0 Formatting Y Axis with Currency and Thousands Separator
Using Documentation: http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration and the Question above I have tried modifying the code for Tooltips value:
var chart_config = {
type: 'line',
data: {datasets: mydatasets},
options: {
tooltips: {
mode: 'label',
bodySpacing: 10,
titleMarginBottom: 15,
callbacks: {
beforeLabel: function(tooltipItem, data) {
var tooltipValue = tooltipItem.xLabel + ': ' + tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
console.log(tooltipValue);
return tooltipValue;
},
},
},
}
};
var chartHolder = document.getElementById("chartHolder");
var chart = new Chart(chartHolder, chart_config);
The problem is it now returns only part of the tooltip items and there is error in console: TypeError: vm.labelColors[i] is undefined.
How should I format the function's return value to not have any errors and present the data as specified?

You can use the itemSort callback option for tooltips, e.g.
tooltips: {
itemSort: (a, b, data) => b.yLabel - a.yLabel
}

You have this information in the Docs: ChartJS Tooltip Configuration Callbacks
You could do this:
var myChart;
myChart = {
type: 'line',
data: {
datasets: mydatasets
},
options: {
tooltips: {
mode: 'label',
callbacks: {
title: function(tooltipItem) {
return moment(tooltipItem[0].xLabel).format('ll');
},
label: function(tooltipItem, data) {
return data.datasets[tooltipItem.datasetIndex].label + ": " + tooltipItem.yLabel;
}
}
}
}
};

Highcharts not plotting Date string as Category

I am using Highcharts to plot JSON Data. The dates are in the string format.
JSON Data:
[{"BRENT_SPOT":70.88,"TRADE_DATE":"31-JUL-2009"},{"BRENT_SPOT":73.28,"TRADE_DATE":"03-AUG-2009"},{"BRENT_SPOT":74.31,"TRADE_DATE":"04-AUG-2009"},{"BRENT_SPOT":74.96,"TRADE_DATE":"05-AUG-2009"},{"BRENT_SPOT":74.4,"TRADE_DATE":"06-AUG-2009"},{"BRENT_SPOT":72.84,"TRADE_DATE":"07-AUG-2009"},{"BRENT_SPOT":73.29,"TRADE_DATE":"10-AUG-2009"},{"BRENT_SPOT":72.04,"TRADE_DATE":"11-AUG-2009"}]
HighCharts / JQuery Code :
<script>
var chart;
$(function() {
var options = {
chart: {
renderTo: 'container',
zoomType: 'xy',
type: 'line'
},
title: {
text: 'Brent Daily Price Curve (FPC as at <cfoutput>#f_date#</cfoutput>)'
},
xAxis: {
labels: {
rotation: 45,
step: 3
},
type: 'category'
},
yAxis: {
lineWidth: 1,
title: {
text: '$ USD'
},
min: 0
},
series: []
};
$.getJSON("brentpricehc_test.cfm?f_date=<cfoutput>#f_date#</cfoutput>", {}, function(jsonResult) {
var BrentUSDPrice = {
name: "Brent Spot (USD)",
type: "line",
data: [],
marker: {
radius: 2
}
};
$(jsonResult).each(function(index) {
BrentUSDPrice.data.push([this.TRADE_DATE, this.BRENT_SPOT]);
});
/*options.series[0] = BrentUSDPrice;*/
options.series.push(BrentUSDPrice);
chart = new Highcharts.Chart(options);
});
});
</script>
I'm unable to plot any values wrt each of the date strings. I tried converting the JSON dates to datetime instead but still the same issue.
Few More details (for testing purposes):
Modifying to the below line plots the graph with the correct "brent_spot" values. This means that the issue lies with the way the "trade_dates" are 'not' plotting.
BrentUSDPrice.data.push([index, this.BRENT_SPOT]);
Edit 2 : (Using Datetime type to make the code work)
JSON Data (New): Returned as TO_CHAR(TRADE_DATE, 'YYYY/MM/DD')
[{"BRENT_SPOT":70.88,"TRADE_DATE":"2009\/07\/31"},{"BRENT_SPOT":73.28,"TRADE_DATE":"2009\/08\/03"},{"BRENT_SPOT":74.31,"TRADE_DATE":"2009\/08\/04"},{"BRENT_SPOT":74.96,"TRADE_DATE":"2009\/08\/05"},{"BRENT_SPOT":74.4,"TRADE_DATE":"2009\/08\/06"},{"BRENT_SPOT":72.84,"TRADE_DATE":"2009\/08\/07"},{"BRENT_SPOT":73.29,"TRADE_DATE":"2009\/08\/10"},{"BRENT_SPOT":72.04,"TRADE_DATE":"2009\/08\/11"}]
$(jsonResult).each(function(index) {
BrentUSDPrice.data.push([new Date(this.TRADE_DATE), this.BRENT_SPOT]);
});
Server side language used : Coldfusion
Database : Oracle
Am I doing something silly somewhere?

I have just tried your code, and it works perfectly fine, see: http://jsfiddle.net/3bQne/1026/
I guess, you need to update to Highcharts 3.0.10 to get this working.

If you are using type: 'category' then you need to assign name: to the data points. See the categories entry at http://api.highcharts.com/highcharts#xAxis
If categories are present for the xAxis, names are used instead of numbers for that axis. Since Highcharts 3.0, categories can also be extracted by giving each point a name and setting axis type to "category".
So the question is whether you are using Highcharts 3.0 and if you do then it needs to look something like this:
data: [{
name: 'Point 1',
color: '#00FF00',
y: 0
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
see: http://api.highcharts.com/highcharts#series.data

hide legend labels if zero data in jquery pie chart

I am trying to plot a pie chart with data set containing zero values.But pie chart shows only labels till data gets updated.
What if I wanted to show empty pie chart.
I have given:
var data = [
{
label: "Series1",
data: 0,
url: "http://stackoverflow.com"},
{
label: "Series2",
data: 0,
url: "http://serverfault.com"},
{
label: "Serie3",
data: 0,
url: "http://superuser.com"},
{
label: "Series4",
data: 0,
url: "http://www.google.com"},
{
label: "Series5",
data: 0,
url: "http://www.oprah.com"},
{
label: "Series6",
data: 0,
url: "http://www.realultimatepower.net/"}
];
var options = {
series: {
pie: {
show: true
}
},
grid: {
hoverable: true
}
};
var plot = $.plot($("#graphLoaderDiv"), data, options);

Modify your label formatter function to return null if the series percent is zero.

After digging deeper I realized The best possible solution is to not to show pie chart if your data set values are zero.You either can do it editing following plugin or adding check inside your plotting function.
Download jquery.flot.pie.js from here
http://code.google.com/p/flot/issues/detail?id=530
Go to line No 411 and modify code as follows.
if( isNaN(angle) ) {
//var html = html = '<span class="pieLabel" id="pieLabelNoData" style="position:absolute;top:20px;left:5px;">There is no available data.</span>';
//html = target.append(html);
target.hide();
}

you can show empty data like this
$piedata="[{label:'no data',data:1}]";