How to use zingchart with ng-repeat so i can show different data on different charts. Is there any way

Question

The array is

array = [{
    humidity: 100
    , max_temp: 289.48
    , min_temp: 288.597
    , pressure: 1005.27
    , sea_level: 1030.68
}
, {
    humidity: 84
    , max_temp: 300.73
    , min_temp: 298.697
    , pressure: 1026.02
    , sea_level: 1026.67
}]

Code in HTML is

<div class="chart" ng-repeat="obj in array">
            <div id="resizable">
                <div zingchart zc-values="myValues" zc-json="myJson" zc-width="100%" zc-height="100%"></div>
            </div>
            <ul class="chartinfo">
                <li>0 : Humidity {{obj.humidity}}</li>
                <li>1 : Maximum Temprature {{obj.max_temp}}</li>
                <li>2 : Minimum Temprature {{obj.min_temp}}</li>
                <li>3 : Pressure {{obj.pressure}}</li>
                <li>4 : Sea Level {{obj.sea_level}}</li>
            </ul>

        </div>

The data in the ul li should be display on the chart. what should i do to do it. what to do on controller part

Answer 1

I found the solution.

The zc-value take array in it so if an array is passed to it. then it work correctly.

So for this convert your array in the array of arrays and pass it to ng-repeat and pass object of array to zc-value.

The array should be :

array = [[100, 289.48, 288.597, 1005.27, 1030.68],[84, 300.73, 298.697, 1026.02, 1026.67]];

And the code in html should be

<div class="chart" ng-repeat="obj in array">
        <div id="resizable">
            <div zingchart zc-values="obj" zc-json="myJson" zc-width="100%" zc-height="100%"></div>
        </div>
        <ul class="chartinfo">
            <li>0 : Humidity {{obj[0]}}</li>
            <li>1 : Maximum Temprature {{obj[1]}}</li>
            <li>2 : Minimum Temprature {{obj[2]}}</li>
            <li>3 : Pressure {{obj[3]}}</li>
            <li>4 : Sea Level {{obj[4]}}</li>
        </ul>

    </div>