Pass variable into array jVectorMap JavaScript - javascript

Can anyone explain to me how to pass a variable HERE:
series: {regions: [{values:{Variable: '#B8E186',}}]},
Commented parts is what I tried so far. Syntax there works like this {SE:'#000FFF',}
//var myArray = [];
//myArray.push({ 'NO': '#000FFF' });
//var a = [], b = parsedData.Item1, c= '#000FFF';
//a.push('b', 'c');
//var cdata = {
map: 'world_mill',
scaleColors: ['#C8E111', '#007FFF'],
normalizeFunction: 'polynomial',
hoverOpacity: 0.7,
hoverColor: false,
markerStyle: {
initial: {
fill: '#F8E111',
stroke: '#383f47'
}
},
series: {
regions: [{
values:
{
}
}]
},
regionStyle: {
initial: {
fill: '#B8E186'
}
},
backgroundColor: '#FFFFF',
//markers: [
// { latLng: [67.16, 14.24], name: 'Norway' },
//]
//});
//};
//jQuery.each(cdata.mapData.paths, function() {
// var continentCodes = {};
// continentCodes['NO'] = "#128da7";
//cdata.series.regions[0].setValues(continentCodes);
});
//var mapObject = $('#world-map').vectorMap('camel', 'mapObject');
//mapObject.series.regions[0].setValues(parsedData.Item1) = '#000FFF';
//});
});

Assuming that series will have multiple regions, and value of region will have multiple variable values
You will need two for loops
var series = {};
for (i = 0; i < regions.length; i++) {
{
var regions = [];
var values = {};
for (j = 0; j < ValuesInRegion.length; j++) {
{
values[ValuesInRegion[j]['key']] = ValuesInRegion[j]['value'];
}
regions.push(values);
}
series['regions'] = regions;
finally
cdata.series = series;

Related

Display data for specific release selected in release filter at the top of page in rally dashboard

This is my code and in this the data displayed in chart is hole project data but in rally dashboard there is release filter at the top of your page. and i want my chart to show data of the the release selected by that filter and my sdk version in code is 1.33
<!DOCTYPE HTML\>
<script
src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js">
var WORKSPACE_OID = "__WORKSPACE_OID__";
var PROJECT_OID = "__PROJECT_OID__";
var PROJECT_SCOPING_UP = "__PROJECT_SCOPING_UP__";
var PROJECT_SCOPING_DOWN = "__PROJECT_SCOPING_DOWN__";
var MILS_IN_DAY = 86400000;
var DAYS_BACK = 30;
var filterChart;
var currentProjectDataSource;
var fromDate = new Date(new Date().getTime() - (MILS_IN_DAY * DAYS_BACK));
var allDefects = [];
// var currentRelease;
var onLoadAllIssues = function (result) {
// var defects = result.defects.filter(function (defect) {
// return defect.Release && defect.Release.\_refObjectName === currentRelease.Name;
// });
var labels = [];
var openDefects = [];
var closedDefects = [];
var defects = result.defects;
for (var count = 0; count < defects.length; count++) {
allDefects[allDefects.length] = defects[count];
var defect = defects[count];
labels.push(defect.CreationDate.split('T')[0]);
if (defect.ClosedDate !==null) {
closedDefects.push(defect.ClosedDate.split('T')[0]);
}
}
closedDefects.sort();
const counts = {};
labels.forEach(function (x) { counts[x] = (counts[x] || 0) + 1; });
const closedcounts = {};
closedDefects.forEach(function (x) { closedcounts[x] = (closedcounts[x] || 0) + 1; });
mychart(counts,closedcounts,labels)
};
var createCharts = function () {
var loadAllDefectsQuery = {
type: 'defect',
key: 'defects',
fetch: 'CreationDate,ClosedDate,ObjectID,FormattedID,Name,State,Priority',
order: 'CreationDate',
query: '((CreationDate != "null") OR (CreationDate > "' + dojo.date.stamp.toISOString(fromDate, { zulu: true }) +
'"))'
};
currentProjectDataSource.findAll(loadAllDefectsQuery, onLoadAllIssues);
};
var initPage = function () {
currentProjectDataSource = new rally.sdk.data.RallyDataSource(WORKSPACE_OID, PROJECT_OID, PROJECT_SCOPING_UP,
PROJECT_SCOPING_DOWN);
createCharts();
};
rally.addOnLoad(initPage);
function mychart(counts,closedcounts,labels) {
const pielable = labels;
const piedata = counts;
const closedcountsdata = closedcounts;
const data = {
datasets: [
{
label: 'Number of opened defects',
data: piedata,
},
{
label: 'Number of closed defects',
data: closedcountsdata,
}
]
};
const config = {
type: 'line',
data: data,
options: {
scales: {
x: {
min:"2022-01-01",
max:"2022-12-31",
type: 'time',
time:{
unit:'day',
},
},
y: {
beginAtZero: true,
grace: 5,
ticks: {
stepSize: 1,
},
},
},
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Defect Burndown Chart'
},
tooltip: {
yAlign: 'bottom',
titleMarginBottom: 0,
callbacks: {
title: function (context) {
return( `${context[0].label.slice(0, -13).replace(/,/g, " ")}`)
},
}
}
}
}
};
const myChart = new Chart(
document.getElementById('myChart'),
config
)
filterChart= function filterChart(date){
const year = date.value.substring(0,4);
const month = date.value.substring(5);
const lastday = (y,m)=>{
return new Date(y,m,0).getDate();
}
const startDate = `${date.value}-01`;
const endDate = `${date.value}-${lastday(year,month)}`;
myChart.config.options.scales.x.min=startDate;
myChart.config.options.scales.x.ma`your text`x=endDate;
myChart.update();
}}
</script>

