Home forums Using CanvasJS chart container as a variable

This topic contains 1 reply, has 1 voice, and was last updated by  et62962003 11 months, 1 week ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #9772

    et62962003
    Member

    Hi,

    I am trying to integrate canvasjs charts into Oracle APEX plugins. I would like to dynamically pass the container ID that is system-generated by Oracle APEX to the CavasJS.Chart. This code will not become re-usable if I need to hard-code the chart container ID in the render function. Is there any workaround for this? Thanks.

    
    // Create and draw the chart
    function renderChart() {
    var chart = new CanvasJS.Chart( pRegionId, {
    theme: “theme2″, // Options: “theme1″,”theme2″, “theme3″
    exportEnabled: true,
    animationEnabled: true,
    title:{
    text: “Simple Column Chart”
    },
    subtitles:[
    { text: “This is a Subtitle”
    //Uncomment properties below to see how they behave
    //fontColor: “red”,
    //fontSize: 30
    }
    ],
    axisX:{
    title:”Axis X title”,
    },
    axisY:{
    title:”Axis Y Title”,
    },
    legend: {
    horizontalAlign: “left”, // “center” , “right”
    verticalAlign: “center”, // “top” , “bottom”
    fontSize: 15
    },
    data: [
    {
    type: “column”, //change type to bar, line, area, pie, etc
    indexLabel: “{y}”,
    indexLabelPlacement: “outside”,
    indexLabelOrientation: “horizontal”,
    dataPoints: [
    { x: 10, y: 71 },
    { x: 20, y: 55 },
    { x: 30, y: 50 },
    { x: 40, y: 65 },
    { x: 50, y: 95 },
    { x: 60, y: 68 },
    { x: 70, y: 28 },
    { x: 80, y: 34 },
    { x: 90, y: 14 }
    ]
    }
    ]
    });
    
    chart.render();
    }
    
    #9773

    et62962003
    Member

    Please ignore the question above. I have resolved the problem. The issue was related to the duplicated container ID generated in the region template. After I set it to use no template, it worked fine although I needed to define a height for the chart. Since the container ID can be dynamic now, I can reuse the code for multiple charts in a page.

    Thanks.

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

You must be logged in to reply to this topic.