Creating a pie chart with ExtJS using data from a JSON file

After successfully creating a pie chart using ExtJS with JSON values through AJAX calling, I encountered an issue when trying to do the same with JSON values retrieved from a file named myjson.json. Can anyone advise me on how to draw a pie chart by retrieving JSON values from a file (myjson.json) using the code snippet provided below?

Here is the code snippet:


Ext.onReady(function() { 
    var getResources,getResources1;
    var flag=0;
    Ext.Ajax.request({
        dataType : "json",
        url: 'getHSEXmatrix.action',
        params: {
        },
        success: function(response){
            getResources = Ext.decode(response.responseText);
            createChart3(getResources);
        }
    });

var createChart3 = function(resources) {
    var store = Ext.create('Ext.data.JsonStore', {
       fields: ['name', 'data'],
       data: resources
    });
    Ext.create('Ext.chart.Chart', {
        renderTo: 'myExample3',
        width: 500,
        height: 300,
        animate: true,
        store: store,
        axes: [{
            type: 'Numeric',
            position: 'bottom',
            fields: ['data'],
            label: {
                renderer: Ext.util.Format.numberRenderer('0,0')
            },
            title: 'No of actions',
            grid: true,
            minimum: 0
        }, {
            type: 'Category',
            position: 'left',
            fields: ['name'],
            title: 'Exclation Matrix'
        }],
        series: [{
            type: 'bar',
            axis: 'bottom',
            highlight: true,
            tips: {
                trackMouse: true,
                width: 140,
                height: 28,
                renderer: function (storeItem, item) {
                    this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
                }
            },
           label: {
                display: 'insideEnd',
                field: 'data',
                renderer: Ext.util.Format.numberRenderer('0'),
                orientation: 'horizontal',
                color: '#333',
                'text-anchor': 'middle'
            },
            xField: 'name',
            yField: 'data'
        }]
    });
}
});

Answer №1

Check out this helpful resource here

  1. Ensure to run the sample on a web server as loading JSON files from the file system can sometimes lead to issues.
  2. Structure the JSON data in the following format

    {
        "data": [
            {
                "School": "Dukes",
                "wins": "3"
            },
            {
                "School": "Emmaus",
                "wins": "10"
            },
            {
                "School": "Maryland",
                "wins": "5"
            },
            {
                "School": "Virginia",
                "wins": "2"
            }
        ]
    }
    
  3. Utilize the provided data store code snippet

    window.store1 = new Ext.data.Store({
        model: 'Details',
        proxy: {
            type: 'ajax',
            url: 'GetDataset.json',
            reader: {
                root: 'data',
                type: 'json'
            }
        },
        autoLoad: true
    });
    

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

Adding an await tag to dispatch causes issues with performing a react state update on an unmounted component

I recently added an await tag to a redux dispatch and now I am encountering the following error message: index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your applica ...

Using Jquery AJAX to Submit an HTML Form

Trying to use AJAX to submit an HTML form using this specific example. The code for the HTML form: <form id="formoid" action="studentFormInsert.php" title="" method="post"> <div> <label class="title">First Name</label> ...

The Google chart fails to render on the screen

I have a scenario where I need to fetch some data using an ajax call and then display a chart upon successful completion of the call. In order to test this functionality, I have set up a default chart with static data for now. However, when I click on the ...

Is it possible for Angular.js to access a server session attribute?

I am in the process of creating an authentication system with angular.js My goal is to implement a session timeout after a period of inactivity and expire the current session if a user logs in from another device. In both scenarios - 1) idle timeout and ...

JQuery failing to display image within set timeframe

In my website, I have implemented a feature that displays data from a database using auto-scrolling. As the user scrolls down the page, an AJAX function is triggered to fetch the next set of records from the database and append them to the existing content ...

The interaction between a parent element and an iframe, combining mouseover/out events with clicking actions

