I need help figuring out how to utilize zingchart alongside ng-repeat in order to display diverse data on various charts. Is there a solution available for

The following is the array data:

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
}]

This is the HTML code to display the data in a chart:

<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 Temperature {{obj.max_temp}}</li>
                <li>2 : Minimum Temperature {{obj.min_temp}}</li>
                <li>3 : Pressure {{obj.pressure}}</li>
                <li>4 : Sea Level {{obj.sea_level}}</li>
            </ul>

        </div>

I want the data displayed in the ul li elements to appear on the chart. What steps should I take to achieve this and what changes are needed in the controller part?

javascriptangularjsangularjs-ng-repeatzingchart

Answer №1

I successfully resolved the issue.

The zc-value requires an array as input in order to function correctly.

To achieve this, you need to convert your array into an array of arrays and use ng-repeat to pass the object of the array to zc-value.

Here is an example of how the array should look like:

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

Additionally, ensure that the HTML code is structured properly:

<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 Temperature {{obj[1]}}</li>
            <li>2 : Minimum Temperature {{obj[2]}}</li>
            <li>3 : Pressure {{obj[3]}}</li>
            <li>4 : Sea Level {{obj[4]}}</li>
        </ul>

    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mongoose not functioning properly with .sort()

For some reason, the .sort() function just doesn't seem to be functioning properly for me. However hard I try, it simply does not sort the data as expected. I am outputting the data using Handlebars {{Book}} router.get("/", (req, res) => { Book ...

javascriptnode.jsmongodbexpressmongoose

What is the process for modifying a Gist on GitHub?

Trying to update my Gist from another website using my gist token has been unsuccessful. Retrieving a gist with GET was successful, but updating it with PATCH is not working. I don't believe authentication is the issue since retrieving the gist displ ...

javascriptjsonajaxxmlhttprequestgist

What is the process of exporting a module that has been imported in ES6?

Here are 3 code snippets: // ./src/index.ts const myApp = { test: 1, ... } export default myApp // ./src/app.ts import myApp from './src/index' export default myApp // ./index.vue import { example } from './src/app.ts' console.l ...

javascriptvue.jsecmascript-6vite

Despite encountering an error in my terminal, my web application is still functioning properly

My code for the page is showing an error, particularly on the home route where I attempted to link another compose page The error message reads as follows: Server started on port 3000 Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after t at new Node ...

javascriptnode.jsexpressweb

Using multiple columns for ordering in bookshelfjs

How can I implement multiple orderBy in BookshelfJs? In the API, there may be various sort options available, such as example.com/users?sort=-name,status, and it needs to be dynamic rather than hard coded. The answer provided in the link below seems suit ...

javascriptnode.jsexpressbookshelf.jsknex.js

React Component that closes when it loses focus

In my React project, I am working on creating a custom select2 style component. Most of the functionality is complete, but I am struggling with figuring out how to hide the result box when the user clicks away. Here is the render method: render() { l ...

javascriptreactjsreact-redux

Accessing a variable outside of the component constructor will result in the variable being

Currently, I am tackling a project that involves React and Electron. However, I have encountered an error that is causing some confusion. The issue revolves around a component with a constructor that receives props in the form of two variables. This constr ...

javascriptreactjsconstructorelectron

Using Javascript to apply unique styling to CKEditor text

Currently, I am working on a self-contained web page and utilizing CKEditor 4.6.2 for input purposes. The issue I am facing at the moment is attempting to apply a CSS class style to text that has been inserted via JavaScript. My CSS is located in the head ...

javascripthtmlcssckeditor

AngularJS directive element not displaying CSS styles properly

I've been grappling with this issue for the past few days and I just can't seem to crack it. Whenever I try adding a class to an AngularJS element directive, the styling appears in the code view of my browser (Chrome), but the styles themselves ...

javascripthtmlangularjsangularjs-directivesass

Looping through a dropdown list to pass its items into an iframe

I need help passing dropdown list items to an iframe source (src) through a loop. The issue I'm facing is that the loop runs so fast that it directly goes to the last index of the dropdown list, causing the iframe to load only the last index item of t ...

javascriptiframe

Display Material checkbox based on a condition

I have integrated Material UI into my React application to dynamically display text and other information by using JSON data. { "included": [{ "name": "someName", "price": "0", "required": true } ...

javascriptreactjsmaterial-ui

Calculating the angle formed by three vectors in three-dimensional space

According to the solution(s) provided in this post Angle between 3 points in 3d space, there is a JavaScipt function that calculates the angles between three vectors in 3D space. The function calculates the angles as if each vector is a vertex on a surface ...

javascriptvector3d

Creating a PDF from dynamic HTML and transferring it to an AWS S3 bucket without the need to download the PDF

We have created a web application using React JS where we attempted to generate a PDF. Instead of downloading or opening the PDF in a new window, our goal is to directly upload it to an AWS S3 bucket. We have researched and tried various samples but have n ...

javascriptreactjspdfamazon-s3npm

Press the div, excluding the button - Vue

I have a basic div that spans 100% of the width, containing a button inside. The issue I'm facing is that when I add a click event to the div, the entire div becomes clickable (including the button within it). What I want is for the whole div to be ...

javascriptcssvue.jsvuejs2vuejs3

Tips for displaying the sum of a grouped field in the balloonText using Amchart

I recently started working with Amcharts and I am seeking advice on what I may be doing incorrectly. Below is the snippet of my JavaScript code: var chartData1 = []; generateChartData(); function generateChartData() { var month = new Array( ...

javascriptgroupingamcharts

Hide jQuery dropdown when mouse moves away

I am working on designing a navigation bar with dropdown functionality. Is there a way to hide the dropdown menu when the mouse pointer leaves both the navbar menu and the dropdown itself? I have tried using hover, mouseenter, and mouseleave but due to my ...

javascriptjqueryhtmlcss

Error: Trying to add an element to an undefined variable (d3 force layout)

I've been racking my brain trying to solve this error I keep encountering while working with a force layout. The problem arose when I switched to reading nodes from a JSON file. When I comment out certain lines, the error disappears. But if I leave th ...

javascriptd3.jsforce-layout

What could be causing my HTML to not display properly after making changes to a text node?

Can a DOM text node be altered in such a way: node.nodeValue = "foo <strong> bar </strong>" so that it displays the HTML correctly? Appreciate any help. ...

javascripthtmldom

How to use jQuery to dynamically add a variable to a request in Laravel 5.2

Is it feasible to append a variable to the Laravel cookie in the client using jQuery? Understandably, the Cookie is linked to the request during GET? Can you include a variable in the $request container in Laravel 5.2 using jQuery before initiating a GET ...

javascriptphpjquerylaravel-5

issue encountered when trying to deploy a React application on GitHub

I successfully created a todolist on localhost. Now, I am facing issues while deploying it on GitHub. When I run '$ npm run deploy' in the command prompt, I encounter errors. To troubleshoot, I have added 'homepage', 'predeploy&ap ...

javascriptreactjsgithubnpmcommand-prompt