We Keep Coding

How to disable converting decimal number to exponential?

window.chartColors = {
red: '#ffb5c5',
orange: '#FFA500',
yellow: '#F0E68C',
green: '#aee0e0',
blue: '#87CEFA',
purple: '#EE82EE',
grey: '#C0C0C0'
};
$(document).ready(function() {
var data = [{
"tc": "1.25173997",
"trf": "0.00000024",
"nc": "1.00139199",
"formatted_date": "temmp1",
"from_date": "2019-02-01 00:00:00",
"to_date": "2019-02-08 23:59:59"
}, ];
var formatted_date = [];
var tcs = [];
var trps = [];
var ncs = [];
// var data = $.parseJSON(data);
$.each(data, function(index, item) {
formatted_date.push(item.formatted_date);
tcs.push(item.tc);
trps.push(item.trf);
ncs.push(item.nc);
});
refData = [{
label: 'C',
backgroundColor: window.chartColors.blue,
borderColor: window.chartColors.blue,
data: tcs,
fill: false,
/* cubicInterpolationMode: 'monotone' */
},
{
label: 'R P',
backgroundColor: window.chartColors.red,
borderColor: window.chartColors.red,
data: trps,
fill: false
},
{
label: 'N C',
backgroundColor: window.chartColors.green,
borderColor: window.chartColors.green,
data: ncs,
fill: false
},
];
var chartdata = {
labels: formatted_date,
datasets: refData
};
//console.log(chartdata);
var graphTarget = $("#myChart");
var Graph = new Chart(graphTarget, {
type: 'line',
data: chartdata,
options: {
responsive: true,
title: {
display: true,
text: 'R P'
},
scales: {
xAxes: [{
// stacked: true,
display: true,
scaleLabel: {
display: true,
labelString: 'Duration'
}
}],
yAxes: [{
// stacked: true,
display: true,
scaleLabel: {
display: true,
labelString: 'Amt'
},
ticks: {
min: 0, // it is for ignoring negative step.
}
}]
},
},
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<div style="width:75%;">
<canvas id="myChart"></canvas>
</div>
As you can see for R P 0.00000024 is getting converted into 2.4e-7. But I want it show as is i.e. 0.00000024.
For other decimals numbers, it's perfectly fine, but for the above-mentioned decimal, it's converting into exponential. Is there any option to set? Is this possible?

With the help of this solution, I patched my problem. If anyone got better solution let me know.
Number.prototype.noExponents = function() {
var data = String(this).split(/[eE]/);
if (data.length == 1) return data[0];
var z = '',
sign = this < 0 ? '-' : '',
str = data[0].replace('.', ''),
mag = Number(data[1]) + 1;
if (mag < 0) {
z = sign + '0.';
while (mag++) z += '0';
return z + str.replace(/^\-/, '');
}
mag -= str.length;
while (mag--) z += '0';
return str + z;
}
window.chartColors = {
red: '#ffb5c5',
orange: '#FFA500',
yellow: '#F0E68C',
green: '#aee0e0',
blue: '#87CEFA',
purple: '#EE82EE',
grey: '#C0C0C0'
};
$(document).ready(function() {
var data = [{
"tc": "1.25173997",
"trf": "0.00000024",
"nc": "1.00139199",
"formatted_date": "temmp1",
"from_date": "2019-02-01 00:00:00",
"to_date": "2019-02-08 23:59:59"
}, ];
var formatted_date = [];
var tcs = [];
var trps = [];
var ncs = [];
// var data = $.parseJSON(data);
$.each(data, function(index, item) {
formatted_date.push(item.formatted_date);
tcs.push(item.tc);
trps.push(item.trf);
ncs.push(item.nc);
});
refData = [{
label: 'C',
backgroundColor: window.chartColors.blue,
borderColor: window.chartColors.blue,
data: tcs,
fill: false,
/* cubicInterpolationMode: 'monotone' */
},
{
label: 'R P',
backgroundColor: window.chartColors.red,
borderColor: window.chartColors.red,
data: trps,
fill: false
},
{
label: 'N C',
backgroundColor: window.chartColors.green,
borderColor: window.chartColors.green,
data: ncs,
fill: false
},
];
var chartdata = {
labels: formatted_date,
datasets: refData
};
//console.log(chartdata);
var graphTarget = $("#myChart");
var Graph = new Chart(graphTarget, {
type: 'line',
data: chartdata,
options: {
responsive: true,
title: {
display: true,
text: 'R P'
},
scales: {
xAxes: [{
// stacked: true,
display: true,
scaleLabel: {
display: true,
labelString: 'Duration'
}
}],
yAxes: [{
// stacked: true,
display: true,
scaleLabel: {
display: true,
labelString: 'Amt'
},
ticks: {
min: 0, // it is for ignoring negative step.
}
}]
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += tooltipItem.yLabel.noExponents();
return label;
}
}
}
},
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<div style="width:75%;">
<canvas id="myChart"></canvas>
</div>

Chart.JS Not Formatting Y-Axis-1 Properly

I am utilizing the below syntax to format the display points as $ and %. Well so I thought. My issue is that both the display points are displayed as $, it's almost like the y-axis-1 is not being picked up at all. Am I missing a closing bracket or something silly in the syntax? What is causing the % to not be applied to the line graph?
var labelsarr = ["Richard 14", "Richard 15", "Jason 14", "Jason 15", "Jack 14", "Jack 15"];
var ctx = document.getElementById('canvas1').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: labelsarr,
datasets: [{
type: 'line',
fill: false,
label: 'Sale Total',
backgroundColor: 'rgba(255,0,0,1)',
borderColor: 'rgba(255,0,0,1)',
data: values1,
yAxisID: 'y-axis-1'
}, {
label: 'Sale Total',
backgroundColor: 'rgba(0, 129, 214, 0.8)',
data: values
}]
},
options: {
tooltips: {
callbacks: {
label: function (t, d) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
return xLabel + ': ' + yLabel;
}
}
},
legend: {
display: false,
position: 'top',
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function (value, index, values) {
if (parseInt(value) >= 1000) {
return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else {
return '$' + value;
}
}
}
}, {
id: 'y-axis-1',
position: 'right',
ticks: {
beginAtZero: true,
callback: function (value, index, values) {
return value + '%';
}
}
}]
}
}
});

