Passing Data as JavaScript 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>

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>

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>

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>

Summary

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