I am brand new to programming and seeking some guidance. I came across a post about mouseover/out combined with click behavior that I found intriguing. However, I am struggling to implement it successfully in my code. Here is the code snippet: Child.htm ...

jQuery form validation did not result in the POST request being sent

My form is located within a Bootstrap modal and has the following structure: <form class="contact" name="contact" id="contact-form"> <label class="modalLabel" for="name">Name</label><br> <input type="text" name="name" cl ...

Angular 8 utilizes JavaScript for its programming language

Looking for a solution in JavaScript - check out: codepen.io/skovtun/pen/VwLvXPB Struggling to find an equivalent for Angular 8+. I want the center block to maintain a fixed width of 1200px, and automatically compress when the left, right, or both sideb ...

The code malfunctions following the maintenance

Recently, I started learning JavaScript and trying to improve the readability of my code by moving away from inline functions. I have a piece of code that iterates through a JSON array containing comments and then appends those comments to the DOM. Strange ...

Utilize an advanced jQuery Ajax wrapper that includes convenient optional parameters

Seeking assistance with a challenging scenario that has me scratching my head! I've created a wrapper to simplify calling webservices/pagemethods using jquery. In the success function of the ajax call, I want to be able to invoke a function with optio ...

The Material-ui Drawer does not function properly when used with an external CSS file

For my project, I'm working on a Sidebar design that is inspired by the Mini Variant drawer demo available at this link. However, the project requirements mandate that all CSS styling should be done in a separate CSS file rather than directly within t ...

Store Instagram API subscription details into a database

My goal is to save pictures with a specific tag from Instagram into a database. I've been successful up until the point of writing to the database. The subscription part is working fine, as I received confirmation from the Instagram API site: {" ...

Convert a web page with embedded images using Base64 strings into a PDF file using JavaScript

My website has numerous images with base 64 string sources. Typically, I am able to download the HTML page as a PDF using a service method that involves sending the HTML page with a JSON object and receiving the PDF in return. However, when there are many ...

Directive containing tracking code script

I'm working on creating a directive to dynamically include tracking code scripts in my main page: <trackingcode trackingcodevalue="{{padCtrl.trackingnumber}}"></trackingcode> This is the directive I have set up: (function () { 'use ...

Adding a Fictitious Pair to a JavaScript Object Literal

When I work with object literals in JavaScript, I often encounter syntax errors when adding a new label / value pair without including the trailing comma. This can be frustrating as it's easy to forget to include the necessary delimiter. .draggable({ ...

Encountering a login issue with the jsonwebtoken code, specifically getting the error message "something went wrong logging in TypeError: Cannot read properties of undefined (reading 'sign')."

I encountered an error in my console saying, "something went wrong logging in TypeError: Cannot read properties of undefined (reading 'sign')." I am seeking assistance in resolving this issue. Below is the code snippet: import { mAdmin } from &q ...

Tips for managing URL parameters in a search box

Could someone assist me in understanding how these codes will work? I am aware that they are not functioning codes. My main issue is figuring out how to pass the URL parameters for name and start date. I would like to create a search button where if you ty ...

Switch between Coordinated Universal Time and a designated time zone using the New Internationalization API

I am experimenting with the new Internationalization API using Chrome Version 31.0.1623.0 canary. My goal is to: Convert Date Time between UTC and a specific time zone (America/New_York as an example). Determine if the conversion takes into account Dayl ...

Dealing with AngularJS memory leaks caused by jQuery

How can I showcase a custom HTML on an AngularJS page using the given service? app.service('automaticFunctions', function ($timeout) { this.init = function initAutomaticFunctions(scope, $elem, attrs) { switch (scope.content.type) { ...

How can I retrieve the results of an SQLite call in HTML5 without passing them to a separate function?

How can I use SQLite in HTML5 to execute a call like the one below, so that the result is returned immediately rather than passed off to another function? try { mydb.transaction( function(transaction) { transaction.executeSql( &apo ...