This is because, you are returning same tooltip label for both the datasets.
You should rather use the following tooltips callback function :
callbacks: {
label: function(t, d) {
if (t.datasetIndex === 0) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel;
return xLabel + ': ' + yLabel + '%';
} else {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
return xLabel + ': ' + yLabel;
}
}
}
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ
var labelsarr = ["Richard 14", "Richard 15", "Jason 14", "Jason 15", "Jack 14", "Jack 15"];
var values = [1, 2, 3, 4, 5, 6];
var values1 = [1, 2, 3, 4, 5, 6];
var ctx = document.getElementById('canvas1').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: labelsarr,
datasets: [{
type: 'line',
fill: false,
label: 'Sale Total',
backgroundColor: 'rgba(255,0,0,1)',
borderColor: 'rgba(255,0,0,1)',
data: values1,
yAxisID: 'y-axis-1'
}, {
label: 'Sale Total',
backgroundColor: 'rgba(0, 129, 214, 0.8)',
data: values
}]
},
options: {
tooltips: {
callbacks: {
label: function(t, d) {
if (t.datasetIndex === 0) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel;
return xLabel + ': ' + yLabel + '%';
} else {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
return xLabel + ': ' + yLabel;
}
}
}
},
legend: {
display: false,
position: 'top',
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
if (parseInt(value) >= 1000) {
return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else {
return '$' + value;
}
}
}
}, {
id: 'y-axis-1',
position: 'right',
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
return value + '%';
}
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="canvas1"></canvas>

Generate Chart With 2 Datasets Charts.js

I can get my chart to display with 1 dataset no problem, but adding in the second one to the syntax below gives me an error of
Uncaught Syntax Error: Unexpected Token }
This is my syntax - what is causing the issue?
var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx, {
datasets: [{
type: 'bar',
labels: labelsarr,
label: 'Red Team',
backgroundColor: 'rgba(0, 129, 214, 0.8)',
data: [values]
}, {
type: 'line',
label: 'Green Team',
backgroundColor: 'rgba(0,129, 218, 0.8)',
data: [values1]
}, {
options: {
tooltips: {
callbacks: {
label: function (t, d) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
return xLabel + ': ' + yLabel;
}
}
},
legend: {
display: false,
position: 'top',
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function (value, index, values) {
if (parseInt(value) >= 1000) {
return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else { return '$' + value; }
}
}
}]
}
},
plugins: [{
beforeDraw: function (chart) {
var labels = chart.data.labels;
}
}]
}
}]
);

