Using the official nvd3 package (https://atmospherejs.com/nvd3/nvd3)
I have the following code under the Template.rendered block:
var formattedEarnedData = formatEarnedData(userEarnedDataSet);
nv.addGraph(function() {
var earnedChart = nv.models.lineChart()
.margin({ left: 25 })
.useInteractiveGuideline(true)
.transition()
.duration(350)
.showLegend(true)
.showYAxis(true)
.showXAxis(true);
earnedChart.xAxis
.axisLabel('Date')
.tickFormat(d3.format('d'));
earnedChart.yAxis
.axisLabel('Earned')
.tickFormat(d3.format('d'));
d3.select('#earned-charts svg').datum(
[{
key: 'Earned',
values: formattedEarnedData
}]
).call(earnedChart);
nv.utils.windowResize(earnedChart.update);
return earnedChart;
});
The following lies at the bottom of the js file outside of the rendered block:
var formatEarnedData = function(dataSet) {
var earnedDataArray = new Array();
var groupedDates = _.groupBy(_.pluck(dataSet, 'progression'), function(date) {
return moment(date).format('MMM D');
});
_.each(_.values(groupedDates), function(dates) {
earnedDataArray.push({
date: dates[0],
total: dates.length
});
});
return earnedDataArray;
}
Even after following the documentation, I am still getting this error:
Cannot read property 'addGraph' of undefined
Can any nvd3 experts shed some light on why this error is happening?
Thanks in advance.
Related
I am using ASP MVC and I have a ej chart built in script, and I need to refresh its content:
my chart is built like this:
var modelSummaryList = getMySummaryModel();
var summaryChartDataManager = ej.DataManager(($scope.FirstLoad && IsCurrentUserDpiUser()) ? null : modelSummaryList);
jQuery("#MySummaryChart").ejChart({
range: { min: summaryChartDataManager == null ? -1 : summaryChartDataManager.ChartMin, max: summaryChartDataManager == null ? 1 : summaryChartDataManager.ChartMax },
series: [{
name: "MTM",
tooltip: {
visible: true,
format: "#point.x#: #point.y# #series.name#"
},
dataSource: summaryChartDataManager,
xName: "CtpyShort",
yName: "MTM"
}, {
name: "Threshold",
tooltip: {
visible: true,
format: "#point.x#: #point.y# #series.name#"
},
dataSource: summaryChartDataManager,
xName: "CtpyShort",
yName: "Threshold"
}, {
name: "My Held/(Posted)",
tooltip: {
visible: true,
format: "#point.x#: #point.y# #series.name#"
},
dataSource: summaryChartDataManager,
xName: "CtpyShort",
yName: "Held"
}],
type: 'column',
});
which is working good, but upon filter and change of data, I need to redraw the chart so I did this:
$scope.RefreshChart = function (data) {
var chart = $("#MySummaryChart").ejChart("instance");
chart.model.range.min = data.MyTradeSummaryVM.ChartMin;
chart.model.range.max = data.MyTradeSummaryVM.ChartMax;
for (var s = 0; s <= chart.model.series.length - 1; s++) {
var pts = IsCurrentUserDpiUser() ? $.grep(data.MyTradeSummaryVM, function (item) {
return item.ClientID == localStorage.getItem("MyPosting_client_sticky");
}) : data.MyTradeSummaryVM;
chart.model.series[s].points = [];
for (var p = 0; p <= pts.length - 1; p++) {
var newPt = new Object();
newPt.x = pts[p].CtpyShort;
if (chart.model.series[s].name == "MTM")
newPt.y = pts[p].MTM;
else if (chart.model.series[s].name == "Threshold")
newPt.y = pts[p].Threshold;
else if (chart.model.series[s].name == "My Held/(Posted)")
newPt.y = pts[p].Held;
newPt.visible = true;
chart.model.series[s].points.push(newPt);
}
}
chart.redraw();
};
which throws the error TypeError: n[0] is undefined on the chart.redraw() line, and I am stumped. Please note that the RefreshChart() works if I build the chart via cshtml and not javascript like this:
#(Html.EJ().Chart("MySummaryChart")
.PrimaryXAxis(pr => pr.Title(tl => tl.Text("")))
.PrimaryYAxis(pr => pr.Range(ra => ra.Max(Model.ChartMax).Min(Model.ChartMin)).Title(tl => tl.Text("")))
.CommonSeriesOptions(cr => cr.Type(SeriesType.Column).EnableAnimation(true).Marker(mr => mr.DataLabel(dt => dt.Visible(true).EnableContrastColor(true)))
.Tooltip(tt => tt.Visible(true).Format("#point.x# : #point.y# #series.name# ")))
.Series(sr =>
{
.
.
.
})
.Load("loadTheme")
.IsResponsive(true)
.Size(sz => sz.Height("400"))
.Legend(lg => { lg.Visible(true).Position(LegendPosition.Bottom); }))
but I am opting to use JS coz I need to handle null and firstload(meaning no data should appear on the chart upon first load, and unless user picks a client(filter), no data should be loaded. Which I cant seem to make it work if via html, I couldn't erase the chart xaxisregions label along with other data, the only things erased are the main Y axis points but not labels.
We have analyzed the reported scenario. We would like to you know that, when the data for chart is bind using dataSource, then while refreshing the chart with new data, you need to bind the data to series.dataSource property not to series.points, so that only chart will refresh properly. We have prepared a sample with respect the above scenario. Find the code snippet to achieve this requirement.
<input type="button" id="refreshChart" onclick="refresh()" value="Refresh Chart" />
function refresh(sender) {
var chart = $("#MySummaryChart").ejChart("instance");
for (var s = 0; s <= chart.model.series.length - 1; s++) {
//Obtained random data,
var pts = GetData().data;
var newPt = [];
for (var p = 0; p <= pts.length - 1; p++) {
if (chart.model.series[s].name == "MTM")
newPt.push({ "CtpyShort": pts[p].CtpyShort, "MTM": pts[p].MTM });
else if (chart.model.series[s].name == "Threshold")
newPt.push({ "CtpyShort": pts[p].CtpyShort, "Threshold": pts[p].Threshold });
else if (chart.model.series[s].name == "My Held/(Posted)")
newPt.push({ "CtpyShort": pts[p].CtpyShort, "Held": pts[p].Held });
}
//Assign the updated data to dataSource property
chart.model.series[s].dataSource = newPt;
}
chart.redraw();
}
In the above code in a button click event, we have refreshed the chart data. Here you need to assign the x value to CtpyShort and y values of three series to MTM, Threshold and Held, since we have mapped these properties while rendering the chart initially.
Screenshot before updating data:
Screenshot after updating data:
Sample for reference can be find from below link.
Sample Link
If you face still any concern, kindly revert us by modifying the above sample with respect to your scenario or provide your sample with replication steps which will helpful in further analysis and provide you the solution sooner.
Thanks,
Dharani.
I am want to create a VSTS Extension for TFS 2015 Update 3 and I want to start slow. I want to create a custom action that shows the Id and the Title of the current Work Item in one pop up window.
I have been reading the tutorials but I still don't get it.
I used this example from GitHub:
var showPropertiesMenuProvider = (function () {
"use strict";
return {
showPropertiesInDialog: function(properties, title) {
VSS.getService("ms.vss-web.dialog-service").then(function (dialogSvc) {
var extInfo = VSS.getExtensionContext();
var contibution = VSS.getContribution();
var dialogOptions = {
title: title || "Properties",
width: 800,
height: 600,
buttons: null
};
var contributionConfig = {
properties: properties
};
dialogSvc.openDialog(extInfo.publisherId + "." + extInfo.extensionId + "." + "contextForm", dialogOptions, contributionConfig);
});
},
execute: function(actionContext) {
this.showPropertiesInDialog(actionContext);
}
};
}());
VSS.register("showProperties", function (context) {
return showPropertiesMenuProvider;
});
which gives me a lot of information but I still can't extract the data I need.
Any ideas?
Thanks in advance!
Panel Property Object:
this.IncSummary = element.all(by.css('#incidentList h5'));
Common function:
//Get the Text of Summary
exports.getIncSummary = function (IncId) {
console.log("executing getIncSummary function");
Panel.IncSummary.then(function(items){
console.log("Summary items = " +items);
(items[IncId].getText()).then(function(txt){
console.log("summary text = "+ txt);
});
return items[IncId].getText();
});
};
Using this function in my test:
it('compare the summary text ', function() {
CommonFun.getIncSummary(0).then(function(promis){
console.log("promis= "+promis);
});
});
I am getting following error:
Failed: Cannot read property 'then' of undefined
Not sure what I am doing wrong, would appreciate any help on this.
Thanks in Advance.
The function getIncSummary doesn't return anything. If you wish to get the text for a given locator/index then use .get():
// Panel Property Object:
this.IncSummary = element.all(by.css('#incidentList h5'));
// Common function:
exports.getIncSummary = function (index) {
return Panel.IncSummary.get(index).getText();
};
// Using this function in my test:
it('compare the summary text ', function() {
CommonFun.getIncSummary(0).then(function(text){
console.log(text);
});
});
I want to use $cordovaFileTransfer in my app to dowload image data, but after trying to implement the code, this error is showing up:
Cannot read property 'download' of undefined
here is my code:
var url = "blablabla.com/img.png";
var targetPath = "img/"+ imgpaths;
var trustHosts = true;
var options = {};
$cordovaFileTransfer.download(url, targetPath, options, trustHosts)
.then(function(result) {
// Success!
console.log('Download Success' + targetPath);
}, function(err) {
// Error
}, function (progress) {
$timeout(function () {
var downloadProgress = (progress.loaded / progress.total) * 100;
console.log('Progress : '+downloadProgress);
});
});
anybody can help me?
Check this issues list:
http://ngcordova.com/docs/common-issues/
For example have you wrapped the call to $cordovaFileTransfer.download() inside deviceready handler or better inside $ionicPlatform.ready() ?
Currently trying to remove jScrollPane when the width is a certain size. It appears to be working, I can trigger alert with
if (Modernizr.mq("screen and (max-width:715px)")) {
alert('hello world');
}
And I can remove jScrollPane with click functionality
$('.st-accordion a').click(function() {
var element = $('.hs-content').jScrollPane({});
var api = element.data('jsp');
api.destroy();
});
But for whatever reason I can't trigger destroy(); with the modernizr conditional
if (Modernizr.mq("screen and (max-width:715px)")) {
var element = $('.hs-content').jScrollPane({});
var api = element.data('jsp');
api.destroy();
}
Any ideas?
Never mind, I got it by enclosing it all in the same function. A moment of clarity.
//Scrollpane
$(function()
{
$('.hs-content').jScrollPane({ autoReinitialise: true, hideFocus: true });
$('.hs-menu nav').jScrollPane({ autoReinitialise: true, hideFocus: true });
if (Modernizr.mq("screen and (max-width:715px)")) {
var element = $('.hs-content').jScrollPane({});
var api = element.data('jsp');
api.destroy();
}
});