Search Posts

Category: google-visualization

How to Push data res from api to arrayToDataTable google Chart [duplicate]

This question already has an answer here: How do I return the response from an asynchronous call? 34 answers var nullArr = [null, 0, 0, 0, 0]; var chartData = []; for (var i = 0; i < resData.length; i++) { var ownArr = []; var grArr = []; grArr.push(resData[i].Title, resData[i].GrValue1, resData[i].GrValue2, 0, 0); ownArr.push(resData[i].Title, 0, 0, resData[i].OwnValue1,resData[i].OwnValue2); chartData.push(grArr, ownArr, nullArr); } } var data = google.visualization.arrayToDataTable([ [‘Year’, ‘A’, ‘B’, ‘A’, ‘B’], [‘2012’, 900, 390, […]

image is not shown on the given location when used css attributes to give some margin space

how to image is not shown on the given location when used css attributes to give some margin space I’m showing some images on the chart. The position to display the images are not showing correctly when included margin-left and margin-right properties to the chart. Please find the demo : https://plnkr.co/edit/vr7R9KsvC2GuS7kfoIBp?p=preview css code: #chart1{ padding:0.5em; margin: 0 auto; overflow : hidden; margin-left: 60px; margin-right: 60px; } #chart2 { margin: 0 auto; overflow : hidden; margin-left: […]

file://www.google.com/jsapi NOT FOUND

Im using a google charts angular in phonegap cordova On web working fine…, but android device get error loader.js:1 GET file://www.google.com/jsapi net::ERR_FILE_NOT_FOUND In my config.xml <access origin=”*” /> <access origin=”http://*.google.com” /> <access origin=”https://*.google.com” /> <access origin=”https://*.gstatic.com” /> <access origin=”http://*.gstatic.com” /> <access origin=”*”/> <allow-intent href=”http://*/*” /> <allow-intent href=”https://*/*” /> <allow-intent href=”tel:*” /> <allow-intent href=”sms:*” /> <allow-intent href=”mailto:*” /> <allow-intent href=”geo:*” /> How to fixed? I load Source: AngularJS

not showing the label information completely on the chart when there is no enough space show full text

I am working on angularjs google chart API timeline chart. Please find the demo https://plnkr.co/edit/Krrz1uCeNlvl849E1P1x?p=preview I am showing multiple rows information in a single row as shown in the demo. when there are multiple rows information shown in a single row as shown in the demo plunker above, it is not showing the label information on the chart When there is no enough place to show the label. The text “first row label” is not […]

how to show a chart dynamically using googlecharts

Using angularjs and googlecharts, i’m trying to draw a Candlestickchart. Please find the demo : https://plnkr.co/edit/ohvBS5Whtc74K82ICJFJ?p=preview Right now with my code shown in the demo no error is displayed but the chart is not shown on the webpage. js code: angular.module(‘myApp’, [‘googlechart’]) .controller(‘myController’, function($scope) { $chart = {}; $chart.type = “CandlestickChart”; $chart.view = { columns: [0, 1, 2, 3,4] }; $chart.data = { “cols”: [ {id: “Status”, label: “Status”, type: “string”}, {id: “Laptop”, label: “Laptop”, […]

no errors are shown nor the chart is shown on the webpage

I am trying to show Candlestickchart for the data. Please find the demo : https://plnkr.co/edit/ohvBS5Whtc74K82ICJFJ?p=preview Right now with my code shown below no error is shown nor the chart is showing on the page. Any inputs on how to show Candlestickchart on the page with my data? js code: angular.module(‘myApp’, [‘googlechart’]) .controller(‘myController’, function($scope) { $chart = {}; $chart.type = “CandlestickChart”; $chart.view = { columns: [0, 1, 2, 3,4] }; $chart.data = { “cols”: [ {id: […]

unable to iterate and display all graphs

I am trying to iterate and show multiple google charts using angular.forEach, but can’t seem to make it work. It is taking the last object values from the list and showing one pie chart instead of showing pie charts for all the objects. Please find the demo here Below is the list of objects: $scope.values = [{ “Laptop” : 12, “Desktop” : 44,”Server”:21, “Shipping” : 33 }, { “Laptop” : 55, “Desktop” : 14,”Server”:11, “Shipping” […]

Pie Chart Label Lines with key and y value and Legend position on right side with angular-nvd3

I need to print the label with both key and value and also with the label line.and legends should display on the right side of the pie chart.What are the changes I have to do in js files? <head> <meta charset=”utf-8″ /> <title>Angular-nvD3 Donut Chart</title> <script>document.write(‘<base href=”‘ + document.location + ‘” />’);</script> <link rel=”stylesheet” href=”style.css” /> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css”/> <script src=”//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js” charset=”utf-8″></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js”></script> <script src=”https://rawgit.com/krispo/angular-nvd3/v1.0.5/dist/angular-nvd3.js”></script> <script src=”app.js”></script> </head> <body ng-controller=”MainCtrl”> <nvd3 options=”options” […]

Google column chart bars width

I’ve got angular2 and google charts. My component code is: playstoreRatingChart(data) { let dateTitle: any = ‘Date’; let ratingTitle: any = ‘Rating’; let dataTable = [[dateTitle, ratingTitle, { “role”: ‘annotation’ }, { role: ‘style’ }]]; data.playstore_rating.forEach(function (obj) { let newDate = new Date(obj.year, obj.month-1, obj.day) let rating = obj.rating; let rowRating = Number(rating.toFixed(2)); let test = parseFloat(rating.toFixed(2)); let row = [newDate, test, test, ‘width:22; stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 12; fill-color: #BC5679; fill-opacity: 0.2’]; dataTable.push(row) […]

issue with data on the tooltip display

I am working on google charts. I have created a ColumnChart using angularjs google charts. I’m facing issue with the tooltip on mouseover on the bars when the series is hidden by selecting the legend. When clicked on the legend i’m hiding the series of data and when mouseover on the bar after clicking on the legend to hide the data, i see a null value is shown for the hidden series on the tooltip, […]

Next Page »