Charting data from various series in a single graph

I am looking to incorporate multiple LineSeries in an ExtJS4 chart. In my setup, I have a store structured as follows:

Ext.define('DayStatistics', {
    extend:'Ext.data.ArrayStore',
    fields:[ 'date', 'count_impressions', 'count_clicks', 'count_conversions' ]
});

My goal is to draw three lines ('count_impressions', 'count_clicks', 'count_conversions') for each entry selected in the grid view. This means that every grid entry should correspond to multiple entries in the store.

Currently, I have a function that triggers on selectionchange:

loadChart: function (Model, records) {
    // Code for removing previous chart data
    // Code for adding new series to the chart based on selected records
}

While this function allows me to graph different entries from the grid view, it does not provide the functionality of displaying "multiple stores." How can I implement this?

One idea I am considering involves "linearizing" the store by restructuring it like { date : 'impressions_1', 'impressions_2', ... }. However, this solution would simply transfer the complexity from charting to the store structure.

Answer №1

The initial section of the inquiry is clear, however, this particular passage disrupts the flow:

While I understand how to change the entry displayed in grid view into a graph, that's not what I'm aiming for. How can I display data for "multiple stores"?

I presume you are referring to displaying data for multiple series.

You can achieve this quite easily by utilizing the selectionchange handler mentioned in your question:

loadChart: function (selModel, records) {

    var chart = Ext.getCmp('advertiserstatisticlist.advertiserChart');

    chart.series.clear();

    for (var record in records) {
        chart.series.add({
            type:'line',
            xField:'date',
            yField: record.get(/*[whatever you named the "series name" field in the grid store]*/)
        });
    }
    chart.redraw();
}

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

The orderBy function is not functioning properly when used in conjunction with ng

I attempted to replicate the functionality demonstrated here, which involves organizing an array of objects in the view using the filter orderBy. While my code is functioning properly, when I apply the orderBy filter, nothing appears in the view. You can ...

TypeScript's type inference feature functions well in scenario one but encounters an error in a different situation

I recently tried out TypeScript's type inference feature, where we don't specify variable types like number, string, or boolean and let TypeScript figure it out during initialization or assignment. However, I encountered some confusion in its be ...

Is there a more concise way to write this code in JS, CSS, or HTML programming?

Seeking advice on JS / CSS / HTML programming! I may not be the best at articulating my question, so I apologize for any confusion. Let me clarify my intention behind this specific code section and explore potential solutions. The goal is to allow users ...

Tips for interpreting a JSON object that has been returned

I'm currently working on creating a notification system. The process involves running an AJAX call that executes a PHP script to select all 'message' items where 'new=1'. The PHP array is then returned to the JavaScript function vi ...

Tips for integrating Contact List information into PhoneGap ListView

I'm currently working on a javascript function that reads the device's ContactList and adds them into a javascript array. On my HTML page, I have implemented a listview. However, I am struggling to dynamically add the data from the array into the ...

JavaScript code that activates several hovering elements

I am a beginner in the world of JavaScript and I'm attempting to create a simple function that will activate multiple div hover effects. I have tried various approaches so far, but I believe this code is closer to the solution. Any assistance from som ...

Jesting around with mocking console.error leads to test failures

The Issue: Currently, I am working on testing React components using Jest and Enzyme. In order to check for properties in development, I have incorporated the prop-types module. The prop-types module relies on console.error to alert when mandatory props a ...

Retrieving error message in ASP.NET Ajax upon failure

Using MVC2, I am attempting to show a user-friendly error message. Here is my approach: public ActionResult Foo() { Response.StatusCode = 403; return new ContentResult() { Content="friendly error" } } However, I am struggling to figure out how to ac ...

Array Scope Lost During Click Event Loop

This Question May Have Been Asked Before: A Practical Example of Javascript Closure inside Loops I am faced with an issue involving an array of 4 objects, each containing a .t property which is a jQuery element. My goal is to assign an event to each t ...

Getting a vnode from a DOM element in Vue 3.0: A Step-by-Step Guide

My question pertains to obtaining a vnode through accessing the DOM using document.getElementById(id). How can I accomplish this? ...

Integrating a sleek Bootstrap 5 search bar drop-down functionality

As a newcomer, I could use some assistance with creating a dropdown menu that includes a search bar. Specifically, I want users to be able to select items from a list of foods or search for them. Unfortunately, I haven't been able to find a bootstrap ...

Tips for removing files from an <input type='file' /> element with jQuery or JavaScript

I have multiple <input type='file' /> fields in my file without any HTML form. I need to clear the attached files from a specific <input type='file' />, not all of them. Using $('input').val(""); clears all the < ...

Exploring the implementation of constructors and classes in JavaScript

I have a task to create a class named ShoppingCart with specific instructions: The class should have a constructor that initializes the total attribute to zero and creates an empty dictionary attribute called items. There should be a method named add_ite ...

What is the purpose of re-checking the user in the passport.deserializeUser function?

After reading multiple articles on how to utilize passport.js, I'm left wondering why user verification is repeated within the passport.deserializeUser function. The code snippet looks like this: passport.deserializeUser((id, done) => { console. ...

Setting up the perfect environment with Vue.js, Foundation, and Webpack integration

I've been working on integrating the foundation.css file into my Vue webpack application. To achieve this, I first installed foundation using: - npm install foundation-sites. Then, I proceeded to install the extract text plugin with the following co ...

Issue with Jquery - Variable not getting updated on resize event, causing multiple saves

After creating this jQuery script to enable/disable a fixed position div based on user scrolling behavior, I encountered an issue where the functionality breaks upon window resizing. Despite my attempts to update the variables correctly after resizing, the ...

"Overabundance of recursion" error encountered upon submission via jQuery

I'm encountering an issue with my custom submit function that includes validation. Every time I click on Submit, it displays a "Too much recursion" error. $('#searchform').on('submit', function(e){ var validateError = ' ...

"Can you explain the process by which React grabs the props using the code `const props = this.props

I recently came across an interesting article authored by Dan. The example provided in the article caught my attention: class ProfilePage extends React.Component { showMessage = (user) => { alert('Followed ' + user); }; handleClick ...

Navigating the DOM to locate a particular element: Tips and techniques

I'm struggling to recall how to access the data attribute on an anchor tag when clicking a button that's not inside the tags container. Can someone help me understand how I can achieve this? For example, if I click on .js-watchlist-add, I want to ...

What could be the reason behind the child component updating without triggering a re-render in Reactjs?

I am encountering an issue with my main component and child chart component. Even though the main component updates the state of the child chart component upon connecting to a websocket, the chart does not redraw as expected. Interestingly, when I click on ...