How can I add a border to the columns on this graph.js

I've put together a graph which pulls data from google.
I'm trying to change the styling but can't find a way to do it through CSS. I want to add a border to both columns.
I couldunt add all the code, but I can see this is the part that mentions colors.
https://codepen.io/jameswill77/pen/WNzXxeJ
const colors = ['#FDF7F2', '#23F0C7'];
dataj = JSON.parse(data.toJSON());
console.log(dataj.cols[0].label);
const labels = [];
for (c = 1; c < dataj.cols.length; c++) {
if (dataj.cols[c].label != "") {
labels.push(dataj.cols[c].label);
}
}
console.log(labels);
const datasets = [];
for (i = 0; i < dataj.rows.length; i++) {
const series_data = [];
for (j = 1; j < dataj.rows[i].c.length; j++) {
if (dataj.rows[i].c[j] != null) {
if (dataj.rows[i].c[j].v != null) {
series_data.push(dataj.rows[i].c[j].v);
} else {
series_data.push(0);
}
}
}
var dataset = {
label: dataj.rows[i].c[0].v,
backgroundColor: colors[i],
borderColor: colors[i],
data: series_data
}
datasets.push(dataset);
}
console.log(datasets);
const chartdata = {
labels: labels,
datasets: datasets
};
var canvas = document.getElementById("myChart");
var setup = {
type: 'bar',
data: chartdata,
options: {
plugins: {
title: {
display: true,
text: dataj.cols[0].label
}
},
responsive: true,
}
}
chart = new Chart(canvas, setup);
}
added option borderWidth and changed value of borderColor in the datasets.
https://codepen.io/fver1004/pen/MWVOJpR?editors=1010
google.charts.load('current', {
'packages': ['corechart', 'bar']
});
google.charts.setOnLoadCallback(initChart);;
function initChart() {
URL = "https://docs.google.com/spreadsheets/d/1MV4chXniMBHj1ROAIf-BZR3LsoN-HT180pUwivU5Jbc/edit#gid=2112195720";
var query = new google.visualization.Query(URL);
query.setQuery('select *');
query.send(function(response) {
handleQueryResponse(response);
});
}
function handleQueryResponse(response) {
var data = response.getDataTable();
var columns = data.getNumberOfColumns();
var rows = data.getNumberOfRows();
// console.log(data.toJSON());
const colors = ['#eeeeee', '#23F0C7'];
const border_colors = ['#ececec', '#21DEC5'];
dataj = JSON.parse(data.toJSON());
// console.log(dataj.cols[0].label);
const labels = [];
for (c = 1; c < dataj.cols.length; c++) {
if (dataj.cols[c].label != "") {
labels.push(dataj.cols[c].label);
}
}
// console.log(labels);
const datasets = [];
for (i = 0; i < dataj.rows.length; i++) {
const series_data = [];
for (j = 1; j < dataj.rows[i].c.length; j++) {
if (dataj.rows[i].c[j] != null) {
if (dataj.rows[i].c[j].v != null) {
series_data.push(dataj.rows[i].c[j].v);
} else {
series_data.push(0);
}
}
}
var dataset = {
label: dataj.rows[i].c[0].v,
backgroundColor: colors[i],
borderColor: border_colors[i],
borderWidth: 4,
data: series_data
}
datasets.push(dataset);
}
console.log(datasets);
const chartdata = {
labels: labels,
datasets: datasets
};
var canvas = document.getElementById("myChart");
var setup = {
type: 'bar',
data: chartdata,
options: {
plugins: {
title: {
display: true,
text: dataj.cols[0].label
}
},
responsive: true,
}
}
chart = new Chart(canvas, setup);
}

Chartist.js Array with data

