CODEWITHSUNDEEP
javascriptangularjschartsscope
Amit Tanwar
Amit Tanwar

Reputation: 33

Passing angular scope variable to javascript

I have angular scope variable which is being used in ng-repeat as well. I want to create a chart starting from a date and ending at a certain date with the current day marker. I am using javascript loader.js for drawing the charts but since I need to draw multiple charts inside ng-repeat. My code looks like this:

$scope.items = [{"title1":"start_day: 01-01-2017", "end_day:15-02-2018"},
{"title2":"start_day: 05-10-2017", "end_day:10-01-2019"}];

and javascript code from google charts: 

anychart.onDocumentReady(function () {
// create data tree on our data
var treeData = anychart.data.tree(getData());

// create resource gantt chart
var chart = anychart.ganttResource();

// set container id for the chart
chart.container('container');

// set data for the chart
chart.data(treeData);
// set start splitter position settings
chart.splitterPosition(150);

var now = (new Date()).getTime();
var sec = 1000;
var min = 60*sec;
var hour = 60*min;
var day = 24*hour;

// create linemarkers
var tl = chart.getTimeline();
tl.lineMarker(0).value("current");


// get chart data grid link to set column settings
var dataGrid = chart.dataGrid();

// initiate chart drawing
chart.draw();

// zoom chart to specified date
chart.fitAll();
});

function getData() {
var now = (new Date()).getTime();
var sec = 1000;
var min = 60*sec;
var hour = 60*min;
var day = 24*hour;

return [
{

"periods": [
{"id": "1_1", "start": now - 365*day, "end": now + 100*day }]
},


];
}

I want to pass the dates from angularjs scope variable to javascript code here which will replace the existing data of start and end, also I need to convert the dates difference. Thanks in advance! :)

Upvotes: 1

Views: 142

Answers (1)

Telman
Telman

Reputation: 1487

I would recommend to use another JS object that stores common data for both angular and js.

var DATES = [{"title1":"start_day: 01-01-2017", "end_day:15-02-2018"},
{"title2":"start_day: 05-10-2017", "end_day:10-01-2019"}];

...
//in agular
$scope.items = DATES;

...
//in loader
function getData() {
  ...
  return DATES;
}

You can also store an angular $scope into a variable and then use it as a usual variable into JS code, var ctrl = $scope but I would recommend to go with the first option.

--

Regarding to dates difference. Try to use standard Date class. For example:

var deltaMS = new Date("02-15-2018") - new Date("01-01-2017");
var deltaDays = delta / 1000 / 60/ 60 / 24;
//410 days

Upvotes: 1

Related Questions