Related
I'm using nodejs as back/front-end implementation for a quick UI overview of an index in nodejs, and I'd like to use datatables with server side processing to display the data in a properly formated table.
It grabs all of the data fine, however it just dumps all of the records into one page on the table.
Model:
const { Client } = require('#elastic/elasticsearch')
const client = new Client({
node: '',
auth: {
username: '',
password: ''
}
})
module.exports = function getElasticData(callback/*, size*/) {
//parseInt(inputSize) = size;
client.search({
index: 'anomalies02_bhc-lstm2',
size: 10000,
body: {
query: {
match_all: {}
}
}
}, function (error, response, status) {
if (error) {
console.log("search error: " + error)
}
if (response) {
var elasticList = [];
//console.log("EL:" + JSON.stringify(response))
response.body.hits.hits.forEach(function (hit) {
elasticList.push(hit);
})
//callback(elasticList.sort());
//console.log("SORTED LIST: " + JSON.stringify(elasticList))
callback(elasticList);
}
else {
console.log("<p>No results</p>");
}
});
}
Controller:
var elasticDataModel = require('../model/getDataElastic');
exports.getData = function (req, res) {
elasticDataModel(function (elasticList) {
var searchStr = req.body.search.value;
var recordsTotal = 0;
var recordsFiltered = 0;
var size = parseInt(req.body.length);
var recordsFiltered = elasticList.slice(0, size)
console.log("LENGTH: " + JSON.stringify(req.body.length))
console.log("FILTERED: " + JSON.stringify(recordsFiltered))
//console.log(elasticList[0]._source);
console.log(typeof parseInt(req.body.draw))
console.log(elasticList.length)
recordsTotal = elasticList.length;
//console.log("DRAW " + req.body.draw);
var data = JSON.stringify({
"data": elasticList,
"draw": parseInt(req.body.draw),
"recordsTotal": recordsTotal,
"recordsFiltered": recordsFiltered
});
res.send(data);
});
}
HTML:
$(document).ready(function () {
var t = $('#example2').DataTable({
"paging": true,
"processing": true,
"serverSide": true,
'ajax': {
'type': 'POST',
'url': '/populateData'
},
'pageLength': 20,
'lengthMenu': [5, 10, 20, 50, 100, 200, 500],
'columns':
[
{ 'data': '_id', "defaultContent": "", 'name': 'ID' },
{ "defaultContent": "", 'name': 'Kibana Link' },
{ 'data': '_source.Environment', "defaultContent": "", 'name': 'Environment' },
{ 'data': '_source.Cause', "defaultContent": "", 'name': 'Downtime cause' },
{ 'data': '_source.Start', "defaultContent": "", 'name': 'Detected start' },
{ 'data': '_source.End', "defaultContent": "", 'name': 'Detected end' },
{ "defaultContent": "", 'name': 'Actual start' },
{ "defaultContent": "", 'name': 'Actual end' },
{ "defaultContent": "", 'name': 'Reason category' },
{ "defaultContent": "", 'name': 'Reason details' },
{ "defaultContent": "", 'name': 'Submit' },
],
"columnDefs": [
{
"searchable": true,
"orderable": true,
"targets": 0
}
]
});
});
I modifed my code accordingly with help from Kevin at the datatables forums and now it works flawlessly.
Changed code:
Controller
var elasticDataModel = require('../model/getFilteredDataElastic');
var pageLength;
var pageStart;
exports.getData = function (req, res) {
pageLength = req.body.length;
pageStart = req.body.start
console.log("MODEL Length: " + pageLength)
elasticDataModel(pageLength, pageStart, function (elasticFilteredList) {
var searchStr = req.body.search.value;
var recordsTotal = 0;
var recordsFiltered = 0;
console.log("PAGE LENGTH: " + pageLength)
if (req.body.search.value) {
var regex = new RegExp(req.body.search.value, "i")
searchStr = { $or: [{ '_id': regex }, { 'Environment': regex }, { 'Downtime cause': regex }, { 'Detected start': regex }, { 'Detected end': regex }, { 'Reason details': regex }] };
}
else {
searchStr = {};
}
var size = parseInt(req.body.length);
var recordsFiltered = elasticFilteredList
var data = JSON.stringify({
"data": elasticFilteredList,
"draw": parseInt(req.body.draw),
"recordsTotal": elasticFilteredList[0],
"recordsFiltered": recordsFiltered
});
res.send(data);
});
}
Model:
const { Client } = require('#elastic/elasticsearch')
const client = new Client({
node: '',
auth: {
username: '',
password: ''
}
})
module.exports = function getElasticData(arg, arg2, callback) {
console.log("CONTROLLER SIZE: " + arg)
console.log("CONTROLLER FROM: " + arg2)
client.search({
index: 'anomalies02_bhc-lstm2',
from: arg2,
size: arg,
body: {
query: {
match_all: {}
}
}
}, function (error, response, status) {
if (error) {
console.log("search error: " + error)
}
if (response) {
var elasticFilteredList = [];
console.log("VALUE: " + response.body.hits.total.value);
elasticFilteredList.push(response.body.hits.total.value);
response.body.hits.hits.forEach(function (hit) {
elasticFilteredList.push(hit);
})
callback(elasticFilteredList);
}
else {
console.log("<p>No results</p>");
}
});
}
i am using highchart export server for generate chart in NodeJs
but when i am generating many charts it gives error like 0x03 error when performing chart generation: please check your input data
here is my code
exports.generateAllCharts = (chartData, callback) => {
highchartsExporter.initPool({
maxWorkers: 100,
initialWorkers: 40,
workLimit: 100,
queueSize: 40,
timeoutThreshold: 600000
});
var allPromises = [];
if(!chartData ||chartData.length === 0) {
return callback({
code: '4',
msg: 'Please send chartdata'
})
}
allPromises.push(exports.getStockChartImg(chartData[1]));
allPromises.push(exports.priceChartVsPeersImg(chartData[2]));
allPromises.push(exports.getPieChartImg(chartData[3]));
allPromises.push(exports.getPieChartImg(chartData[4]));
allPromises.push(exports.getPieChartImg(chartData[5]));
allPromises.push(exports.getPieChartImg(chartData[6]));
allPromises.push(exports.getPieChartImg(chartData[13]));
allPromises.push(exports.getPieChartImg(chartData[14]));
allPromises.push(exports.getPieChartImg(chartData[15]));
allPromises.push(exports.getPieChartImg(chartData[16]));
allPromises.push(exports.getPieChartImg(chartData[18]));
allPromises.push(exports.getPieChartImg(chartData[19]));
allPromises.push(exports.getPieChartImg(chartData[7]));
allPromises.push(exports.getPieChartImg(chartData[17]));
allPromises.push(exports.getPieChartImg(chartData[20]));
allPromises.push(exports.getPieChartImg(chartData[21]));
allPromises.push(exports.getPieChartImg(chartData[22]));
allPromises.push(exports.getPieChartImg(chartData[23]));
allPromises.push(exports.getPieChartImg(chartData[24]));
allPromises.push(exports.getPieChartImg(chartData[25]));
allPromises.push(exports.getPieChartImg(chartData[26]));
allPromises.push(exports.getPieChartImg(chartData[27]));
allPromises.push(exports.getPieChartImg(chartData[33]));
allPromises.push(exports.getPieChartImg(chartData[34]));
allPromises.push(exports.getGlobalOwnershipDistributionChartImg(chartData[35]));
allPromises.push(exports.getPieChartImg(chartData[36]));
allPromises.push(exports.getPieChartImg(chartData[37]));
allPromises.push(exports.getPieChartImg(chartData[38]));
allPromises.push(exports.getPieChartImg(chartData[39]));
allPromises.push(exports.getPieChartImg(chartData[40]));
allPromises.push(exports.getPieChartImg(chartData[41]));
allPromises.push(exports.getPieChartImg(chartData[42]));
allPromises.push(exports.getPieChartImg(chartData[43]));
Promise.all(allPromises)
.then(data => {
highchartsExporter.killPool();
return callback({
code: '0',
custImg: {
pc1: data[0].data,
pc2: data[1].data,
pc3: data[2].data,
pc4: data[3].data,
pc5: data[4].data,
pc6: data[5].data,
pc7: data[6].data,
pc8: data[7].data,
pc9: data[8].data,
pc10: data[9].data,
pc11: data[10].data,
pc12: data[11].data,
pc13: data[12].data,
pc14: data[13].data,
pc17: data[14].data,
pc18: data[15].data,
pc19: data[16].data,
pc20: data[17].data,
pc21: data[18].data,
pc22: data[19].data,
pc23: data[20].data,
pc24: data[21].data,
pc27: data[22].data,
pc28: data[23].data,
pc29: data[24].data,
pc30: data[25].data,
pc31: data[26].data,
pc32: data[27].data,
pc33: data[28].data,
pc34: data[29].data,
pc35: data[30].data,
pc36: data[31].data,
pc37: data[32].data,
}
})
})
.catch(err => callback({
code: '5',
msg: 'Error generating charts',
err,
}))
}
exports.getPieChartImg = (seriesData, xOrLength) => {
var chartOpts = {
colors: ['#7380D4', '#749FD4', '#74BFD4', '#74D4B6', '#99EBA8', '#FEE08B', '#FDAE61', '#F07346', '#E65433', '#C92D22'],
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
renderTo: 'container',
style: {
fontSize: '20px',
background: '#fffdcc'
},
width:650,
},
credits: {
enabled: false
},
title: {
text: null,
},
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}%'
},
legend: {
itemStyle: {
font: 'sans-serif',
fontWeight: 'bold',
fontSize: '13px'
},
useHTML: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
labelFormatter: ()=> {
if (this.name[xOrLength] > 9) {
var words = this.name.split(/[\s]+/);
var numWordsPerLine = 1;
var str = [];
for (var word in words) {
if (parseInt(word) > 0 && parseInt(word) % numWordsPerLine == 0)
str.push('<br>');
str.push(words[word]);
}
var label = str.join(' ');
// Make legend text bold and red if most recent value is less than prior
if (this.name[1] > this.name[2]) {
return '<span style="font-weight:bold">' + label + '</span>';
} else {
return label;
}
} else {
return this.name;
}
}
},
plotOptions: {
pie: {
size: '85%',
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: true,
allowOverlap: false,
distance: 10,
formatter: ()=> {
return undefined;
// if (parseFloat(this.percentage.toFixed(2)) > 0.35) {
// return '' + parseFloat(this.percentage).toFixed(2) + '%';
// }
},
padding: 5,
style: { fontFamily: '\'Lato\', sans-serif', /*lineHeight: '18px',*/ fontWeight: 'normal', fontSize: '18px' }
}
},
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: '#6f6f6f',
style: { fontFamily: '\'Lato\', sans-serif', /*lineHeight: '18px',*/ fontWeight: 'normal', fontSize: '18px' },
format:'{point.percentage:.2f}'
},
pointWidth: 30,
cursor: 'pointer'
}
},
series: [{
name: "Value",
type: 'pie',
data: seriesData
}],
navigation: {
buttonOptions: {
enabled: false
}
},
};
var exportSettings = generateExportSettings(chartOpts, 'Stock');
return generateBase64Chart(exportSettings, 3)
}
function generateExportSettings(chartOpts, constr) {
return {
// b64: true,
instr: JSON.stringify(chartOpts),
noDownload: true,
constr,
globalOptions: {
colors: ['#7380D4', '#749FD4', '#74BFD4', '#74D4B6', '#99EBA8', '#FEE08B', '#FDAE61', '#F07346', '#E65433', '#C92D22'],
lang: {
thousandsSep: ','
}
},
scale: 2,
styledMode: false,
type: "image/png",
width: false,
};
}
function generateBase64Chart(exportSettings, number) {
return new Promise((resolve, reject) => {
//Perform an export
highchartsExporter.export(exportSettings, function (err, res) {
//The export result is now in res.
//If the output is not PDF or SVG, it will be base64 encoded (res.data).
//If the output is a PDF or SVG, it will contain a filename (res.filename).
if(err) {
Logger.error("IN ERROR: ", number);
Logger.error("ERROR: ", err);
return reject({
code: '1',
err,
msg: 'Error in stock chart',
exportSettings
})
}
return resolve({
code: '0',
msg: 'success',
data: 'data:image/png;base64,' + res.data,
})
//Kill the pool when we're done with it, and exit the application
// highchartsExporter.killPool();
// process.exit(1);
});
})
}
i am generating all charts at a time, so how can i solve this problem.
I have modified your code a little bit (and used the getPieChartImg as it is the only one available) and tried to export a big number of charts (35 in this case). I don't encounter the 0x03-error. Here is the modified code:
(test.js)
const exporter = require('./promise-based.js');
let numberOfCharts = 35;
let chartsData = [];
for (let i = 0; i < numberOfCharts; i++) {
chartsData.push([1, 2, 3, 4, 5]);
}
exporter.generateAllCharts(chartsData, results => {
if (results.code === '0') {
console.log('All charts exported!');
console.log(results);
} else {
console.log('Error #' + results.code + ': ' + results.msg);
if (results.err) {
console.log(results.err);
}
}
process.exit();
});
(promise-based.js)
const highchartsExporter = require('highcharts-export-server');
let promiseId = 0;
exports.generateAllCharts = (chartData, callback) => {
let allPromises = [];
let chartsLen = chartData.length;
highchartsExporter.logLevel(4);
highchartsExporter.initPool({
maxWorkers: 100,
initialWorkers: 50,
workLimit: 100,
queueSize: 50,
timeoutThreshold: 10000
});
if (!chartData || !chartsLen) {
highchartsExporter.killPool();
return callback({
code: '4',
msg: 'Please send chartdata'
});
}
for (let i = 0; i < chartsLen; i++) {
allPromises.push(
new Promise((resolve, reject) => {
exports.getPieChartImg(chartData[i], false, results => {
if (results.code !== '0') {
return reject(results);
}
return resolve(results);
});
})
);
}
Promise.all(allPromises)
.then(data => {
highchartsExporter.killPool();
let imagesObject = {
code: '0',
custImg: {}
};
data.forEach((image, index) => {
imagesObject.custImg['pc' + (index + 1)] = image.data;
imagesObject.custImg.promiseId = image.promiseId;
});
return callback(imagesObject);
})
.catch(err => callback({
code: '5',
msg: 'Error generating charts',
err
}));
};
exports.getPieChartImg = (seriesData, xOrLength, cb) => {
let chartOpts = {
colors: ['#7380D4', '#749FD4', '#74BFD4', '#74D4B6', '#99EBA8', '#FEE08B', '#FDAE61', '#F07346', '#E65433', '#C92D22'],
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
renderTo: 'container',
style: {
fontSize: '20px',
background: '#fffdcc'
},
width: 650,
},
credits: {
enabled: false
},
title: {
text: null,
},
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}%'
},
legend: {
itemStyle: {
font: 'sans-serif',
fontWeight: 'bold',
fontSize: '13px'
},
useHTML: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
labelFormatter: () => {
if (this.name[xOrLength] > 9) {
let words = this.name.split(/[\s]+/);
let numWordsPerLine = 1;
let str = [];
for (let word in words) {
if (parseInt(word) > 0 && parseInt(word) % numWordsPerLine == 0)
str.push('<br>');
str.push(words[word]);
}
let label = str.join(' ');
// Make legend text bold and red if most recent value is less than prior
if (this.name[1] > this.name[2]) {
return '<span style="font-weight:bold">' + label + '</span>';
} else {
return label;
}
} else {
return this.name;
}
}
},
plotOptions: {
pie: {
size: '85%',
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: true,
allowOverlap: false,
distance: 10,
formatter: () => {
return undefined;
// if (parseFloat(this.percentage.toFixed(2)) > 0.35) {
// return '' + parseFloat(this.percentage).toFixed(2) + '%';
// }
},
padding: 5,
style: {
fontFamily: '\'Lato\', sans-serif',
// lineHeight: '18px',
fontWeight: 'normal',
fontSize: '18px'
}
}
},
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: '#6f6f6f',
style: {
fontFamily: '\'Lato\', sans-serif',
// lineHeight: '18px',
fontWeight: 'normal',
fontSize: '18px'
},
format: '{point.percentage:.2f}'
},
pointWidth: 30,
cursor: 'pointer'
}
},
series: [{
name: "Value",
type: 'pie',
data: seriesData
}],
navigation: {
buttonOptions: {
enabled: false
}
},
};
let exportSettings = generateExportSettings(chartOpts, 'Stock');
return generateBase64Chart(exportSettings, 3, cb);
};
function generateExportSettings(chartOpts, constr) {
return {
type: 'png',
constr,
b64: true,
// async: false,
noDownload: true,
scale: 2,
options: chartOpts,
globalOptions: {
colors: ['#7380D4', '#749FD4', '#74BFD4', '#74D4B6', '#99EBA8', '#FEE08B', '#FDAE61', '#F07346', '#E65433', '#C92D22'],
lang: {
thousandsSep: ','
}
}
};
}
function generateBase64Chart(exportSettings, number, cb) {
// Perform an export
highchartsExporter.export(exportSettings, function(err, res) {
// The export result is now in res.
// If the output is not PDF or SVG, it will be base64 encoded (res.data).
// If the output is a PDF or SVG, it will contain a filename (res.filename).
if (err) {
return cb({
code: '1',
msg: 'Error in stock chart',
err,
exportSettings
});
}
promiseId++;
return cb({
code: '0',
msg: 'Success',
promiseId: promiseId,
data: 'data:image/png;base64,' + res.data,
});
// Kill the pool when we're done with it, and exit the application
// highchartsExporter.killPool();
// process.exit(1);
});
}
I am using exceljs npm package for formatting of excelsheet But I am not able to do textwrap inside cell when data is too large. My Description cell contains large data when excel is exported it looks like text is overlapping to next cell.
try {
var workbook = new excel.Workbook();
var worksheet = workbook.addWorksheet('ABC');
worksheet.columns = [
{ header: 'ABC', key: 'ABC', width: 15 },
{ header: 'Description', key: 'Description', width: 20 },
{ header: 'Comments', key: 'Comments', width: 20 }
];
// setStyleToHeader(worksheet);
worksheet.getRow(1).font = { name: 'Calibri', family: 4, size: 12, bold: true };
worksheet.getRow(1).border = {
top: { style: 'thin' },
left: { style: 'thin' },
bottom: { style: 'thin' },
right: { style: 'thin' }
};
new sql.ConnectionPool(dbconfig).connect().then(pool => {
return pool.request()
.execute('sp_getAll_data')
}).then(result => {
debugger;
let rows = result.recordset;
for (var i = 0; i < rows.length; i++) {
worksheet.addRow({
ABC: rows[i].ABC,
Description: rows[i].Description ,
Comments: rows[i].Comments
});
}
sql.close();
workbook.xlsx.write(res);
debugger;
res.setHeader('Content-Type', 'application/vnd.openxmlformats');
res.setHeader("Content-Disposition", "attachment; filename=" + "ABC.xlsx");
res.end(result, 'binary');
res.status(200).json();
}).catch(err => {
// res.status(500).send({ message: "${err}", err })
// sql.close();
});
} catch (e) {
}
If you want to just wrap text you can use 'alignment' attribute of cell.
worksheet.getCell('D1').alignment = { wrapText: true };
It's alredy mentioned here in plugin page: https://www.npmjs.com/package/exceljs#alignment
I found an answer related to Revision History "Querying for User Story revisions in Rally"
I am having trouble determining how to populate a grid with it.
Can I use the model and populate a story that the gird references?
Here is a working example, using other examples.
I had to populate an array with revision history info and add it to a story.
Then the story populated the grid.
// Also referenced
// https://stackoverflow.com/questions/22334745/does-rally-data-custom-store-have-magic-uniqueness
//
Ext.define('CustomApp',
{
extend: 'Rally.app.App',
componentCls: 'app',
launch: function()
{
var panel = Ext.create('Ext.panel.Panel',
{
layout: 'hbox',
itemId: 'parentPanel',
componentCls: 'panel',
items: [
{
xtype: 'panel',
title: 'Artifacts updated in the last two days',
width: 600,
itemId: 'childPanel1'
},
{
xtype: 'panel',
title: 'Last Revision',
width: 600,
itemId: 'childPanel2'
}]
});
this.add(panel);
var artifacts = Ext.create('Rally.data.wsapi.artifact.Store',
{
models: ['UserStory','Defect', 'TestCase'],
fetch: ['Owner', 'FormattedID','Name','ScheduleState','RevisionHistory','Revisions','Description','CreationDate','User'],
autoLoad: true,
listeners:
{
load: this._onDataLoaded,
scope: this
}
});
},
_onDataLoaded: function(store, data)
{
this._customRecords = [];
_.each(data, function(artifact, index)
{
this._customRecords.push(
{
_ref: artifact.get('_ref'),
FormattedID: artifact.get('FormattedID'),
Name: artifact.get('Name'),
RevisionID: Rally.util.Ref.getOidFromRef(artifact.get('RevisionHistory')),
RevisionNumber: 'not loaded'
});
}, this);
this._createGrid(store,data);
},
_createGrid: function(store,data)
{
var that = this;
var g = Ext.create('Rally.ui.grid.Grid',
{
itemId: 'g',
store: store,
enableEditing: false,
showRowActionsColumn: false,
columnCfgs:
[{text: 'Formatted ID', dataIndex: 'FormattedID'},
{text: 'Name', dataIndex: 'Name'},
{text: 'ScheduleState', dataIndex: 'ScheduleState'},
{text: 'Last Revision',
renderer: function (v, m, r)
{
var id = Ext.id();
Ext.defer(function ()
{
Ext.widget('button',
{
renderTo: id,
text: 'see',
width: 50,
handler: function ()
{
that._getRevisionHistory(data, r.data);
}
});
}, 50);
return Ext.String.format('<div id="{0}"></div>', id);
}
}], height: 400,
});
this.down('#childPanel1').add(g);
},
_getRevisionHistory: function(artifactList, artifact)
{
this._artifact = artifact;
this._revisionModel = Rally.data.ModelFactory.getModel(
{
type: 'RevisionHistory',
scope: this,
success: this._onModelCreated
});
},
_onModelCreated: function(model)
{
model.load(Rally.util.Ref.getOidFromRef(this._artifact.RevisionHistory._ref),
{
scope: this,
success: this._onModelLoaded
});
},
_onModelLoaded: function(record, operation)
{
var list = [];
record.getCollection('Revisions').load(
{
fetch: true,
scope: this,
callback: function(revisions, operation, success)
{
_.each(revisions, function(artifact, index)
{
var creationdate;
if (Rally.environment.useSystemTimezone || Rally.environment.useWorkspaceTimeZone)
{
creationdate = Rally.util.DateTime.formatDate(artifact.data.CreationDate, true);
}
else
{
creationdate = Rally.util.DateTime.formatWithDefaultDateTime(artifact.data.CreationDate);
}
var nodedata =
{
rev_num: artifact.data.RevisionNumber,
descript: artifact.data.Description,
author: artifact.data.User._refObjectName,
creationdate: creationdate
};
if(nodedata.descript.indexOf('SCHEDULE STATE') > -1)
{
list.push(nodedata);
}
else
{
if(nodedata.descript .indexOf('PLAN ESTIMATE') > -1)
{
list.push(nodedata);
}
}
}, this);
var myStore = Ext.create("Rally.data.custom.Store",
{
autoLoad: true,
data : list,
});
var revGrid = Ext.create('Rally.ui.grid.Grid',
{
itemId: 'revGrid ',
store: myStore,
enableEditing: false,
showRowActionsColumn: false,
height: 400,
columnCfgs:
[
{text: 'Rev #', dataIndex: 'rev_num'},
{text: 'Description', dataIndex: 'descript'},
{text: 'Author', dataIndex: 'author'},
{text: 'Change Date', dataIndex: 'creationdate'}
]
});
this.down('#childPanel2').add(revGrid);
}
});
},
});
I am using high chart version v4.0.4, i have worked bar chart like mentioned below i need output with there bar for every year details given below
I am working on below high chart code
var data_first_vd = 0;
var data_second_vd = 0;
var glb_data_ary = [];
var dynamicval1 = 5.85572581;
var dynamicval2 = 0.16091656;
if((dynamicval1>1) || (dynamicval2>1)){
var data_tit = 'Value';
var data_val = '${value}';
var prdelvalaxis = 1000000;
}else{
prdelvalaxis = 1000;
data_tit = "Value";
data_val = "${value}";
}
data_first_vd=5.86;
data_second_vd =0.16;
var data_first_ud =1397.128;
var data_second_ud = 28.145;
data_first_ud_lbl = '1.40M';
data_second_ud_lbl = '28K';
data_first_vd_lbl = '5.86M';
data_second_vd_lbl = '161K';
data_first_vd_lbl_xaxis = '$5.86M';
data_second_vd_lbl_xaxis = '$161K';
var ud1 = 1397;
var ud2 = 28;
var vd1 = 6;
var vd2 = 0;
$('#id').highcharts({
credits: { enabled: false },
chart: {
type: 'bar',
height: 200,
marginLeft: 120,
marginBottom:50,
marginTop: 47,
marginRight:30,
plotBorderWidth: 0,
},
title: {
text: null
},
xAxis: {
drawHorizontalBorders: false,
labels: {
groupedOptions: [{
rotation: 270,
}],
rotation: 0,
align:'center',
x: -30,
y: 5,
formatter: function () {
if (curYear === this.value) {
return '<span style="color:#6C9CCC;">' + this.value + '</span>';
}
else if (prevYear === this.value) {
return '<span style="color: #ED7D31;">' + this.value + '</span>';
}
else if ('VALUE' === this.value) {
return '<span style="color:#942EE1;">' + this.value + '</span>';
}
else{
return '<span style="color: #E124D2;">' + this.value + '</span>';
}
},
useHTML:true
},
categories: [{
name: "UNITS",
categories: [2017, 2016]
},{
name: "VALUE",
categories: [2017, 2016]
}
],
},
yAxis: [{ // Primary yAxis
labels: {
format: data_val,
formatter: function () {
if(this.value!=0){
return '$'+valueConverter_crt(this.value*prdelvalaxis);
}else{
return this.value;
}
},
style: {
color: '#942EE1'
}
},
title: {
text: "<span style='font-size: 12px;'>"+data_tit+"</span>",
style: {
color: '#942EE1'
},
useHTML:true
}
}, { // Secondary yAxis
title: {
text: "<span style='font-size: 12px;'>Units</span>",
style: {
color: '#E124D2'
},
useHTML:true
},
labels: {
format: '{value}',
formatter: function () {
if(this.value!=0){
return cal_pro_del_xaxis(this.value);
}else{
return this.value;
}
},
style: {
color: '#E124D2'
}
},
opposite: true
}],
tooltip: { enabled: false },
exporting: { enabled: false },
legend: { enabled: false },
plotOptions: {
series: {
dataLabels: {
inside: true,
align: 'left',
enabled: true,
formatter: function () {
return this.point.name;
},
color: '#000000',
},
stacking: false,
pointWidth: 15,
groupPadding: 0.5
},
},
series: [{
yAxis: 1,
data: [{y:1397.128,name:data_first_ud_lbl,color:'#6C9CCC'},{y:28.145,name:data_second_ud_lbl,color:'#ED7D31'}],
}, {
data: [null,null,{y:5.86,name:data_first_vd_lbl_xaxis,color:'#6C9CCC'},{y:0.16,name:data_second_vd_lbl_xaxis,color:'#ED7D31'}],
}]
});
I need out put like below chart This chart i draw in paint.
Here 3 bar added in every year
Please help me to achieve this