chart.js - Load ChartJS via VueJS - ChartJS empty and 0px dimension -

-

alright, trying create chartjs instance via vuejs update data via ajax requests inside component.

basically working, chartjs instance gets created empty , has height , width of 0 , when resize via console still empty.

so best way of creating "chartjs component" vuejs or fault in code below?

the basic way want load chart this.

<chart :resource="'https://httpbin.org/get'"></chart>

this basic component

var vue = require('vue');  vue.component('chart', {     template: require('./template.html'),     props: ['resource'],     data: function() {         return {             startingdata: {},             latestlabel: {},         }     },     ready: function() {         // here load js data , set startingdata     }, });

this directive use pass down data component. way this.el can context of it

vue.directive('loaddata', function(value) {     var startingdata = {             labels: [1, 2, 3, 4, 5, 6, 7],             datasets: [{                 fillcolor: "rgba(151,187,205,0.2)",                 strokecolor: "rgba(151,187,205,1)",                 pointcolor: "rgba(151,187,205,1)",                 pointstrokecolor: "#fff",                 data: [28, 48, 40, 19, 86, 27, 90]             }]         },         latestlabel = startingdata.labels[6];      var livechart = new chart(this.el.getcontext('2d')).bar(startingdata);      setinterval(function() {         livechart.adddata([math.random() * 100], ++latestlabel);         livechart.removedata();     }, 1000); });

this template of component

<canvas width="960" height="300" v-load-data="startingdata"></canvas>

you concerned this issue. graph not render because, pointed out, graph has height , width of 0. had this problem while working tabsets, , solved redrawing graph directive : 

app.directive('graphcanvasrefresh', ['$compile', function($compile) { function link(scope, elem, attrs) {  function refreshdom() {     var markup = '<canvas class="chart chart-pie" id="graph" data="entitygraph.data" labels="entitygraph.labels" legend="true" colours="graphcolours" ></canvas>';     var el = angular.element(markup);     compiled = $compile(el);     elem.html('');     elem.append(el);     compiled(scope); };  // refresh dom when attribute value changed scope.$watch(attrs.graphcanvasrefresh, function(value) {     refreshdom(); });  // clean dom on destroy scope.$on('$destroy', function() {     elem.html(''); }); };    return  {    link: link  }; }]);

hope can you


Comments

Post a Comment

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

-
Image
i try , create radar chart using chart.js has various colours each scaleline, or coloured between scalelines. wondering if possible? from: to: i have working graph, though there doesn't seem method change individual scale lines. kind regards leigh you can extend radar chart type this, so chart.types.radar.extend({ name: "radaralt", initialize: function (data) { chart.types.radar.prototype.initialize.apply(this, arguments); var originalscaledraw = this.scale.draw; var ctx = this.chart.ctx; this.scale.draw = function () { var linewidth = this.linewidth; // bypasses line drawing in originalscaledraw this.linewidth = linewidth; originalscaledraw.apply(this, arguments); ctx.linewidth = this.linewidth; var scale = this; // draw chart.helpers.each(scale.ylabels, function (label, index) { // color of ...
Read more

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

-
suddenly have started receiving above error without changes having been made script. host 1and1 (i know...) the script still works fine on different server, , suspicion there must have been server config change has lead this, although hosts plead ignorance. there's no information on above error @ in google can find - have ideas? server running apache if helps. had similar problem. came out of blue. no php code changed. what changed: php upgraded 5.5.25-1 5.5.26. a security risk in php mail() function has been fixed , newlines in additional_headers allowed no more. because newlines mean: starts email message (and surely don't want inject newlines through headers followed evil message). what have worked fine, e.g. having newlines after headers or passing whole message additional_headers , function no more. solution : sanitize headers. no multiple newlines in additional_headers argument. these count "multiple or malformed newlines":...
Read more

android - Go back to previous fragment -

-
btw second fragment. appear once press button in first fragment. in fragment, if press button on phone, go previous fragment. need guys. in advance. public class listalldoctorfragment extends fragment { button close; @nullable @override public view oncreateview(layoutinflater inflater, viewgroup container, bundle savedinstancestate) { view view = inflater.inflate(r.layout.listalldoctor, container,false); close = (button) view.findviewbyid(r.id.button); close.setonclicklistener(new view.onclicklistener() { @override public void onclick(view view) { android.app.fragmentmanager fm = getfragmentmanager(); fragmenttransaction ft = fm.begintransaction(); shit f2 = new shit(); ft.add(r.id.content_frame, f2); ft.addtobackstack(null); ft.commit(); } }); return view; } } assuming want g...
Read more