I'm trying to add currency format in google charts and angularjs
Google charts display Money not Percentages
var formatter = new google.visualization.NumberFormat({
prefix: '$' }); formatter.format(data, 1);
var options = {
pieSliceText: 'value' };
how to add above code in the function below ?
$scope.jkchart = function(){
$scope.chartObject = {};
$scope.chartObject.data = {"cols": [
{id: "t", label: "Topping", type: "string"},
{id: "s", label: "Slices", type: "number"}
], "rows": [
{c: [
{v: "Mushrooms"},
{v: 3},
]},
{c: [
{v: "Olives"},
{v: 31}
]},
{c: [
{v: "Zucchini"},
{v: 5},
]}
]};
$scope.chartObject.type = "PieChart";
$scope.chartObject.options = {
'title': 'How Much Pizza I Ate Last Night'
};
};
You could specify format like this:
$scope.chartObject.formatters = {
number: [{
columnNum: 1,
prefix: '$'
}]
};
Working example
var app = angular.module('chartApp', ['googlechart']);
app.controller('MainCtrl', function ($scope) {
$scope.chartObject = {};
$scope.chartObject.data = {
"cols": [
{ id: "t", label: "Topping", type: "string" },
{ id: "s", label: "Slices", type: "number" }
], "rows": [
{
c: [
{ v: "Mushrooms" },
{ v: 3 },
]
},
{
c: [
{ v: "Olives" },
{ v: 31 }
]
},
{
c: [
{ v: "Zucchini" },
{ v: 5 },
]
}
]
};
$scope.chartObject.type = "PieChart";
$scope.chartObject.options = {
'title': 'How Much Pizza I Ate Last Night',
pieSliceText: 'value'
};
$scope.chartObject.formatters = {
number: [{
columnNum: 1,
prefix: '$'
}]
};
});
<script src="http://code.angularjs.org/1.2.10/angular.js"></script>
<script src="http://bouil.github.io/angular-google-chart/ng-google-chart.js"></script>
<body ng-app='chartApp' ng-controller="MainCtrl">
<div google-chart chart="chartObject" style="width: 900px; height: 500px;"></div>
</body>
Related
I found some solutions but not exactly what I wanted. I want to change the field name inside the object name where condition I will explain by the following example for if
array=[{
"mobile1": [{
"screensize": "6.5"
}]
},
{
"mobile2": [{
"screensize": "6.5"
},
{
"price": "2000"
}
]
}
]
I want to change mobile1 to newmobile final output will be
[{
"newmobile": [{
"screensize": "6.5"
}]
},
{
"mobile2": [{
"screensize": "6.5"
},
{
"price": "2000"
}
]
}
]
Try this:
let c = [{
"mobile1": [{
"screensize": "6.5"
}]
},
{
"mobile2": [{
"screensize": "6.5"
},
{
"price": "2000"
}
]
}
]
let final = c.map(i=>{
let x = Object.getOwnPropertyNames(i)
if(x=="mobile1"){
console.log(i.mobile1)
return {"newmobile":i.mobile1}
}
else {
return i
}
})
console.log("final output",final);
With input.map(i => { const {x, ...rest} = i; return x ? {...rest, a: x} : rest}) you should be able to change const input = [{x: 1, y: 2}, {x: 11, y: 22}, {z: 111, y: 222}] into [{y:2,a:1},{y:22,a:11},{z:111,y:222}].
Could this work for you?
UPDATE
My solution takes advantage of JavaScript's destructuring assignment with spread operatr. You can find below a running snippet:
const input = [{x: 1, y: 2}, {x: 11, y: 22}, {z: 111, y: 222}]
const output = input.map(i => { const {x, ...rest} = i; return x ? {...rest, a: x} : rest})
console.log(output)
So, in your case, you have
const input = [{
"mobile1": [{
"screensize": "6.5"
}]
},
{
"mobile2": [{
"screensize": "6.5"
},
{
"price": "2000"
}
]
}
]
const output = input.map(i => { const {mobile1, ...rest} = i; return mobile1 ? {...rest, newmobile: mobile1} : rest})
console.log(output)
and the produced output is the one you need.
I hope this can help you to solve your problem.
I have an array called data. How do i extract sub_data? Just need the sub_data part for each object.
const data = [
{
id: 1,
title: 'Logo'
sub_data: [
{
id: 2,
title: 'Company Logo'
},
{
id: 3,
title: 'Website Logo'
},
]
},
{
id: 2,
title: 'Brands'
sub_data: [
{
id: 25,
title: 'Company Brands'
},
{
id: 3,
title: 'Website Brands'
},
]
}
]
Example output will get two outputs because there is 2 objects:
const subData = [
{
id: 2,
title: 'Company Logo'
},
{
id: 3,
title: 'Website Logo'
},
]
const subData = [
{
id: 25,
title: 'Company Brands'
},
{
id: 3,
title: 'Website Brands'
},
]
Not very sure how to use the map function just to get sub_data in the correct structure
You can use flatMap to get sub_data in one array
const data = [
{
id: 1,
title: 'Logo',
sub_data: [
{
id: 2,
title: 'Company Logo'
},
{
id: 3,
title: 'Website Logo'
},
]
},
{
id: 2,
title: 'Brands',
sub_data: [
{
id: 25,
title: 'Company Brands'
},
{
id: 3,
title: 'Website Brands'
},
]
}
]
const result = data.flatMap(item => item.sub_data)
console.log(result)
If you want an array with the sub_data objects you can just map the original array:
const data = [
{
id: 1,
title: 'Logo',
'sub_data'
: [
{
id: 2,
title: 'Company Logo'
},
{
id: 3,
title: 'Website Logo'
},
]
},
{
id: 2,
title: 'Brands',
sub_data: [
{
id: 25,
title: 'Company Brands'
},
{
id: 3,
title: 'Website Brands'
},
]
}
]
const mappedData = data.flatMap(obj => obj.sub_data)
console.log(mappedData)
Another solution would be to use the .forEach function of javascript.
const subData = [];
data.forEach(item => subData.push(...item.sub_data))
I am trying to make pieCharts, Barcharts using angular google charts .
I have made a colChartObject and assign data to it and several other options like size,colors but nothing is displaying on the browser.I tried the same using my custom directive too but had the same problem .
Can anyone please let me know the problem in my code??
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-chart/1.0.0-beta.1/ng-google-chart.min.js" type="text/javascript"></script>
</head>
<body ng-app = "ngapp">
<div ng-controller="ChartController">
<div google-chart chart="colChartObject"></div>
</div>
</body>
</html>
JS
var app = angular.module('ngapp',[]);
app.controller('ChartController',function($scope){
$scope.colChartObject={};
$scope.colChartObject.type = "PieChart"; //setting chart type
$scope.colChartObject.displayed = true;
$scope.Colors = [
['#CB7472', '#A895BF', '#F8A769', '#A7514F', '#C0504D', '#9BBB59'],
['#7399C9', '#A8C472', '#8AC8D9', '#426690', '#4BACC6', '#8064A2'],
['#4F81BD', '#C0504D', '#9BBB59', '#A895BF', '#F8A769', '#A7514F'],
['#F79646', '#4BACC6', '#8064A2', '#A8C472', '#8AC8D9', '#426690']
];
// $scope.colChartObject.data = $scope.data; //setting chart data
//setting chart options
$scope.colChartObject.options = {
title: 'nothing special', //chart title
isStacked: 'true', //chart is stacked or not
titleTextStyle: { color: '#000000',
fontName: 'Open Sans', fontSize: 16,
bold: true, italic: false }, //title style
height: 250,
colors: $scope.Colors[Math.floor(Math.random() * $scope.Colors.length)] //colors
};
$scope.colChartObject.data= {
cols: [
{
id: "month",
label: "Month",
type: "string"
},
{
id: "Tables-id",
label: "Tables",
type: "number"
},
{
id: "Chairs-id",
label: "Chairs",
type: "number"
},
{
id: "Bed-id",
label: "Bed",
type: "number"
},
{
id: "Desk-id",
label: "Desk",
type: "number"
}
],
rows: [
{
c: [
{
v: "January"
},
{
v: 19, //value required to plot chart
f: "19 Tables" //description which is shown on mouse hover
},
{
v: 12,
f: "12 Chairs"
},
{
v: 7,
f: "7 Beds"
},
{
v: 4,
f: "4 Desks"
}
]
},
{
c: [
{
v: "February"
},
{
v: 13
},
{
v: 1,
f: "only 1unit"
},
{
v: 12
},
{
v: 2
}
]
},
{
c: [
{
v: "March"
},
{
v: 24
},
{
v: 5
},
{
v: 11
},
{
v: 6
}
]
}
]
}
});
You forgot to declare the module of "google-chart" as a dependency of your module "ngapp".
You have to change
var app = angular.module('ngapp', []);
to
var app = angular.module('ngapp', ['googlechart']);
I'm trying to give an array to my makeSlider function.
The HTML5 Data attribute selects the correct array. Unfortunately, it is not interpreted as an array.
It does not work:
values = $(this).data("slider");
makeSlider(sliderID, targetID, values);
Is working:
makeSlider(sliderID, targetID, dataMehrfachauswahlmatrixLeft);
HTML:
<div class="noui-slider" id="slider-1" data-slider="dataMehrfachauswahlmatrixLeft">
<!-- slider here -->
</div>
<div class="hidden-md-up">
<!-- Store selected value -->
<input class="form-control slider-value" id="input-target-1">
</div>
JS (script.js):
$(document).ready(function() {
// slider array
// Matrix 1
var dataMehrfachauswahlmatrixLeft = [{
id: 1,
value: "sehr wichtig"
}, {
id: 2,
value: ""
}, {
id: 3,
value: ""
}, {
id: 4,
value: ""
}, {
id: 5,
value: "unwichtig"
}, {
id: null,
value: "weiß nicht"
}];
// Matrix 2
var dataMehrfachauswahlmatrixRight = [{
id: 1,
value: "in hohem Maße"
}, {
id: 2,
value: ""
}, {
id: 3,
value: ""
}, {
id: 4,
value: ""
}, {
id: 5,
value: "in geringem Maße"
}, {
id: null,
value: "weiß nicht"
}];
// build slider
var makeSlider = function(sliderID, targetID, values) {
...
}
// init slider
$(".noui-slider").each(function(index) {
var sliderID = $(this).attr("id"),
targetID = $(this).next().find(".slider-value").attr("id");
values = $(this).data("slider");
makeSlider(sliderID, targetID, values);
});
});
Problem with current implementation it that the variable value doesn't refers to the defined array. Its a string literal having value i.e. dataMehrfachauswahlmatrixLeft, dataMehrfachauswahlmatrixRight
Define the array in window or any other object scope.
// Matrix 1
window.dataMehrfachauswahlmatrixLeft = [...];
// Matrix 2
window.dataMehrfachauswahlmatrixRight = [...]
Then use Bracket notation to access object dynamic properties.
values = $(this).data("slider");
makeSlider(sliderID, targetID, window[values]);
An example here
$(document).ready(function() {
var myOBj = {};
// slider array
// Matrix 1
myOBj.dataMehrfachauswahlmatrixLeft = [{
id: 1,
value: "sehr wichtig"
}, {
id: 2,
value: ""
}, {
id: 3,
value: ""
}, {
id: 4,
value: ""
}, {
id: 5,
value: "unwichtig"
}, {
id: null,
value: "weiß nicht"
}];
// Matrix 2
myOBj.dataMehrfachauswahlmatrixRight = [{
id: 1,
value: "in hohem Maße"
}, {
id: 2,
value: ""
}, {
id: 3,
value: ""
}, {
id: 4,
value: ""
}, {
id: 5,
value: "in geringem Maße"
}, {
id: null,
value: "weiß nicht"
}];
// build slider
var makeSlider = function(sliderID, targetID, values) {
console.log(values)
}
$(".noui-slider").on('click', function() {
var values = $(this).data("slider");
makeSlider(1, 2, myOBj[values]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='noui-slider' data-slider='dataMehrfachauswahlmatrixLeft'>1</div>
<div class='noui-slider' data-slider='dataMehrfachauswahlmatrixRight'>2</div>
Im using ng-google-chart to create charts from data I receive from a database. I store the data in a table. I need to export both the table and the chart.
I'm using the following technique to export tables (where "exportable" is the div the contains the table):
$scope.export = function ()
{
var blob = new Blob([document.getElementById('exportable').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
saveAs(blob, "Record.xls");
alert("export done");
};
I cannot find any way to add the chart to this file.
This is the code to generate a chart
var chart1 = {};
chart1.type = "ColumnChart";
chart1.cssStyle = "height:400px; width:500px;";
chart1.data = {
"cols": [
{ id: "gender", label: "Gender", type: "string" },
{ id: "number", label: "number", type: "number" }
], "rows": [
{
c: [
{ v: "male" },
{ v: $scope.male, f: $scope.male }
]
},
{
c: [
{ v: "female" },
{ v: $scope.female }
]
}
]
};
chart1.options = {
"title": "",
"isStacked": "true",
"fill": 20,
"displayExactValues": true,
"vAxis": {
"title": "Number", "gridlines": { "count": 6 }
},
"hAxis": {
"title": "gender"
}
};
chart1.formatters = {};
$scope.chart = chart1;
}
To getImageURI of the chart, wait for the ready event and call the function.
Then you can add the image somewhere on the page.
You can even hide the original chart if needed...
Following is an example of loading the image URI into another element.
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["Copper", 8.94, "#b87333"],
["Silver", 10.49, "silver"],
["Gold", 19.30, "gold"],
["Platinum", 21.45, "color: #e5e4e2"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
legend: { position: "none" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("chart_div"));
google.visualization.events.addListener(chart, 'ready', function () {
document.getElementById("chart_image").insertAdjacentHTML('beforeEnd', '<img alt="Chart Image" src="' + chart.getImageURI() + '">');
});
chart.draw(view, options);
}
<script src="https://www.google.com/jsapi"></script>
<span>CHART</span>
<div id="chart_div"></div>
<br/>
<span>IMAGE</span>
<div id="chart_image"></div>