Values array for Google Pie Chart

i have this code 

    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {

      var  xyz = [
            ['Language', 'Speakers'],
            ['German', 5.85],
            ['French', 1.66],
          ['Italian', 0.316],
          ['Romansh', 0.0791]
        ];
        var data = google.visualization.arrayToDataTable(xyz);

        var options = {
            legend: 'none',
            pieSliceText: 'label',
            title: 'Swiss Language Use (100 degree rotation)',
            pieStartAngle: 100,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
    }
</script>`

Now i want to include Dynamic Values From Database or From Server side which is not an issue.. the main concern is how to make the "xyz" array dynamic

Thank you in advance

javascriptasp.netmultidimensional-arraygoogle-visualizationpygooglechart

Answer №1

To create a data structure, you can utilize a List<List<string>> and then proceed to serialize it.

List<List<string>> categories = new List<List<string>>()
{
    new List<string>{"Name", "Quantity"},
    new List<string>{"Apple", "10"},
    new List<string>{"Banana", "20"},
    new List<string>{"Orange", "15"}
};
var jsonData = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(categories);

Upon serialization, the output will appear as follows:

[["Name","Quantity"],["Apple","10"],["Banana","20"],["Orange","15"]]

This example serves as the initial point for your project requirement.

Answer №2

Utilize hidden fields to retrieve data from the server side during page load

var PresentValue = parseInt(document.getElementById('<%= Present.ClientID%>').value);
            var absentValue = parseInt(document.getElementById('<%= Absent.ClientID%>').value);
            var NBHValue = parseInt(document.getElementById('<%= NBH.ClientID%>').value);
            var NDSValue = parseInt(document.getElementById('<%= NDS.ClientID%>').value);
            var DelayValue = parseInt(document.getElementById('<%= Delay.ClientID%>').value);
            var TrainingValue = parseInt(document.getElementById('<%= Training.ClientID%>').value);
            var data = google.visualization.arrayToDataTable([
              ['Task', 'Hours per Day'],
              ['Present', PresentValue],
              ['Absent', absentValue],
              ['NBH', NBHValue],
              ['NDS', NDSValue],
              ['Delay', DelayValue],
              ['Training', TrainingValue]
            ]);
<asp:HiddenField ID="Present" runat="server" />
        <asp:HiddenField ID="Absent" runat="server" />
        <asp:HiddenField ID="NBH" runat="server" />
        <asp:HiddenField ID="NDS" runat="server" />
        <asp:HiddenField ID="Delay" runat="server" />
        <asp:HiddenField ID="Training" runat="server" />

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

Is there a way for me to retrieve all the web controls on an ASPX page?

Is there a way to change the font style and sizes of all webcontrols on an aspx page without having to do it individually? I have a CSS file, but it only seems to affect simple text and not the webcontrols. Any suggestions on how to access and modify all ...

asp.netfontsweb-controls

Problem arising from combining draggable and resizable features on the same element

Upon investigating jQuery's draggable and resizable plugins, I recently encountered a problem. To demonstrate the issue, I recreated it in the following code snippet: $('.event').draggable({ grid: [120, 12], cursor: 'move', contai ...

javascriptjqueryjquery-ui

ASP.NET CSS file implementation

While I have experience with PHP and CSS, I am new to ASP.NET. I am currently learning ASP.NET and would like to style an ASP form using CSS. How can I link the CSS file to the page? Specifically, I am trying to create labels and text boxes for a login p ...

cssasp.net

Error: Reference to an undefined class in Jest module

Having trouble importing the Grid class into my test file as I keep encountering errors indicating that it is undefined. Despite confirming that the import path is correct, I continuously receive "TypeError: Cannot read property 'grid' of undefi ...

javascriptreactjsjestjs

An approach to concealing a search bar while scrolling down and revealing it while scrolling up in react-native

Looking for help with implementing a disappearing search bar functionality when scrolling? Check out the following code snippets and examples that demonstrate how to achieve this feature: showSearchBarIOS = () => { return ( <View style={st ...

javascriptreact-nativereact-redux

Search the table for checked boxes and textboxes that are not empty

Could you suggest alternative ways to express the following scenario? I have a table with 3 rows. Each row contains a column with 3 checkboxes and another column with just a text box. I would like it so that when the values are retrieved from the database ...

javascriptjquery

Owner executes the Snowflake Store Procedure

Attempting to create a stored procedure with 'execute as owner' in order to return a list of tables. The SP was successfully created, however calling it results in an error. create database garbage; CREATE OR REPLACE procedure garbage.public.san ...

javascriptstored-proceduressnowflake-cloud-data-platform

The failure to build was due to the absence of the export of ParsedQs from express-serve-static-core

Encountered the error message [@types/express]-Type 'P' is not assignable to type 'ParamsArray'. Resolved it by installing specific packages "@types/express": "^4.17.8", "@types/express-serve-static-core": ...

javascriptnode.jstypescriptexpresstypescript-typings

Preventing Vimeo from continuing to play when the modal is closed by clicking outside of it

I am facing an issue with my Vimeo video embedded in a modal. The video stops playing when I click on the 'close' button, but it continues to play in the background when I click off the modal. I have tried solutions from similar questions without ...

javascriptjquerytwitter-bootstrapvideo

Encountering an error message stating "WebResource.axd?d=xxxxxxx Uncaught TypeError: Cannot assign value to undefined property."

In my project using asp.net, I encountered an error message when clicking on a specific asp.net Button. The error displayed was: WebResource.axd?d=xxxxx Uncaught TypeError: Cannot set property 'value' of undefined at HTMLFormElemen ...

javascriptjqueryasp.net

Display a particular value from a JSON in an alert message

Currently, I am developing an Angular project that involves PHP. I have encoded the PHP output in JSON format and am attempting to extract a specific field (fname) from the JSON data. However, I am facing challenges in achieving this. $http.get('http ...

javascriptphpangularjsjson

What is the best way to populate a dataset within an SSRS subreport?

I'm facing a rather perplexing issue that I can't seem to figure out. Within my code in ReportViewer.aspx.cs, I am populating datasets for my main report using the following: ReportViewer.LocalReport.ReportPath = "~/SummaryReport.rdlc"; ReportD ...

c#asp.netreporting-servicesreportviewer

Is it possible to delete and substitute all content following a specific DIV tag?

Is there a way to utilize JavaScript or jQuery to remove all content following a specific div element and insert new code? The div elements are generated dynamically, and I need to remove everything after the last div that looks similar to: & ...

javascriptjqueryreplace

Converting JavaScript numbers into years and months format

Given an integer, for example 20, I am trying to calculate how many months and years are represented by that number. For 20, the result would be 1 year and 8 months. How can this be achieved using JavaScript? switch (props.term) { case (props.term ...

javascript

Guide to automatically update div with new table rows with the help of Ajax

Can you assist me in updating the div called "table" that contains a table fetching rows from the database? <div id="table"> <h1 id="Requests"> <table></table> </h1> </div> <button id="refresh-btn"&g ...

javascriptjqueryhtmlajax

The webpage displays the element as <span class="icon">&#xe80d;</span> instead of rendering it properly

In my ReactJS project, I have created a component called Menu1item: class Menu1item extends React.Component{ render(){ return ( <div> {this.props.glyph}{this.props.value} </div> ) ...

javascripthtmlreactjs

What is causing the error message `allowDefinition='MachineToApplication'` to appear when I use my GridView?

Can you explain the significance of this error message as it pertains to a GridView? Using a section registered with allowDefinition='MachineToApplication' beyond the application level is considered an error. This issue may arise if a virtual ...

.netasp.net

Switching between different types of materials on a single object

As a newcomer to using three.js, I've been attempting to apply two different materials to a single object and toggle between them using a visibility flag, but so far, I've had no luck. Is there an alternative method to achieving this, or is it ev ...

javascriptthree.js

Troubleshooting a glitch with passing a variable to a PHP script using AJAX

Explanation of the page functionality: When the quiz php page loads, a user can create a score using a function in quiz.js. This score is then stored in a variable score within quiz.js Once the score is generated, the user must click a button to move on ...

javascriptphphtmlajax

Alter the border line's color based on the specific section or div it overlays

I am attempting to utilize jQuery in order to change the color of my border line depending on its position within the divs. I have set the position to absolute and it is positioned on both divs. My goal is to make the line on the top div appear as grey, wh ...

javascripthtmljquerycss