Home forums Using CanvasJS Chart not displaying in specified container

This topic contains 6 replies, has 2 voices, and was last updated by  ashkhanna 2 years, 10 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #5566

    ashkhanna
    Participant

    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!

    #5568

    Sunil Urs
    Keymaster

    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

    #5609

    ashkhanna
    Participant

    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!!!

    #5610

    ashkhanna
    Participant

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

    Thanks!

    #5628

    ashkhanna
    Participant

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

    Thanks

    #5632

    Sunil Urs
    Keymaster

    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

    #5634

    ashkhanna
    Participant

    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!!!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.