ZingChart Bind Data Using MVC Model: Free Guide

ZingChart is a powerful JavaScript charting library that allows developers to create interactive and visually appealing charts for data visualization. Integrating ZingChart with the Model-View-Controller (MVC) architecture provides a structured approach to building dynamic web applications.

In here we discuss how to Bind data to ZingChart “scale-x”: and “scale-y”: from DataBase  First you need to Load data to Model, after that you can load the Chart

Setting Up ZingChart Integration

1. Installation:

First, you’ll need to install the ZingChart library and the React integration package using npm:

npm install zingchart zingchart-react

2. Include the Component:

There are two ways to include the ZingChart component in your React project:

a) Globally:

In your main application file (e.g., App.js), import the ZingChart component:

import ZingChart from 'zingchart-react';

b) Locally (Recommended):

For better organization, import ZingChart within the component where you want to use the chart:

JavaScript

import ZingChart from 'zingchart-react';

Example: Bind Data Using MVC Model

@model List<WorkFlow.Models.CustomModels.KPINodes>

<div>
    <  style="padding: 0px; background-color: #d9d9d9;">
        <div id='divKPIGraph' style="background-color: #d9d9d9; width: 55vw;"></div>
    </div>
</div>


<script>


    $(document).ready(function () {


        var pendingDrilldownConfig = {
            "gui": {
                "contextMenu": {
                    "visible": false
                }
            },
            "type": "hbar",
            "font-family": "Arial",
            "title": {
                "text": "KPI",
                "font-family": "Arial",
                "background-color": "none",
                "font-color": "#A4A4A4",
                "font-size": "18px"
            },
            "labels": [
                {
                    "text": "ACTIVITY",
                    "font-size": "12px",
                    "font-color": "#9d9d9d",
                    "x": "0%",
                    "y": "15%"
                },
                {
                    "text": "(%)",
                    "font-size": "12px",
                    "font-color": "#9d9d9d",
                    "x": "50%",
                    "y": "15%"
                }
            ],
            "plot": {
                "bars-overlap": "100%",
                "borderRadius": 8,
                "hover-state": {
                    "visible": false
                },
                "animation": {
                    "delay": 300,
                    "effect": 3,
                    "speed": "500",
                    "method": "0",
                    "sequence": "3"
                }
            },
            "plotarea": {
                "margin": "60px 20px 20px 275px"
            },
            "scale-x": {


                "values": [
                @foreach (var item in Model)
                {
                    <text>
                         "@item.activityName", 
                    </text>
                }
                ],
                "line-color": "none",
                "tick": {
                    "visible": false
                },
                "guide": {
                    "visible": false
                },
                "item": {
                    "font-size": "14px",
                    "padding-right": "20px",
                    "auto-align": true,
                    "font-color": "#6FA6DF",
                }
            },
            "scale-y": {
                "visible": true,
                "guide": {
                    "visible": true
                }
            },
            "rules": [
                        {
                            "rule": "%i==0",
                            "background-color": "#FA8452"
                        },
                        {
                            "rule": "%i==1",
                            "background-color": "#FCAE48"
                        },
                        {
                            "rule": "%i==2",
                            "background-color": "#FCCC65"
                        },
            ],
            "series": [


               {
                   "values": [
                    @foreach (var item in Model)
                    {
                        <text>
                            @item.taskDuration,
                        </text>
                    }
            ],
                     "bar-width": "32px",
                     "background-color": "#FCAE48",
                     "max-trackers": 0,
                     "value-box": {
                         "placement": "top-out",
                         "text": "%v",
                         "decimals": 0,
                         "font-color": "#A4A4A4",
                         "font-size": "14px",
                         "alpha": 0.6
                     },
                     "tooltip": {
                         "visible": true
                     }
                 }
            ]           
        };


        var rowCount = '@Model.Count()';


        if (rowCount > 0) {


            zingchart.render({
                id: 'divKPIGraph',
                height: '75%',
                width: '95%',
                data: pendingDrilldownConfig             
            });
        }


    });
</script>

Conclusion

Integrating ZingChart with Bind Data Using MVC Model provides a structured approach to building dynamic web applications with interactive data visualizations. By following key implementation steps and best practices, developers can create engaging and efficient applications that effectively communicate data insights to users.