2

i am using backbonejs framework for front-end and using chartjs for charts, so to keep it simple :

  1. i have a view that renders tabs perfectly and in every tab there is a chart in it

  2. first time chart loads perfectly and every thing went great

  3. when i click on the some tab again it re-renders all it content including the chart from scratch

problem : "when switching back to tabs chart does not show"

my function is like : 

createChart: function(collection){
var that = this;

/* this is for the collection that i coming from an API and i am just    spliting it into two arrays */ 
var data1 = [],
data2 = [];
collection.each(function(model){
data1.push(model.get('count'));
data2.push(model.get('title'));
}) 



// chartjs code
var data = {
labels: data2,
datasets: [
{
label: "My Second dataset",
fillColor: "#007B9D",
strokeColor: "#00BFF3",
pointColor: "#00BFF3",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: data1
}
]};

//"this" is the reference to above declared variable 
this.ctx = document.getElementById("user-activity- chart").getContext("2d");  
this.myBarChart = new Chart(that.ctx).Bar(data);

console.log(this.ctx);
console.log(this.myBarChart);

},

i logged first time values into console and it is as following

ctx log : CanvasRenderingContext2D {textBaseline: "alphabetic", textAlign: "start", font: "12px "Helvetica Neue", Helvetica, Arial, sans-serif", lineDashOffset: 0, miterLimit: 10…}

myBarchart log: Chart.Type.extend.ChartType {options: Object, chart: Chart, id: "chart-0", ScaleClass: function, datasets: Array[1]…}

i logged second time(after switching tab) values into console and it is as following

ctx log: CanvasRenderingContext2D {textBaseline: "alphabetic", textAlign: "start", font: "12px "Helvetica Neue", Helvetica, Arial, sans-serif", lineDashOffset: 0, miterLimit: 10…}

myBarChart log: Chart.Type.extend.ChartType {options: Object, chart: Chart, id: "chart-1", ScaleClass: function, datasets: Array[1]…}

i have tried 

myBarchart.destroy()
myBarchart.clear()
myBarchart.update()

all these methods

and also tried doing solution over here : https://gist.github.com/skhisma/5689383

please donot judge me as i am new here in backbonejs thanks in advance

Michael.Lumley
  • 2,345
  • 2
  • 31
  • 53
BilalQureshi
  • 21
  • 2

1 Answers1

0

You have to call your createChart function AFTER the chart canvas is visible i.e. after you switch (and have shown) the tab.

Doing it before that will result in Chartjs reading the canvas width and height as 0, thereby not showing the chart.

potatopeelings
  • 40,709
  • 7
  • 95
  • 119
  • your answer leads me one step more further that how do i wait for my backbonejs view to render completely in DOM so that my chartjs could get canvas for charts . . . i am getting very unusual behavior some times my template renders in DOM perfectly and chart drawn but at the same time when i switch tabs my template waits for the view to execute all its method completely and than show html so in this case my charts do not show can you please help in this regards please, stuck on this from last 3 days, sory for my bad english – BilalQureshi May 27 '15 at 10:10
  • Sorry mate, don't know backbone.js. You might want to ask a question with that tag - or perhaps http://stackoverflow.com/questions/9790361/backbone-js-event-after-view-render-is-finished is what you are looking for (look at the highest voted answer). You English is pretty good, just add full stops between your sentences :-) – potatopeelings May 27 '15 at 10:45