I am using the ui-chart directive for jqplot to show a line chart in my angularjs application. But the date xaxis is not showing. The chart data is from an api call. I am setting the chart data as below.
$scope.chartData = [];
angular.forEach(response, function (price, key) {
this.push([price.Sale_Date, price.Price]);
}, $scope.chartData);
The HTML for the chart
<div ui-chart="data" chart-options="chartOptions"></div>
However, when I set the values manually it works.
$scope.chartData = [[['2008-12-08 4:00PM', 4], ['2008-12-09 4:00PM', 6.5]]];
Any help is much appreciated.
Posting the solution in case its of use to anyone. The issue was a combination of the array & date format.
var prices = [];
angular.forEach(response, function (price, key) {
this.push([new Date(price.Sale_Date), price.Price]);
}, prices);
$scope.chartData = [prices];
Related
I got a json response like this. It is dynamic and I want to add the details in range slider. The slider max value must dynamically increases when there will be new element in array.
"time": [
"2018-05-24T06:30:00",
"2018-05-24T07:00:00",
"2018-05-24T07:30:00"
]
I have never worked on slider before . Any suggestion how to achieve this ?
You can use angularjs-slider library (which has ui-bootstrap as dependency). It offers lot customization in sliders & very handy with angularjs.
For your case after every new value added to array you can reload the slider by 1st deleting it & then loading it again. Or you can use their rzSliderForceRender custom event for that. Using this
Your HTML will look like:
<rzslider rz-slider-model="slider_dates.value"
rz-slider-options="slider_dates.options"></rzslider>
And in controller slider config code as:
$scope.dates = ["2018-05-24T06:30:00",
"2018-05-24T07:00:00"];
var datesObjests = [];
for (var i = 0; i < $scope.dates.length; i++) {
datesObjests.push(new Date($scope.dates[i]));
}
$scope.slider_dates = {
value: datesObjests[0],
options: {
stepsArray: datesObjests,
translate: function(date) {
if (date !== null) return date.toLocaleString();
return '';
},
},
};
Working Plunker Example for your requirement.
I am using some Graph view to view some statistic in my project.
e.g. Morish Grapgh, Pie chart graph.
I have an option like date range, so that I can specify the range of date and can fetch the data within that range and show the output graph in the front end.
The issue I am facing is at the First time I am able to see the out put while I am changing the Date range.
from the second time I am able to get the Data from the backend but after setting the new set of values to the graph Data, but the graph view is not changing because the graph is not able to refresh.
Here sample code. Please ask if any additional info needed.
<sa-morris-graph *ngIf="graphData!=null" [data]="graphData"
type="area"
[options]="{
xkey: 'x',
ykeys: ['y', 'z'],
labels: ['USER', 'New USER']
}"></sa-morris-graph>
from the Component type script file I am setting graphData
export class GAUserComponent implements OnInit{
fromDate : any ;
toDate : any ;
graphData : any = null;
dateSelected(){
this.gaService.getGaData(this.req,"/users")
.subscribe(
data => {
this.dataResponse = data;
let grData = [];
for (let data of this.dataResponse.usersByDate) {
var sample={"x": data.valueX ,"y": data.valueY , "z" : data.valueZ };
grData.push(sample);
}
this.graphData = grData;
},
err => {
console.log("Error occered : "+ err);
}
);
}
Please suggest me to solve the problem.
I guess In angular 1 there is a watch() to achieve this but in angular 2 this function is not there.
correct me If I am wrong and help me solve this
Thanks
I am building a website which requires the Autocomplete to load results from ajax, so I decided to choose the angular material Autocomplete and its working fine.
Until now my requirement was to show the search results of one type, lets say I need to show the search results of country names, but now my requirements changed to show the country names and the state name and this cause me to make two different groups one of country and the another of state, i did not found a solution of show to modify the angular material autocomplete custom template.
Please see the image attached:
Hi consider this version, modified solution from above answer if it helps,
https://jsfiddle.net/sachinshukla5/9xykgvs6/78/
Basically just adding an additional element in the items array which is needed to be dispalyed at specific index.
var states = getStates().filter(function(item) {
item.isFirst = false;
return (item.state.toUpperCase().indexOf(searchText.toUpperCase()) !== -1);
});
var countryName = "";
angular.forEach(states, function(item, key){
if(countryName != item.country){
countryName = item.country;
states.splice(key,0, {
"isFirst" : true,
"state": " ",
"country": countryName
});
}
})
deferred.resolve(states);
}, 200);
I have create one solution which can help you.
Please find link
Angular Material Autocomplete custom template
Here the logic is, find out first element in the searched list and add country name on it
var states = getStates().filter(function(item) {
item.isFirst = false;
return (item.state.toUpperCase().indexOf(searchText.toUpperCase()) !== -1);
});
var countryName = "";
angular.forEach(states, function(item, key){
if(countryName != item.country){
countryName = item.country;
item.isFirst = true;
}
})
You have to work on styling part line adding divider between values.
Please let me know if I can help you in other context
I am using angular-chart.js(which uses Chart.js) to create charts in my angular app. I want to add values on top of the bars in a bar chart.
If extending the defaults charts in Chart.js is the only way, can you please provide a reference code?
You can use the answer here how to display data values on Chart.js and modify the callback function slightly to show the index values instead of the values
...
this.datasets.forEach(function (dataset) {
dataset.bars.forEach(function (bar, i) {
ctx.fillText(i + 1, bar.x, bar.y - 5);
});
})
...
The callback can be passed in via the angular-chart options parameter. You won't be extending the chart type, so you won't need to register a new directive with angular-chart.
Fiddle - http://jsfiddle.net/zkqu7tsp/
This is the onAnimationComplete callback for angular-chart options
onAnimationComplete: function () {
var chart = this.chart;
var ctx = this.chart.ctx;
this.datasets.forEach(function (dataset) {
dataset.bars.forEach(function (bar, i) {
console.log(bar)
ctx.fillText(bar.value, bar.x, bar.y - 5);
});
})
Hope this helps you ..
I am trying to make my google chart interactive using angularjs. I am using this AngularJs Google Chart directive https://github.com/bouil/angular-google-chart
I tried several options to add Listener by going through some examples.
$scope.selectListener = google.visualization.events.addListener($scope.chart, 'select', function () {
$scope.$apply(function(){
var selectedItem = $scope.chart.getSelection()[0];
if (selectedItem) {
var topping = $scope.chart.data.getValue(selectedItem.row, 0);
alert('The user selected ' );
}
})
});
I am seeing these errors in my browser
Error: [$interpolate:interr] http://errors.angularjs.org/1.2.8/$interpolate/interr?p0=%24scope.chartObje…json%7D%7D&p1=TypeError%3A%20Converting%20circular%20structure%20to%20JSON
at Error (native)
Can someone please help me with an example how to make google chart interactive using angularjs?
Here is some more information which I would like to share:
chart1.type = "ColumnChart";
chart1.displayed = false;
var chdata = new google.visualization.DataTable();
chdata.addColumn('string', 'Task');
chdata.addColumn('number', 'Passed');
chdata.addColumn('number', 'Failed');
for( var i=0; i<queueDet.length; i++){
chdata.addRow([queueDet[i].rundate, {v: queueDet[i].passedTestCount, f: queueDet[i].buildTag}, {v: queueDet[i].failedTestCount}]);
}
In this column chart I would like to make those columns interactive and when I click Passed column, would like to make an $http call by passing queueDet[i].buildTag to get additional details and render them in a table.