I am creating a chart with Chartist.js. I'm getting json data with the Google embed API. I have a problem with this one. The array works with the values I give. But it does not work for data from json.
my code :
var TotalBrowser = [];
var BrowserSeries = [];
var oxyn = {
queryAnalytics: function() {
var id = '164690638';
var expressions = [{
expression: 'ga:hits'
}];
var dimension = [{
name: 'ga:browser'
}];
oxyn.getReportQuery(id, '7daysago', 'today', expressions, dimension).then(function(response) {
var formattedJson = JSON.stringify(response.result, null, 2);
var data = JSON.parse(formattedJson);
var i = 0;
BrowserTotal = data.reports[0].data.totals[0].values[0];
jQuery(data.reports[0].data.rows).each(function() {
if (i <= 3) {
jQuery('#Browsers').append(browsericon[i] + this.dimensions[0]);
var percent = (parseInt(this.metrics[0].values[0]) / parseInt(BrowserTotal)) * 100;
BrowserSeries.push(Math.round(percent));
TotalBrowser.push(Math.round(percent) + '%');
i++;
}
});
demo.initChartist();
});
}
}
var demo = {
initChartist: function() {
var dataPreferences = {
series: [
[BrowserSeries.join()]
]
};
var optionsPreferences = {
donut: true,
donutWidth: 40,
startAngle: 0,
total: 100,
showLabel: false,
axisX: {
showGrid: false
}
};
Chartist.Pie('#chartPreferences', dataPreferences, optionsPreferences);
Chartist.Pie('#chartPreferences', {
labels: [TotalBrowser.join()],
series: [BrowserSeries.join()]
});
console.log(BrowserSeries.join());
}
};
it does not work that way. But if I write the code like this, it works.
Chartist.Pie('#chartPreferences', {
labels: [TotalBrowser.join()],
series: [30, 70]
});
and this is working.
Chartist.Pie('#chartPreferences', {
labels: [TotalBrowser[0], TotalBrowser[1]],
series: [BrowserSeries[0], BrowserSeries[1]]
});
console output
console.log(BrowserSeries.join());
30,70
JSON Source
It's a very silly problem.
yes I finally solved it. I write for those who have the same problem.
Chartist.Pie('#chartPreferences', {
labels: TotalBrowser,
series: BrowserSeries
});
We need to remove [ ] characters. We must also send the data directly to the array.
Also : https://github.com/gionkunz/chartist-js/issues/738

Chart.js : Is there a way to name each bubble in chart?

I have created a bubble chart using chart.js,which looks like the below
Is there a way to name each and every bubble in the chart? I am planning to put a data box below this chart. On clicking each bubble data box should display info associated with each bubble. Each bubble will have its own data like maturity_date,bond_type,credit_rating,symbol,etc... How can I name each bubble? These bubbles are created dynamically. This is the code I use to create the chart
$(document).ready(function(){
$.ajax({url: "xxxxxxxx.x.xx", success: function(result){
var dataObj = {};
dataObj.datasets = [];
var object = {};
object.label = 'First Dataset';
object.backgroundColor = [];
object.hoverBackgroundColor = [];
object.data = [];
var resultData = result.data;
var currentYear = new Date().getFullYear();
for (var i=0; i<resultData.length; i++) {
if(resultData[i].hasOwnProperty("maturity_date") && resultData[i].hasOwnProperty("ask_ytm")) {
var maturity_date = resultData[i].maturity_date.split("-");
var matYear = new Date(maturity_date[1]+"-"+maturity_date[0]+"-"+maturity_date[2]).getFullYear();
if (resultData[i].bond_type == "Tax Free" )
{
object.backgroundColor.push("#34A10C");
object.hoverBackgroundColor.push("#34A10C");
}
else
{
object.backgroundColor.push("#1130E8");
object.hoverBackgroundColor.push("#1130E8");
}
object.data.push({x: (matYear - currentYear), y: resultData[i].ask_ytm, r: 4});
}
}
dataObj.datasets.push(object);
var ctx = document.getElementById("myChart");
var myBubbleChart = new Chart(ctx,{
type: 'bubble',
data : dataObj,
legend: {
display: false
},
responsive: true,
maintainAspectRatio: true,
}
});
}});
});
In your data declaration, you can add custom properties if you need to :
data: [{
x: 20,
y: 30,
r: 15,
symbol: "£",
bond_type: "corporate"
}, {
x: 40,
y: 10,
r: 10,
symbol: "$",
bond_type: "james"
} /* ... */]
Since this data is dynamic, you need to do it from your back-end of course.
Afterwards, you can access these new properties in your callback (onClick event for instance) :
options: {
onClick: function(e) {
var element = this.getElementAtEvent(e);
if (element.length > 0) {
var data = this.config.data.datasets[element[0]._datasetIndex].data[element[0]._index];
console.log(data);
// You can have the following for instance :
// data -> { x:40, y:10, r:10, symbol:"$", bond_type:"james" }
}
}
}

