Passing Data as JS Objects

Overview

ZingChart is incredibly flexible and accepts many forms of JavaScript objects to create and update your charts.

Full JavaScript Objects

Begin by creating a JavaScript object.


          
<script>
    var dataObj={};
</script>
        

Populate your JS object with your chart configuration.


          
<script>
var dataObj={
    type:"line",
    title:{
        text:"Chart Data Object"
    },
    series:[
        {
            values:[69,68,54,48,70,74,98,70,72,68,49,69]
        }
    ]
};
</script>
        

Standard JavaScript objects and JSON can both be used. Here is the above JS object in flat JSON form:


          
var dataObj={
    "type":"line",
    "title":{
        "text":"Chart Data Object"
    },
    "series":[
        {"values":[69,68,54,48,70,74,98,70,72,68,49,69]
        }
    ]
};
        

Pass the object into your zingchart.render()function call's data option.


          
<script>
var dataObj={
    type:"line",
    title:{
        text:"Chart Data Object"
    },
    series:[
        {
            values:[69,68,54,48,70,74,98,70,72,68,49,69]
        }
    ]
};
window.onload=function(){
    zingchart.render({
        id:"myChart",
        output:"svg",
        height:400,
        width:"100%",
        data:dataObj
    });
};
</script>
        

Demo

Individual Objects

You can create JavaScript objects to hold individual chart objects for use in your chart JSON.


          
<script>
var seriesObj1={
    values:[69,68,54,48,70,74,98,70,72,68,49,69]
};
var seriesObj2={
    values:[51,53,47,60,48,52,75,52,55,47,60,48]
};
window.onload=function(){
    zingchart.render({
        id:"myChart2",
        output:"svg",
        height:400,
        width:"100%",
        data:{
            "type":"line",
            "title":{
                "text":"Series Data Objects"
            },
            "series":[
                seriesObj1,seriesObj2
            ]
        }
    });
};
</script>
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/KDNF33RF

JavaScript arrays can also be used in chart data.


          
<script>
var valueArray=[51,53,47,60,48,52,75,52,55,47,60,48];
window.onload=function(){
    zingchart.render({
        id:"myChart3",
        output:"svg",
        height:400,
        width:"100%",
        data:{
            "type":"line",
            "title":{
                "text":"Series Values Array"
            },
            "series":[
                {
                    "values":valueArray
                }
            ]
        }
    });
};
</script>
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/IVQHKA59

Config Objects

Use a JavaScript object to hold zingchart.render() options.


          
<script>
var renderObj={
    id:"myChart4",
    output:"svg",
    height:400,
    width:"100%",
    data:{
        "type":"line",
        "title":{
            "text":"Render Object"
        },
        "series":[
        {
            "values":[51,53,47,60,48,52,75,52,55,47,60,48]
        }
        ]
    }
};
window.onload=function(){
    zingchart.render(renderObj);
};
</script>
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/CRMAOF4F

Modify object properties using dot-notation or bracket notation.


          
<script>
var renderObj={
    id:"myChart4",
    output:"svg",
    height:400,
    width:"100%",
    data:{
        "type":"line",
        "title":{
            "text":"Render Object"
        },
        "series":[
        {
            "values":[51,53,47,60,48,52,75,52,55,47,60,48]
        }
        ]
    }
};
window.onload=function(){
    zingchart.render(renderObj);
    renderObj.id="myChart5";
    renderObj["data"]={
        "type":"line",
        "title":{
            "text":"Changing Properties w/ Dot-Notation and Bracket Notation"
        },
        "series":[
        {
            "values":[51,53,47,60,48,52,75,52,55,47,60,48]
        }
        ]
    };
    zingchart.render(renderObj);
};
</script>
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/3XZIY0PE

Summary

JavaScript objects allow for a ton of flexibility and can make it simple to manipulate chart data using JavaScript or our extensive API.