I'm using Angular Chart http://jtblin.github.io/angular-chart.js/. Can I update labels without redrawing the whole chart? It's all good when I only change data, but every time if I update labels, chart will be rebuilt instead of partial update.
html:
<div class="content-body chart-container">
<canvas
class="chart chart-line"
chart-type="line"
chart-data="data"
chart-labels="labels"
chart-options="options"
>
</canvas>
</div>
controller:
$interval(function() {
$scope.data = newData;
$scope.labels = newLabels
},1000)
Related
Microsoft have announced it is possible to turn off the loading image shown when a report is loading.
Loading Image
Use the Power BI Embedded JavaScript SDK to hide the flickering Power
BI logo that appears when a report is loaded. - power-bi-embedded-feature-hide-the-power-bi-logo-during-visualization-load
However I cannot find any mention of this in any of the JS SDK documentation or any examples online.
Has anyone achieved this yet?
First add a gif which you want instead of the Power BI logo. You can add it in a div element. This element will overlap the div element containing the report. The HTML code looks like below:
<div id="container">
<div id="overlay">
<img id="spinner" alt="Alternate Text" src="image/giphy.gif"/>
</div>
<div id="embedContainer" style="height: 600px; width: 100%; max-width: 1400px;">
</div>
</div>
Once you have added your gif. Now, make changes in the JavaScript Code. So you final JavaScript embedding code will be:
<script type="text/javascript">
// Read embed token
var embedToken = "<% =this.embedToken %>";
// Read embed URL
var embedUrl = "<% = this.embedUrl %>";
// Read report Id
var reportId = "<% = this.reportId %>";
// Get models (models contains enums)
var models = window['powerbi-client'].models;
// Embed configuration is used to describe what and how to embed
// This object is used when calling powerbi.embed
// It can also include settings and options such as filters
var config = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: embedToken,
embedUrl: embedUrl,
id: reportId,
settings: {
filterPaneEnabled: true,
navContentPaneEnabled: false
}
};
$("#embedContainer").css("visibility", "hidden");
// Get a reference to the embedded report HTML element
var reportContainer = $('#embedContainer')[0];
// Embed the report within the div element
var report = powerbi.embed(reportContainer, config);
report.on("loaded", function (event) {
$("#overlay").hide();
$("#embedContainer").css("visibility", "visible");
report.off("loaded");
})
</script>
You can also add CSS to align you gif with your report:
<style>
#container{
position:absolute;
width: 1400px;
height:600px;
}
#overlay{
position:absolute;
width:inherit;
height:inherit;
}
#spinner{
display: block;
margin-top:10%;
margin-left: auto;
margin-right: auto;
width:10%;
height: 10%;
}
</style>
Further, you can refer to the following youtube link: https://www.youtube.com/watch?v=YhjtunTmnbw. This video is by the Power BI official YouTube account. In this video, you can learn how to get white-labelled embedded analytics in your application with Power BI Embedded. Discover how to hide the Power BI logo until the loaded or the rendered event, and how to use a personalized logo for the loading phase.
What the recommended way to do this, even in the article you referenced, is -
1. Hide the iframe (or the div containing it)
2. Listen to either the loaded event when using (phased loading)[https://github.com/Microsoft/PowerBI-JavaScript/wiki/Phased-Embedding-API] or rendered otherwise
3. Show the div you hid before and voila - the embedded power bi is already loaded..
It is not currently possible to remove the PowerBI loading symbol. It would be great idea to suggest to input your own custom logo though
I have a chart js bar chart that draws within the canvas:
<canvas id="chart" width="800" height="400"></canvas>
However I would like the chart to fit the size of the current window. I have tried:
<canvas id="chart" width="100%" height="400"></canvas>
but it does not like it. I could get the window width using window.innerWidth but is there any reason why the 100% does not work?
Please see the post: Chart.js canvas resize . There are actually two answers that are really good solutions here. You can use the chart options like below:
// Boolean - whether or not the chart should be responsive and resize when the browser does.
responsive: true,
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: false,
or you can set the canvas width and height using client side code:
var ctx = document.getElementById("canvas").getContext("2d");
ctx.canvas.width = 300;
ctx.canvas.height = 300;
var myDoughnut = new Chart(ctx).Doughnut(doughnutData);
This post very effectively answers your question about why % values dont work: Canvas is stretched when using CSS but normal with "width" / "height" properties
After setting responsive and ratio options (check out related chartjs doc), use following css to fill 100% of the parent:
html
<div class="panel">
<div class="chart-container">
<canvas id="chart"></canvas>
</div>
</div>
scss:
.panel {
display: flex;
.chart-container {
position: relative;
flex-grow: 1;
min-height: 0;
}
}
the vertical scroll-bar on my table hovers over my data. I cannot seem to move the vertical scroll-bar nor can I change the width of the table. I even tried left aligning the text on my 2nd column but nothing happens.
This is my table:
I have to scroll across to see all my data:
Is there a way to see the full width of my table and not have the vertical scroll bar hover over my 2nd column?
this is the code:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", { packages: ["table"] });
google.setOnLoadCallback(drawTable);
function drawTable() {
var data = google.visualization.arrayToDataTable([
['Researcher Name', 'Number of Submissions'],
#Html.Raw(rows)]);
var options = {
title: ''
};
var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard'));
var stringFilter = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'string_filter_div',
options: {
filterColumnIndex: 0
}
});
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table_div',
options: {
showRowNumber: false
}
});
dashboard.bind([stringFilter], [table]);
dashboard.draw(data);
}
google.load('visualization', '1', { packages: ['controls'], callback: drawTable });
</script>
<div id="dashboard">
<div id="string_filter_div"></div>
<div style="height:450px" id="table_div"></div>
</div>
I was getting exactly the same problem as you and ended up solving it by adding paging options to the table. Now I never get a vertical scroll bar.
page: 'enable',
pageSize: 27
The table chart usually does a good job with just the defaults.
Try removing style="height:450px" from your div.
To get the table headings to wrap, you can assign a css class name to headerCell, it can be blank.
cssClassNames: {headerCell: 'googleHeaderCell'}
Add this css class somewhere on your page...
.googleHeaderCell {}
Otherwise, you should be able to set a distinct height and width, directly in your options. Just remember to remove it from the div, as mentioned previously. Unless other content on the page is crowding the table...
options = {
cssClassNames: {headerCell: 'googleHeaderCell'}, // be sure to add css
height: 600, // no px needed
width: 800
};
For the width of the table, you can assign width either in the div itself or in the table option like:
options = {
width: 800
};
always try to keep the height:auto in the div section, so that height of the table can get the default table content. If you are getting overflow in the scrollbar and try to get rid of it, you can use a CSS
divElement(id/class){
overflow:hidden;// for both horizontal and vertical scrolls
or
overflow-x:hidden;// for horizontal scroll
or
overflow-y:hidden;// for vertical scroll
}
To keep the text left or right aligned inside the table cell you can use CSS in the table option itself:
.align-text{ //class name
text-align:left/right;}
var cssClass= {
'tableCell': 'align-text',
};
/**** table option ****/
options = {
cssClassNames: cssClass,
width: 800};
Hi all I have an issue i want to add another item to my model that is dynamically rendered on the UI.
However after i add it It still doest render on the UI. Do I need to call a function after adding it to the list of models?
Here is an example:
http://emberjs.jsbin.com/mugodifiki/edit?html,js,output
on clicking on an image it is suppose to add a predefined model to the array and display it on the UI
This is clearly an issue caused from the integration with owlcarousellibrary. A simple example of dynamically changing the model and rendering the ui, in plain emberjs, can be found here,
http://emberjs.jsbin.com/lodetofere/edit?html,js,output (simply click on the list).
This specific issue is caused due to the modifications of the DOM by the owlcarousel library. So to solve this, it is required to refresh the owlcarousel after changing the model and restoring the initial state of the dom.
Example,
http://emberjs.jsbin.com/qanocidoye/edit?html,js
The content part of the template is actually refreshed when the model changes by toggling a property and the carousel is reinitialized.
hbs
<script type="text/x-handlebars" data-template-name="components/test-component">
{{#if refresh}}
{{partial "owlContent"}}
{{else}}
{{partial "owlContent"}}
{{/if}}
</script>
<script type="text/x-handlebars" data-template-name="_owlContent">
<div class="owl-carousel owl-theme">
{{#each titleModels}}
<div class="item">
<img {{action "owlItemClicked" this on="click" }} {{bind-attr src=img}}>
</div>
{{/each}}
</div>
</script>
js
App.TestComponentComponent = Ember.Component.extend({
// classNames: ['owl-carousel', 'owl-theme'],
items: 8,
touchDrag: true,
mergeFit: false,
center: true,
addClassActive: true,
mouseDrag: true,
slideSpeed : 1000,
margin: 2,
refresh:false,
initCarousel:function(){
var self = this;
var options = {};
options.items = self.get('items');
options.touchDrag = self.get('touchDrag');
options.mergeFit = self.get('mergeFit');
options.center = self.get('center');
options.addClassActive = self.get('addClassActive');
options.mouseDrag = self.get('mouseDrag');
options.slideSpeed = self.get('slideSpeed');
options.margin = self.get('margin');
self._options = options;
self._owl = self.$(".owl-carousel").owlCarousel(options);
},
didInsertElement: function(){
this.initCarousel();
},
refreshCarousel:function(){
var self = this;
Em.run.next(function(){
self.initCarousel();
});
}.observes('refresh'),
actions: {
owlItemClicked: function(titleModel) {
var self = this;
var content = "<div class=\"item dodgerBlue\"><h1>test</h1></div>";
var newModel = Ember.Object.create({ index: 3, img: "http://www.cs.rice.edu/~dwallach/comp314_f99_ga/%257Eavinash/comp314/project3/pretty/pic1s.jpg"});
console.log(this.get('titleModels'));
//THIS ADDS IT TO THE MODEL BUT IS NOT RENDERED ON UI
this.get('titleModels').push(newModel);
alert('new model has been added');
console.log(this.get('titleModels'));
this.toggleProperty("refresh");
}
}
});
You may come up with a more elegant solution but this is the main idea.
I have a Google chart that is set to 500px by 500px, yet returns 400px by 200px. I have looked at the div, and it shows 500x500. I have no reason for why the chart comes back at 400x200. the div shows 500x500, but the SVG rectangle box shows 400x200, making all of the images smaller.
Is there a setting I don't know?
<div class="span5">
<div id="qual_div" style="border:1px black solid;margin:0px;padding:0px;height:500px;width:500px"></div>
</div>
<script type="text/javascript">
var data, options, chart;
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
data = google.visualization.arrayToDataTable([
['Qual', 'Stat'],
['Patient Satisfaction', {{ $stats->attributes['sa_ptsatisfaction'] }}],
['Medical Knowledge', {{ $stats->attributes['sa_medknowledge'] }}],
['ER Procedural Skills', {{ $stats->attributes['sa_erprocskills'] }}],
['Nurse Relationship Skills', {{ $stats->attributes['sa_nrsrltnshpskls'] }}],
['Speed', {{ $stats->attributes['sa_speed'] }}],
['Compassion', {{ $stats->attributes['sa_compassion'] }}],
['EMR Utilization Skills', {{ $stats->attributes['sa_emr'] }}],
['Profession Teamwork Skills', {{ $stats->attributes['sa_proftmwrkskills'] }}]
]);
options = {
title: 'My Daily Activities'
,chartArea:{left:0,top:0,width:"100%",height:"100%"}
};
chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
function adjustChart(nm, vl) {
for (var r=0; r<data.D.length; r++) {
if (data.D[r].c[0].v == nm) {
data.D[r].c[1].v = parseInt(vl);
break;
}
}
chart.draw(data, options);
}
</script>
There are several ways to set the size of a chart.
The first is to set the size of the element that contains it. The chart will default to the width and height of the containing element (see Google Visualization documentation for default values of height/width).
The second is to not define the actual size of the element, and instead set the height/width of the chart to 500px each manually by adding those to your options:
options = {
title: 'My Daily Activities'
,chartArea:{left:0,top:0,width:"100%",height:"100%"}
,height: 500
,width: 500
};
What you are actually doing in your code is setting the size of the chart plot itself (not of the overall chart element with the axes, labels, and legend). This will cause the chart plot area to become 500px by 500px if you point to the appropriate div as pointed out by #Dr.Molle in the comments.
Assuming you don't want that, your new options would be:
options = {
title: 'My Daily Activities'
,height: 500
,width: 500
};
So setting the height and width as in jmac's answer works, but if you want it responsive there is some additional things I had to do.
But just to back up a second the reason I am having this problem in the 1st place is:
The div that this chart is displaying in is not visible when the page loads.
As Seen here the hidden Chart Width is Wrong 400 by 200: jsfiddle.net/muc7ejn3/6/
As Seen here the hidden Chart Width is Correct: jsfiddle.net/muc7ejn3/7/
Another way to do it is just to Un-hide the Chart right before chart.draw() is called, then Hide it again, something like:
tempShowChart();
chart.draw(view, options);
hideChartAgain();
This doesn't handle window being resized.
I have the same case that the rendered graph has a size of 400 x 200px
After being rendered the svg is wrapped inside 3 divs
<div id="gantt-chart" class="svelte-ql38wl">
<div style="position: relative; width: 400px; height: 200px;">
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
<svg width="400" height="200"><defs></defs><g><rect x="0" y="0" width="400" height="200" fill="#ffffff"></svg>
</div>
</div>
</div>
own container set with chart = new google.visualization.Gantt(document.getElementById('gantt-chart'));
generated outer wrapper div - width & height set > where? seems to be synced with the svg size
generated inner wrapper div - chart area?
svg
The inner wrapper div looks like the chart area. Unfortunately changing the values in the options has no effet - always stays 'left: 0px; top: 0px; width: 100%; height: 100%;'
NOTICE I'm drawing a Google Gantt Chart - looks like not all charts have the same possible settings. I find the chartArea option under e.g. 'Column Charts', but it's not listed with 'Gantt Charts'
The main chart documentation says
You can specify the chart size in two places:
Specifying the size in HTML - A chart can take a few seconds to load
and render. If you have the chart container already sized in HTML, the
page layout won't jump around when the chart is loaded.
Specifying the size as a chart option - If the chart size is in the JavaScript, you
can copy and paste, or serialize, save, and restore the JavaScript and
have the chart resized consistently.
If you don't specify a chart size either in the HTML or as an option, the chart might not be rendered properly.
Since it looks like the chart size can only be set as a number for pixels (with the gantt chart again - I saw other examples where it seemed to be possible to set percentage...) in my case these settings helped
set css of container div + generated children
programmatically set height of chart via js
#gantt-chart {
width: 100%;
height: 100%;
display: flex;
overflow: auto;
}
#gantt-chart div {
margin: auto; /* centers chart inside container div with display:flex*/
}
let trackHeight = 30
let options = {
height: dataTable.getNumberOfRows() * trackHeight + 50
// width adaps to container div with 100% width
}