Adding a link to each stacked bar chart item

I have a stacked bar chart I am trying to make each item in the chart that is clicked open the sharepoint view based on what was clicked.
I am building the data here
seriesData.push({ name: xStatus[i], data: dataArray, url: countArray[i].url });
my chart code looks like this:
loadStackedBarChartWithLink = function (xCategories, seriesData, divId, chartTitle, yAxisTitle) {
//Build Stacked Bar Chart
$(divId).highcharts({
chart: {
type: 'bar'
},
credits: {
enabled: false
},
title: {
text: chartTitle
},
xAxis: {
categories: xCategories,
allowDecimals: false
},
yAxis: {
min: 0,
allowDecimals: false,
title: {
text: yAxisTitle
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
plotOptions: {
series: {
cursor: 'pointer',
stacking: 'normal',
point: {
events: {
click: function () {
location.href = this.options.url;
}
}
}
}
},
series: seriesData
});
}
The chart has the correct data, pointer is correct but I get 'undefined' for the url.
Any help is greatly appreciated.
IWSChartBuilder.PersonEngagementsByStatusChart = function () {
var load = function () {
$.when(
IWSChartBuilder.RESTQuery.execute(GET THE DATA HERE)
).done(
function (engagements1) {
var data = [];
var countArray = [];
var urls = [];
var results = engagements1.d.results;
for (var i = 0; i < results.length; i++) {
if (results[i].Consultant.Title == undefined) {
continue;
}
var found = false;
for (var j = 0; j < data.length; j++) {
if (data[j].personName == results[i].Consultant.Title && data[j].statusName == results[i].Engagement_x0020_Status) {
data[j].statusCount = data[j].statusCount + 1;
found = true;
}
}
if (!found) {
data.push(new IWSChartBuilder.StatusByPerson(results[i].Consultant.Title, results[i].Engagement_x0020_Status, 1));
}
}
//Put data into format for stacked bar chart
var seriesData = [];
var xCategories = [];
var xStatus = [];
var i, j, cat, stat;
//Get Categories (Person Name)
for (i = 0; i < data.length; i++) {
cat = data[i].personName;
if (xCategories.indexOf(cat) === -1) {
xCategories[xCategories.length] = cat;
}
}
//Get Status values
for (i = 0; i < data.length; i++) {
stat = data[i].statusName;
if (xStatus.indexOf(stat) === -1) {
xStatus[xStatus.length] = stat;
}
}
//Create initial series data with 0 values
for (i = 0; i < xStatus.length; i++) {
var dataArray = [];
for (j = 0; j < xCategories.length; j++) {
dataArray.push(0);
}
seriesData.push({ name: xStatus[i], data: dataArray });
}
//Cycle through data to assign counts to the proper location in the series data
for (i = 0; i < data.length; i++) {
var personIndex = xCategories.indexOf(data[i].personName);
for (j = 0; j < seriesData.length; j++) {
if(seriesData[j].name == data[i].statusName){
seriesData[j].data[personIndex] = data[i].statusCount;
break;
}
}
}
//Build Chart
IWSChartBuilder.Utilities.loadStackedBarChartWithLink(xCategories, seriesData, "#engagementsByStatusChart", "Engagements by Status", "Total Projects");
}
).fail(
function (engagements1) {
$("#engagementsByStatusChart").html("<strong>An error has occurred.</strong>");
}
);
};
return {
load: load
}
}();
The way I am trying now
plotOptions: {
series: {
cursor: 'pointer',
stacking: 'normal',
point: {
events: {
click: function () {
getURL(this, xCategories, seriesData);
}
}
}
}
},
function getURL(chartInfo, xCategories, seriesData) {
var baseUrl = "correctURL" + xCategories[chartInfo._i] + "-FilterField2%3DEngagement%255Fx0020% 255FStatus-FilterValue2%3D" + chartInfo.name;
location.href = baseUrl;
}
You are hooking into the point click event handler. In this handler, 'this' refers to the point, not the series.
Try this:
plotOptions: {
series: {
cursor: 'pointer',
stacking: 'normal',
events: {
click: function () {
location.href = this.options.url;
}
}
}
},
http://jsfiddle.net/2DG84/
If you need URL's which depend on point values as well as the series, you can access both. e.g.
plotOptions: {
series: {
cursor: 'pointer',
stacking: 'normal',
point: {
events: {
click: function () {
alert(this.series.options.url + "&y=" + this.y);
}
}
}
}
},
In this example, there is a base URL on the series, by I am adding to the UTL with the point.y value.
http://jsfiddle.net/Fygg2/

Categories