Combine bar and stacked bar charts on a single graph with morris.js

Can a combination of a stacked bar chart and a regular bar chart be created in morris.js? I have successfully generated a stacked bar chart using the following code:

Morris.Bar({
  element: 'bar-example',
  data: [ 
     {x: '2011 Q1', y: 3, z: 2, a: 3}, 
     {x: '2011 Q2', y: 2, z: null, a: 1}, 
     {x: '2011 Q3', y: 0, z: 2, a: 4}, 
     {x: '2011 Q4', y: 2, z: 4, a: 3} 
   ], 
   xkey: 'x', 
   ykeys: ['y', 'z', 'a'], 
   labels: ['Opportunity', 'Not Completed', 'Completed'], 
   stacked: true 

});

However, I am interested in adding an unstacked bar next to the existing stacked column. Is this a feasible feature?

The objective is to illustrate completed tasks along with their respective measurements alongside uncompleted tasks and opportunities stacked together.

Thank you in advance!

javascriptbar-chartmorris.jsstacked-chart

Answer №1

Unfortunately, it is not feasible to merge a bar chart with a stacked bar chart within the same plot.

Answer №2

Believe in yourself To display two Morris charts in separate div elements, you can stack them on top of each other and make the top div's background-color transparent.

<div class="row">
    <div class="col-sm-12">
        <div id="ContractorChart" style="z-index:0;position:fixed;width:80%;height:60vh">

        </div>
        <div id="ContractorChart2" style="z-index:100;position:fixed;background-color:transparent;width:80%;height:60vh"> </div> 
    </div>
</div>

Scrip Code for Morris Chart

    ChartShowLine();
    ChartShowBar();


    function ChartShowLine() {
        $("#FirstElement").empty();

        $(function () {
            new Morris.Line({
                element: 'FirstElement',
                parseTime: false,
                lineWidth: 4,
                trendLine: false,
                pointSize: 2,
                xLabelAngle: 90,
                dataLabels: false,
                resize: true,
                data: [
                     @foreach (var item in Model.ToList())
                {
                @*@:{ Week: "@(Convert.ToInt32(item.ContractorsWeek.Replace('W',' ')))", Plan_Cu: "@(item.Plan_Cu)", Plan_We: "@(item.Plan_We)", Prog_Cu: "@(item.Prog_Cu)", Prog_We: "@(item.Prog_We)" },*@
                     @:{ Week: "@(Convert.ToInt32(item.ContractorsWeek.Replace('W',' ')))", Plan_Cu: "@(Math.Round(item.Plan_Cu.Value,2))", Prog_Cu: "@(Math.Round(item.Prog_Cu.Value,2))" },
                }
                ],
                xkey: ['Week'],
                ykeys: ['Plan_Cu', 'Prog_Cu'],
                labels: [['Prog_Cu'], ['Plan_Cu']]
            });

        });
    }

    function ChartShowBar() {
        $("#SecondElement").empty();

        $(function () {
            new Morris.Bar({
                element: 'SecondElement',
                parseTime: false,
                lineWidth: 4,
                trendLine: false,
                pointSize: 2,
                xLabelAngle: 90,
                axes: false,
                grid:false,

                dataLabels: false,
                resize: true,
                data: [
                     @foreach (var item in Model.ToList())
                {
                @*@:{ Week: "@(Convert.ToInt32(item.ContractorsWeek.Replace('W',' ')))", Plan_Cu: "@(item.Plan_Cu)", Plan_We: "@(item.Plan_We)", Prog_Cu: "@(item.Prog_Cu)", Prog_We: "@(item.Prog_We)" },*@
            @:{ Week: "@(Convert.ToInt32(item.ContractorsWeek.Replace('W',' ')))", Plan_We: "@(Math.Round(item.Plan_We.Value,2))", Prog_We: "@(Math.Round(item.Prog_We.Value,2))" },
            }
        ],
        xkey: ['Week'],
        ykeys: ['Plan_We', 'Prog_We'],
        labels: [['Prog_We'], ['Plan_We']]
    });

    });
    }


</script>

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

Switch button displaying stored data in sessionStorage

I am facing an issue with my small toggle button in AngularJS. I have set up sessionStorage to store a value (true or false), and upon page load, I retrieve this value from sessionStorage to display the toggle button accordingly. Depending on the value sto ...

javascriptangularjs

Validation in ASP.Net to ensure the correct number of days between the arrival and departure dates

One of my project requirements involves checking the validation of the number of days entered between two date selectors (From & To Dates). The constraint is that the difference should not exceed 100 days. I'm considering using ASP.NET validators for ...

javascriptjquery.netasp.netvalidation

How do I adjust brightness and contrast filters on a base64 URL?