The second last line of your code }] is backwards. It should be ]}
reconfigured structure:
var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [
{
label: 'Red Team',
data: values,
backgroundColor: 'rgba(0, 129, 214, 0.8)',
},
{
label: 'Green Team',
data: values1,
type: 'line',
backgroundColor: 'rgba(0,129, 218, 0.8)',
}
],
labels: labelsarr
},
options: {
callbacks: {
label: function (t, d) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
return xLabel + ': ' + yLabel;
}
},
legend: {
display: false,
position: 'top'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function (value, index, values) {
if (parseInt(value) >= 1000) {
return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else { return '$' + value; }
}
}
}]
}
},
plugins: [{
beforeDraw: function (chart) {
var labels = chart.data.labels;
}
}]
});

HighCharts Stacked Column Adding Onclick Event to the chart

I am working on a Highchart column chart.
I need to add an onclick event to it so I can get data back when I click on the different columns.
Here is my current full code.
var chart;
$(function () {
$.ajax({
url: 'url here',
method: 'GET',
async: false,
success: function(result) {
themainData = result;
}
});
var mainData = [themainData];
var chList=[];
var voList=[];
var coList=[];
for (var i = 0; i < mainData[0].ch.length; i++) {
var obj = mainData[0].ch[i];
var chlst = obj.name;
var vl = obj.st.vo;
var cl = obj.st.co;
chList.push(chlst);
voList.push(vl);
coList.push(cl);
}
var chart = {
type: 'column',
};
var title = {
text: 'Vo and Co'
};
var xAxis = {
categories: chList
};
var yAxis ={
min: 0,
title: {
text: 'Ch'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
};
var legend = {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
};
var tooltip = {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
};
var plotOptions = {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
};
var credits = {
enabled: false
};
var series= [{
name: 'Vo',
data: voList
}, {
name: 'Co',
data: coList
}];
var json = {};
json.chart = chart;
json.title = title;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.legend = legend;
json.tooltip = tooltip;
json.plotOptions = plotOptions;
json.credits = credits;
json.series = series;
$('#container').highcharts(json);
});
Where do I add the onclick event here?

You can add the click event on the chart, series, or point. I think it makes sense in your case to add the click event to the series.
var series= [{
name: 'Vo',
data: voList
events: {
click: function (event) {}
}
}, {
name: 'Co',
data: coList
}];
event.point is the point that is clicked on. See http://api.highcharts.com/highcharts/series%3Cbar%3E.events.click

This works for me,
chart: {
type: "bar",
},
title: {
text: "Stacked bar chart",
},
xAxis: {
categories: ["Apples", "Oranges", "Pears", "Grapes", "Bananas"],
},
yAxis: {
min: 0,
title: {
text: "Total fruit consumption",
},
},
legend: {
reversed: true,
},
plotOptions: {
series: {
cursor: 'pointer',
stacking: "normal",
events: {
click: function(event) {
alert(
this.name + ' clicked\n' +
'Alt: ' + event.altKey + '\n' +
'Control: ' + event.ctrlKey + '\n' +
'Meta: ' + event.metaKey + '\n' +
'Shift: ' + event.shiftKey
);
}
}
},
},
series: [{
name: "John",
data: [5, 3, 4, 7, 2],
},
{
name: "Jane",
data: [2, 2, 3, 2, 1],
},
{
name: "Joe",
data: [3, 4, 4, 2, 5],
},
],
});```

Chart.js stacked and grouped bar chart

is there any way to do a stacked and grouped bar chart with Chart.js library?
It should look something like this http://www.highcharts.com/demo/column-stacked-and-grouped

OK, I found the solution. It's described in this GitHub issue and solution is in this JSFiddle
Chart.defaults.groupableBar = Chart.helpers.clone(Chart.defaults.bar);
var helpers = Chart.helpers;
Chart.controllers.groupableBar = Chart.controllers.bar.extend({
calculateBarX: function (index, datasetIndex) {
// position the bars based on the stack index
var stackIndex = this.getMeta().stackIndex;
return Chart.controllers.bar.prototype.calculateBarX.apply(this, [index, stackIndex]);
},
hideOtherStacks: function (datasetIndex) {
var meta = this.getMeta();
var stackIndex = meta.stackIndex;
this.hiddens = [];
for (var i = 0; i < datasetIndex; i++) {
var dsMeta = this.chart.getDatasetMeta(i);
if (dsMeta.stackIndex !== stackIndex) {
this.hiddens.push(dsMeta.hidden);
dsMeta.hidden = true;
}
}
},
unhideOtherStacks: function (datasetIndex) {
var meta = this.getMeta();
var stackIndex = meta.stackIndex;
for (var i = 0; i < datasetIndex; i++) {
var dsMeta = this.chart.getDatasetMeta(i);
if (dsMeta.stackIndex !== stackIndex) {
dsMeta.hidden = this.hiddens.unshift();
}
}
},
calculateBarY: function (index, datasetIndex) {
this.hideOtherStacks(datasetIndex);
var barY = Chart.controllers.bar.prototype.calculateBarY.apply(this, [index, datasetIndex]);
this.unhideOtherStacks(datasetIndex);
return barY;
},
calculateBarBase: function (datasetIndex, index) {
this.hideOtherStacks(datasetIndex);
var barBase = Chart.controllers.bar.prototype.calculateBarBase.apply(this, [datasetIndex, index]);
this.unhideOtherStacks(datasetIndex);
return barBase;
},
getBarCount: function () {
var stacks = [];
// put the stack index in the dataset meta
Chart.helpers.each(this.chart.data.datasets, function (dataset, datasetIndex) {
var meta = this.chart.getDatasetMeta(datasetIndex);
if (meta.bar && this.chart.isDatasetVisible(datasetIndex)) {
var stackIndex = stacks.indexOf(dataset.stack);
if (stackIndex === -1) {
stackIndex = stacks.length;
stacks.push(dataset.stack);
}
meta.stackIndex = stackIndex;
}
}, this);
this.getMeta().stacks = stacks;
return stacks.length;
},
});
var data = {
labels: ["January", "February", "March"],
datasets: [
{
label: "Apples",
backgroundColor: "rgba(99,255,132,0.2)",
data: [20, 10, 30],
stack: 1
},
{
label: "Bananas",
backgroundColor: "rgba(99,132,255,0.2)",
data: [40, 50, 20],
stack: 1
},
{
label: "Cookies",
backgroundColor: "rgba(255,99,132,0.2)",
data: [60, 20, 20],
stack: 1
},
{
label: "Apples",
backgroundColor: "rgba(99,255,132,0.2)",
data: [20, 10, 30],
stack: 2
},
{
label: "Bananas",
backgroundColor: "rgba(99,132,255,0.2)",
data: [40, 50, 20],
stack: 2
},
{
label: "Cookies",
backgroundColor: "rgba(255,99,132,0.2)",
data: [60, 20, 20],
stack: 2
},
{
label: "Apples",
backgroundColor: "rgba(99,255,132,0.2)",
data: [20, 10, 30],
stack: 3
},
{
label: "Bananas",
backgroundColor: "rgba(99,132,255,0.2)",
data: [40, 50, 20],
stack: 3
},
{
label: "Cookies",
backgroundColor: "rgba(255,99,132,0.2)",
data: [60, 20, 20],
stack: 3
},
]
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
type: 'groupableBar',
data: data,
options: {
legend: {
labels: {
generateLabels: function(chart) {
return Chart.defaults.global.legend.labels.generateLabels.apply(this, [chart]).filter(function(item, i){
return i <= 2;
});
}
}
},
scales: {
yAxes: [{
ticks: {
max: 160,
},
stacked: true,
}]
}
}
});

You should use the stack property of the dataset object for each dataset.
As you can see in Chart.js Documentation, stack is defined as:
"The ID of the group to which this dataset belongs to (when stacked, each group will be a separate stack)"
I believe this functionality has been introduced recently and in 2016 Chart.js did not have this because of this post

You can acheive stacked bar chart with below data
this.dataStackedBarChart = {
type: 'horizontalBar',
labels: this.stackedBarChartLabel,
datasets: [
{
label: 'Success Count',
stack: 'Stack 0',
data: this.successCount,
backgroundColor: 'green'
},
{
label: 'FailureCount',
stack: 'Stack 0',
data: this.failureCount,
backgroundColor: 'red'
},
{
label: 'AvgDuration',
stack: 'Stack 1',
data: this.avgDuration,
backgroundColor: 'black'
},
{
label: 'MaxDuration',
stack: 'Stack 2',
data: this.maxDuration,
backgroundColor: 'orange'
},
{
label: 'MinDuration',
stack: 'Stack 3',
data: this.minDuration,
backgroundColor: 'pink'
}
],
borderWidth: 2
}
this.optionsStackedBarChart = {
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
var label = this.uniqueApiPath[tooltipItem.index];
return label;
}
}
},
scales: {
xAxes: [
{
stacked: true,
display: true,
ticks: {
beginAtZero: true,
min: 0,
suggestedMin: 0
}
}
],
yAxes: [
{
stacked: true,
display: true,
ticks: {
beginAtZero: true,
min: 0,
suggestedMin: 0
}
}
]
}