Chart not displaying in specified container

[ashkhanna]

I’m creating canvas js step line chart in my app when ever a value from drop down is chosen.

I have hidden div specified in my app. I use ExtJS to layout my UI and I’m trying to use canvas js step chart to be inside a container. I have the container specified in ExtJS and it is layed out in the bottom of the page, my chart is displayed but not in the container I had specified, rather on the top of the page.

This is my example of canvas js code
[code]
var chart= new CanvasJS.Chart(“profileChart”, {

title:{
text: “Multi-Series StepLine Chart”
},
axisY:{
includeZero: false,
labelFontColor: “#369EAD” ,
lineColor: “#369EAD” ,
title: ‘Test 1’,
lineThickness: 3
},
toolTip: {
shared: true
},

axisY2:{
includeZero: false,
labelFontColor: “#C24642”,
lineColor: “#C24642”,
title: ‘Test 2′,
lineThickness: 3
},
axisX: {
lineThickness: 3,
gridThickness: 0,
gridColor:’#FFFFFF’
},

data: [
{
type: “stepLine”,
lineThickness: 3,
showInLegend: true,
name: ‘Test Data 1’,
dataPoints: [

{ x: new Date(2008,02), y: 15.00 },
{ x: new Date(2008,03), y: 14.50 },
{ x: new Date(2008,04), y: 14.00 },
{ x: new Date(2008,05), y: 14.50 },
{ x: new Date(2008,06), y: 14.75 },
{ x: new Date(2008,07), y: 16.30 },
{ x: new Date(2008,08), y: 15.80 },
{ x: new Date(2008,09), y: 17.50 }

]
},
{
type: “stepLine”,
axisYType: “secondary”,
lineThickness: 3,
showInLegend: true,
name: ‘Test Data 2’,
dataPoints: [

{ x: new Date(2008,02), y: 41.00 },
{ x: new Date(2008,03), y: 42.50 },
{ x: new Date(2008,04), y: 41.00 },
{ x: new Date(2008,05), y: 45.30 },
{ x: new Date(2008,06), y: 47.55 },
{ x: new Date(2008,07), y: 45.00 },
{ x: new Date(2008,08), y: 40.70 },
{ x: new Date(2008,09), y: 37.00 }
]
}
]
});

console.log(“chart obj”);
console.log(chart);

//chart.render();
contEl = “profileChart”;

var mainChartPanel = Ext.getCmp(‘chart-profile-panel’);

var chartPanel = new Ext.Panel({
id: ‘profile-chart’,
contentEl: contEl,
//layout: ‘fit’,
width: 600,
top: 300,
html: chart,
autoScroll: true

});

mainChartPanel.removeAll();

mainChartPanel.add(chartPanel);

mainChartPanel.doLayout();

chart.render();

[/code]

Any idea as to what’s going on and how to place it in the correct container? I really appreciate the help!!!

Thanks!

[Sunil Urs]

Hi,

I can surely help you with that. But without seeing the HTML part of it its difficult to figure out the issue. Can you please create a jsfiddle that reproduces the issue?

—
Sunil

[ashkhanna]

JSFiddle example:
http://jsfiddle.net/ashkhanna/Hb363/

I have created a JSFiddle example for you to look at, the problem I’m having with JSFiddle is chart isn’t showing up at all. But in my UI on my local machine chart is showing on the top of the page instead of inside the container that I want it to be(bottom of the page).

I appreciate the help!!!

[ashkhanna]

Here is the full screen result of JSFiddle:
http://jsfiddle.net/ashkhanna/Hb363/embedded/result/

Thanks!

[ashkhanna]

Sunil, Have you had a chance to look at this issue? Any help would be appreciated on this!!!

Thanks

[Sunil Urs]

ashkhanna,

There are couple of issues there. I’ve just fixed enough to get the basic chart rendered.

1. You were trying to create chart before the container element is created.
2. profileChart element is getting created only for the first time. If I switch value in drop down, there is no profileChart anywhere to be seen.
3. Height was not set for profileChart element or the chart. You should set height for either one of them atleast.
4. Not a good idea to create a totally new chart each time. Instead create chart ones and just hide/unhide tabs.

Here is a JSFiddle.

Hope you can take it forward from here.

—
Sunil Urs

[ashkhanna]

Thanks a lot Sunil, I will take a look at the changes and go from there. I really appreciate your help in this regard.

I have made the code such a way that it will populate the chart only once, this is easily modiifed in the code.
I have to create new chart every time user selects the dropdown box. The dropdown box gets set of data for chart to render that are stored in the DB. I guess I will know how the memory usage is when I create new chart every single time when I select a value from dropdown.

Once again I really appreciate the help!!!