When presented with an image in base64 format like this: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABDAAwfqNRk/rjcYX+PxrV/wtWqwJSTlboMgAAAABJRU5ErkJggg== What is the most efficient method to programmatically alter a filter (such as brightness or cont ...

javascripttypescriptimage-processingcss-filters

When attempting to import Quill-blot-formatter with react-quill via next/dynamic, the registration process fails and continues to display a loading message

After creating a function component and configuring quill-blot-formatter with react-quill, I added the blotFormatter to the modules list. Then, I imported this module using next/dynamic on the desired page. The custom function looks like this: import Reac ...

javascriptreactjsnext.jsquillreact-quill

The functionality of TypeScript's instanceof operator may fail when the method argument is not a simple object

There seems to be an issue with a method that is being called from two different places but returns false for both argument types. Despite checking for the correct types, the problem persists and I am unsure why. Although I have read a similar question on ...

javascriptangulartypescript

Encountering issues with browser tabs and Socket.IO

I'm currently working on a real-time chat using Socket.IO, but I've encountered a major issue. The aim is to allow users to log in, select another connected user, and start chatting... var http = require('http'), fs = require(&ap ...

javascriptnode.jssessiontabssocket.io

Utilize Redux Toolkit to efficiently share actions across different slices of state

How can I efficiently share common actions across multiple redux state slices? For instance, let's say I have an updateField action that I want to use in various slices other than just the profile slice. Should I import it from an external file for r ...

javascriptreactjsreduxredux-toolkit

Trigger an event in Javascript/ASP.net following a dropdownlist selection

On a single HTML page, I have incorporated three dropdown lists for country, city, and district with an initial blank selected value, along with a Google map. The aim is to automatically center and zoom in on the map whenever users make selections from the ...

javascriptasp.netgoogle-mapsdom-events

I have been dynamically inserting div elements into the DOM using JavaScript, using the appendChild method to add them and later removing them with removeChild. Strangely, when trying to append a div

There seems to be an issue in the code snippet below. The function create() works fine the first time, but encounters a problem on the second run at the line boxWrapper.appendChild(box);. It appears that the removeChild method is causing some disruption in ...

javascriptappendchildremovechild

Steps to automatically navigate to a specific Div upon page initialization

Can someone help me understand why my code is scrolling to a div and then returning back to the top of the page? $("#Qtags").click(function(){ $('html, body').animate({'scrollTop' : $($(this).attr('href')).offset().top}, ...

javascriptjqueryhtml

Converting an onclick event to onsubmit: Tips for doing it right

Recently, I had to add validation to a file upload form for our Google Drive. After some research, I discovered that using onsubmit instead of onclick was the way to go. However, when I made the switch from onclick to onsubmit, the validation worked but t ...

javascriptonclickonsubmit

Navigating between child nodes in an HTML drop down list with multiple options and hierarchical structure

Hey there! I am looking to create a unique HTML hierarchy drop-down menu. It will have multiple levels or options, with each option having the potential for child nodes. When an option has child nodes, an arrow will appear next to it. Clicking on this ar ...

javascriptjqueryhtmlcss

Using ngTable within an AngularJS application

While working on my angularjs application, I encountered an issue with ngtable during the grunt build process. It seems that the references are missing, resulting in the following error: Uncaught Error: [$injector:modulerr] Failed to instantiate module pa ...

javascriptangularjsnpmbower

The type 'Argument of (props: ITableProps) => JSX.Element' cannot be assigned to the parameter type of... - React High Order Component

One of the tools I have in my arsenal is a loader HOC This is how the HOC looks like: const withLoader = <P extends object>(WrappedComponent: new () => React.Component<P, any>, loading: boolean) => { return class WithLoading extends ...

javascriptreactjstypescriptreact-hoc

Capturing HTML form values and storing them in my JavaScript data object

I have a JS object with preset data as shown below in the variable var json. I am trying to create a simple HTML web form where I want the user inputs to be added as a new data set within my initial JS object. Here is the initial JS object data. The submi ...

javascriptarraysjsonobjectpost

Preserving the most recent choice made in a dropdown menu

Just started with angular and facing an issue saving the select option tag - the language is saved successfully, but the select option always displays English by default even if I select Arabic. The page refreshes and goes back to English. Any assistance o ...

javascripthtmlangulartypescript

What is the best way to integrate a new unique identifier into an existing MongoDB document using NodeJS?

I am looking to add up a field in a document when I input a new entry that has a replicated unique id. This is the code I have so far: MongoClient.connect(process.env.MONGODB_URI || process.env.DB_CONNECTION, { useUnifiedTopology: true, useNewUrlParser ...

javascriptnode.jsmongodbexpress

What is the best way to transfer XML file information using AJAX to a Webmethod?

I'm encountering an issue when attempting to send XML via an ajax call to my Webmethod (C# Webforms): Previously, I successfully tested the ajax call with JSON and was able to send JSON to the Webmethod. Although the response status code returns as ...

javascriptc#ajaxwebformswebmethod

Using JavaScript to Retrieve, Manipulate, and Merge JSON Data from Various Files

My knowledge of JavaScript is limited, but I am interested in uploading multiple JSON files, processing them, converting them to text, combining them, and downloading them into a single JS file. I have successfully achieved this for a single file, but I a ...

javascriptjsonfilereader

problem with the visibility of elements in my HTML CSS project

How do I prevent background images from showing when hovering over squares to reveal visible images using CSS? h1 { text-align: center; } .floating-box { float: left; border: 1px solid black; width: 300px; height: 300px; margin: 0px; } div ...

javascripthtmlcssimagevisibility