Search code examples
jqueryzingchart

What is "myid" in ZingChart docs?


I must be missing something simple, but...: In the ZingChart docs for the API methods, the functions all reference myid, but I can't figure out what is a ZingChart's id. For example, method getseriesvalues:

zingchart.exec('myid', 'getseriesvalues', {});

What does 'myid' refer to in this example code?

Here is my simple ZingChart example code:

 $(function(){
    var myChart = {
        type : "line",
        title : {text: "Hello ZingChart World!"},
        series : [
            {values:[5, 10, 15, 5, 10, 5]},
            {values:[2, 4, 6, 8, 10, 12]}
        ]
    };

    zingchart.render({
        id : "myChartDiv",
        height : 450,
        width : 600,
        data : myChart
    }); 
})

Now let's say I would want to invoke the getseriesvalues method on this chart - what would myid be? myChart? myChartDiv? Neither of them work...


Solution

  • The id property references the <div> element's id property in which the chart is injected. See the ZingChart "Getting Started" guide.

    Example:

    <html>
        <body>
            <script>
                var myChart = {
                    type   : "line",
                    title  : {text: "Hello ZingChart World!"},
                    series : [
                        {values:[5, 10, 15, 5, 10, 5]},
                        {values:[2, 4, 6, 8, 10, 12]}
                    ]
                };
    
                window.onload=function(){
                    zingchart.render({
                        id : "myChartDiv",
                        height : 450,
                        width : 600,
                        data : myChart
                    });
                };
            </script>
    
            <div id="myChartDiv"></div>
        </body>
    </html>
    

    It also used for other ZingChart methods (e.g., to subsequently bind events to your chart). For example, to get the values after initiation for this chart:

    zingchart.exec("myChartDiv", "getseriesvalues", {});
    

    You can think of id as a global variable—always referencing the same chart by name, no matter its place in the code.