The values on the x-axis do not appear to be showing up in Fusion Charts when viewing a heat map

I've incorporated the angular-fusion charts directive into my application and successfully created a heat map chart following an example. However, I'm encountering an issue where the values of the x-axis are not displaying in my application. I'm struggling to identify what is causing this problem.

var salesHMChart = new FusionCharts({
        type: 'heatmap',
        renderAt: 'chart-container',
        width: '550',
        height: '470',
        dataFormat: 'json',
        dataSource:  {
            "chart": {
                "caption": "Downtime Reasons",
                "bgColor": "ffffff",
                "outCnvBaseFontSize": "10",
                "outCnvBaseFontColor": "000000",
                "canvasBgColor": "ffffff",
                "toolTipColor": "ffffff",
                "showXaxisLabels": "1",
                "toolTipBorderThickness": "0",
                "toolTipBgColor": "#000000",
                "toolTipBgAlpha": "80",
                "toolTipBorderRadius": "2",
                "toolTipPadding": "5",
                "hdivLineColor": "e8700e",
                "vdivLineColor": "e8700e",
                "showborder": "0",
                "showPlotBorder": "1",
                "plotBorderColor": "e8700e",
                "canvasBorderColor": "e8700e"
            },
            "columns": {
                "column": [
                    {
                        "id": "1123741",
                        "label": "order 1123741"
                    },
                    {
                        "id": "858546",
                        "label": "order 858546"
                    }
                ]
            },
            "dataset": [
                {
                    "data": [
                        {
                            "rowid": "Limpieza Input",
                            "columnid": "1123741",
                            "value": "1",
                            "tllabel": "Limpieza Input",
                            "trlabel": "Order #1123741"
                        },
                        {
                            "rowid": "Marcha Input",
                            "columnid": "858546",
                            "value": "27",
                            "tllabel": "Marcha Input",
                            "trlabel": "Order #858546"
                        },
                        {
                            "rowid": "Averia KKE Input",
                            "columnid": "858546",
                            "value": "2",
                            "tllabel": "Averia KKE Input",
                            "trlabel": "Order #858546"
                        },
                        {
                            "rowid": "Documentacion Input",
                            "columnid": "858546",
                            "value": "1",
                            "tllabel": "Documentacion Input",
                            "trlabel": "Order #858546"
                        },
                        {
                            "rowid": "Cambio (Set-Up) Input",
                            "columnid": "858546",
                            "value": "7",
                            "tllabel": "Cambio (Set-Up) Input",
                            "trlabel": "Order #858546"
                        },
                        {
                            "rowid": "Limpieza Input",
                            "columnid": "858546",
                            "value": "5",
                            "tllabel": "Limpieza Input",
                            "trlabel": "Order #858546"
                        },
                        {
                            "rowid": "Mantenimiento planificado Input",
                            "columnid": "858546",
                            "value": "1",
                            "tllabel": "Mantenimiento planificado Input",
                            "trlabel": "Order #858546"
                        },
                        {
                            "rowid": "No laborable Input",
                            "columnid": "858546",
                            "value": "5",
                            "tllabel": "No laborable Input",
                            "trlabel": "Order #858546"
                        },
                        {
                            "rowid": "Sin trabajo Input",
                            "columnid": "858546",
                            "value": "14",
                            "tllabel": "Sin trabajo Input",
                            "trlabel": "Order #858546"
                        },
                        {
                            "rowid": "ST Maq. parada"," 
                            "columnid": "858546",
                            "value": "1",
                            "tllabel": "ST Maq. parada",
                            "trlabel": "Order #858546"
                        }
                    ]
                }
            ],
            "colorrange": {
                "gradient": "1",
                "minvalue": "1",
                "code": "fce797",
                "startlabel": "Low",
                "endlabel": "High",
                "color": [
                    {
                        "maxvalue": "4",
                        "code": "f74c25",
                        "label": "Medium"
                    },
                    {
                        "code": "c71610",
                        "maxvalue": "7"
                    }
                ]
            }
        }
    })
    .render();
});

Feel free to check out the Demo on Fiddle

I would greatly appreciate any assistance with resolving this issue.

UPDATE

After making changes to the column id from 1123741 to 112741 and removing the entire columns object, the chart started working correctly. As altering the data is not an option, I am eager to understand why it was failing in the previous configuration!! :(

javascriptangularjsfusioncharts

Answer №1

    FusionCharts.ready(function () {
    var downtimeChart = new FusionCharts({
        type: 'heatmap',
        renderAt: 'chart-container',
        width: '550',
        height: '470',
        dataFormat: 'json',
        dataSource:  {
    "chart": {
        "caption": "Production Downtime",
        "bgColor": "ffffff",
        "outCnvBaseFontSize": "10",
        "outCnvBaseFontColor": "000000",
        "canvasBgColor": "ffffff",
        "toolTipColor": "ffffff",
        "showValues": "1",
         "xAxisLabelsOnTop": "1",
        "toolTipBorderThickness": "0",
        "toolTipBgColor": "#000000",
        "toolTipBgAlpha": "80",
        "toolTipBorderRadius": "2",
        "toolTipPadding": "5",
        "hdivLineColor": "e8700e",
        "vdivLineColor": "e8700e",
        "showborder": "0",
        "showPlotBorder": "1",
        "plotBorderColor": "e8700e",
        "canvasBorderColor": "e8700e"
    },
            "rows": {
        "row": [
            {
                "id": "r1",
                "label": "Machine Maintenance"
            },
            {
                "id": "r2",
                "label": "Material Shortage"
            }
            ]
            },      

    "columns": {
        "column": [
            {
                "id": "c1",
                "label": "Line 1"
            },
            {
                "id": "c2",
                "label": "Line 2"
            }
        ]
    },
    "dataset": [
        {
            "data": [
                {
                    "rowid": "r1",
                    "columnid": "c1",
                    "value": "2"

                },
                {
                    "rowid": "r1",
                    "columnid": "c2",
                    "value": "15"

                }

            ]
        }
    ],
    "colorrange": {
        "gradient": "1",
        "minvalue": "1",
        "code": "fce797",
        "startlabel": "Low",
        "endlabel": "High",
        "color": [
            {
                "maxvalue": "4",
                "code": "f74c25",
                "label": "Medium"
            },
            {
                "code": "c71610",
                "maxvalue": "7"
            }
        ]
    }
}
    })
    .render();
});

Answer №2

Here's a Solution That May Assist You

var salesHMChart = new FusionCharts({
                type: 'heatmap',
                renderAt: 'chart-container',
                width: '550',
                height: '470',
                dataFormat: 'json',
                dataSource: {
                    "chart": {
                        "caption": "Downtime Reasons",
                        "bgColor": "ffffff",
                        "outCnvBaseFontSize": "10",
                        "outCnvBaseFontColor": "000000",
                        "canvasBgColor": "ffffff",
                        "toolTipColor": "ffffff",
                        "showXaxisLabels": "1",
                        "toolTipBorderThickness": "0",
                        "toolTipBgColor": "#000000",
                        "toolTipBgAlpha": "80",
                        "toolTipBorderRadius": "2",
                        "toolTipPadding": "5",
                        "hdivLineColor": "e8700e",
                        "vdivLineColor": "e8700e",
                        "showborder": "0",
                        "showPlotBorder": "1",
                        "plotBorderColor": "e8700e",
                        "canvasBorderColor": "e8700e"
                },
                    "columns": {
                        "column": [
                            {
                                "id": "a",
                                "label": "order 1123741"
                            },
                            {
                                "id": "b",
                                "label": "order 858546"
                            }
                        ]
                    },

                    "dataset": [
                        {
                            "data": [
                                {
                                    "rowid": "Limpieza Input",
                                    "columnid": "a",
                                    "value": "1",
                                    "tllabel": "Limpieza Input",
                                    "trlabel": "Order #1123741"
                                },
                                {
                                    "rowid": "Marcha Input",
                                    "columnid": "b",
                                    "value": "27",
                                    "tllabel": "Marcha Input",
                                    "trlabel": "Order #858546"
                                },
                                {
                                    "rowid": "Averia KKE Input",
                                    "columnid": "b",
                                    "value": "2",
                                    "tllabel": "Averia KKE Input",
                                    "trlabel": "Order #858546"
                                },
                                {
                                    "rowid": "Documentacion Input",
                                    "columnid": "b",
                                    "value": "1",
                                    "tllabel": "Documentacion Input",
                                    "trlabel": "Order #858546"
                                },
                                {
                                    "rowid": "Cambio (Set-Up) Input",
                                    "columnid": "b",
                                    "value": "7",
                                    "tllabel": "Cambio (Set-Up) Input",
                                    "trlabel": "Order #858546"
                                },
                                {
                                    "rowid": "Limpieza Input",
                                    "columnid": "b",
                                    "value": "5",
                                    "tllabel": "Limpieza Input",
                                    "trlabel": "Order #858546"
                                },
                                {
                                    "rowid": "Mantenimiento planificado Input",
                                    "columnid": "b",
                                    "value": "1",
                                    "tllabel": "Mantenimiento planificado Input",
                                    "trlabel": "Order #858546"
                                },
                                {
                                    "rowid": "No laborable Input",
                                    "columnid": "b",
                                    "value": "5",
                                    "tllabel": "No laborable Input",
                                    "trlabel": "Order #858546"
                                },
                                {
                                    "rowid": "Sin trabajo Input",
                                    "columnid": "b",
                                    "value": "14",
                                    "tllabel": "Sin trabajo Input",
                                    "trlabel": "Order #858546"
                                },
                                {
                                    "rowid": "ST Maq. parada",
                                    "columnid": "b",
                                    "value": "1",
                                    "tllabel": "ST Maq. parada",
                                    "trlabel": "Order #858546"
                                }
                            ]
                        }
                    ],
                    "colorrange": {
                        "gradient": "1",
                        "minvalue": "1",
                        "code": "fce797",
                        "startlabel": "Low",
                        "endlabel": "High",
                        "color": [
                            {
                                "maxvalue": "4",
                                "code": "f74c25",
                                "label": "Medium"
                            },
                            {
                                "code": "c71610",
                                "maxvalue": "7"
                            }
                        ]
                    }
                }
            })
            salesHMChart.render();
        });

Answer №3

FusionCharts.ready(function () {
    var downtimeChart = new FusionCharts({
        type: 'heatmap',
        renderAt: 'chart-container',
        width: '550',
        height: '470',
        dataFormat: 'json',
        dataSource:  {
            "chart": {
                "caption": "Downtime Reasons",
                "bgColor": "ffffff",
                "outCnvBaseFontSize": "10",
                "outCnvBaseFontColor": "000000",
                "canvasBgColor": "ffffff",
                "toolTipColor": "ffffff",
                "showXaxisLabels": "1",
                "toolTipBorderThickness": "0",
                "toolTipBgColor": "#000000",
                "toolTipBgAlpha": "80",
                "toolTipBorderRadius": "2",
                "toolTipPadding": "5",
                "hdivLineColor": "e8700e",
                "vdivLineColor": "e8700e",
                "showborder": "0",
                "showPlotBorder": "1",
                "plotBorderColor": "e8700e",
                "canvasBorderColor": "e8700e"
            },

            "rows": {
                "row": [
                    {
                        "id": "Limpieza Input",
                        "label": "Limpieza Input"
                    },
                    {
                        "id": "Marcha Input",
                        "label": "Marcha Input"
                    },
                    {
                        "id": "Averia KKE Input",
                        "label": "Averia KKE Input"
                    },
                    {
                        "id": "Documentacion Input",
                        "label": "Documentacion Input"
                    },
                    {
                        "id": "Cambio (Set-Up) Input",
                        "label": "Cambio (Set-Up) Input"
                    },
                    {
                        "id": "Mantenimiento planificado Input",
                        "label": "Mantenimiento planificado Input"
                    },
                    {
                        "id": "No laborable Input",
                        "label": "No laborable Input"
                    },
                    {
                        "id": "Sin trabajo Input",
                        "label": "Sin trabajo Input"
                    },
                    {
                        "id": "ST Maq. parada",
                        "label": "ST Maq. parada"
                    }
                ]
            },            

            "columns": {
                "column": [
                    {
                        "id": "1123741",
                        "label": "order 1123741"
                    },
                    {
                        "id": "858546_0",
                        "label": "order 858546"
                    },
                    {
                        "id": "858546_1",
                        "label": "order 858546"
                    },
                    {
                        "id": "858546_2",
                        "label": "order 858546"
                    },
                    {
                        "id": "858546_3",
                        "label": "order 858546"
                    },
                    {
                        "id": "858546_4",
                        "label": "order 858546"
                    },
                    {
                        "id": "858546_5",
                        "label": "order 858546"
                    },
                    {
                        "id": "858546_6",
                        "label": "order 858546"
                    },
                    {
                        "id": "858546_7",
                        "label": "order 858546"
                    }
                ]
            },
            "dataset": [
                {
                    "data": [
                        {
                            "rowid": "Limpieza Input",
                            "columnid": "1123741",
                            "value": "1",
                            "tllabel": "Limpieza Input",
                            "trlabel": "Order #1123741"
                        },
                        {
                            "rowid": "Marcha Input",
                            "columnid": "858546_0",
                            "value": "27",
                            "tllabel": "Marcha Input",
                            "trlabel": "Order #858546"
                        },
                        {
                            "rowid": "Averia KKE Input",
                            "columnid": "858546_1",
                            "value": "2",
                            "tllabel": "Averia KKE Input",
                            "trlabel": "Order #858546"
                        },
                        {
                            "rowid": "Documentacion Input",
                            "columnid": "858546_2",
                            "value": "1",
                            "tllabel": "Documentacion Input",
                            "trlabel": "Order #858546"
                        },
                        {
                            "rowid": "Cambio (Set-Up) Input",
                            "columnid": "858546_3",
                            "value": "7",
                            "tllabel": "Cambio (Set-Up) Input",
                            "trlabel": "Order #858546"
                        },

                        {
                            "rowid": "Mantenimiento planificado Input",
                            "columnid": "858546_4",
                            "value": "1",
                            "tllabel": "Mantenimiento planificado Input",
                            "trlabel": "Order #858546"
                        },
                        {
                            "rowid": "No laborable Input",
                            "columnid": "858546_5",
                            "value": "5",
                            "tllabel": "No laborable Input",
                            "trlabel": "Order #858546"
                        },
                        {
                            "rowid": "Sin trabajo Input",
                            "columnid": "858546_6",
                            "value": "14",
                            "tllabel": "Sin trabajo Input",
                            "trlabel": "Order #858546"
                        },
                        {
                            "rowid": "ST Maq. parada",
                            "columnid": "858546_7",
                            "value": "1",
                            "tllabel": "ST Maq. parada",
                            "trlabel": "Order #858546"
                        }
                    ]
                }
            ],
            "colorrange": {
                "gradient": "1",
                "minvalue": "1",
                "code": "fce797",
                "startlabel": "Low",
                "endlabel": "High",
                "color": [
                    {
                        "maxvalue": "4",
                        "code": "f74c25",
                        "label": "Medium"
                    },
                    {
                        "code": "c71610",
                        "maxvalue": "7"
                    }
                ]
            }
        }
    })
    .render();
});

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

Jasmine spies falsely report the calling of functions when they have not actually been called

Below is the code snippet I am currently working with: $scope.deleteJob = function(job) { SandboxService.deleteJob(job.id).then(res => { if (res.status == 200) { ngToast.success(); $scope.refreshApps(); } ...

javascriptangularjsjasminekarma-jasmine

How to Preserve Scroll Position when Toggling a Div using jQuery

I've been struggling to find a solution for maintaining the scroll position of my page after a JQUERY toggle event. I've searched extensively but haven't found a fix yet. <script src="Scripts/_hideShowDiv/jquery-1.3.2.min.js" type="text/ ...

javascriptjqueryhtmlasp.netcss

A message appeared in the console warning about Vue using canvas-datagrid

Everything is displaying correctly as I intended. However, there is a warning in the console: > vue.js:2 [Vue warn]: Unknown custom element: <canvas-datagrid> - did > you register the component correctly? For recursive components, make > sur ...

javascriptvue.js

When using the Parse JS SDK with AngularJS UI routing, the login functionality may not properly retain the current user's

Below is the configuration and initialization of my module: angular.module('FXBApp', [ 'ui.bootstrap' ,'ui.router' ,'oc.lazyLoad' ,'parse-angular' ]). config(['$urlRouterProvider','$statePro ...

javascriptangularjsparse-platformangular-ui-routeroclazyload

When encountering a 404 redirect, CSS and JS files may fail to display

I created a unique error message using .htaccess, incorporating CSS and JS in separate folders. Although it functions properly when accessed directly, integrating these resources into the 404 Error message results in only the HTML text being displayed with ...

javascripthtmlcssapache.htaccess

Manipulate properties of objects with React by assigning values from an array

I am working with various objects and values in my code: const [validFilters, setValidFilters] = useState({}); const [endedEvents, setEndedEventsSort] = useState(false); const [joinedEvents, setJoinedEventsSort] = useState(true); const [startDate, setStart ...

javascriptreactjsfor-loopobject

Unleashing the potential of extracting the value of a subsequent iteration while within the

Currently, I am facing a dilemma as I am unable to comprehend the logic required to design this algorithm. The problem at hand involves a sequence of images with arrows placed alternatively between each image. The structure appears as follows: Image -> ...

javascriptjqueryjsonalgorithm

Not every child within a transition group in Vue.js is currently engaged in animation

This is the specific transition group that I have implemented <article class="hotel-row" v-for="hotel in paginatedHotels" :key="hotel.hotelid"> <search-hotel :hotel="hotel"></search-hotel> </article> If I do not assign unique ...

javascriptanimationvue.jsvuejs2vue-component

Implementing autocomplete feature with JQuery by using a handler

I am currently working on developing a search box with autocomplete functionality and utilizing a handler for this purpose. While I have successfully retrieved all the words from the database, I am facing difficulties in displaying them. Here is the jQuer ...

javascriptc#jqueryautocompletehandler

What is the best way to determine the total number of classes that come before a specific element

Currently, this is my approach: <script> function Answered(str) { var script = document.getElementsByClassName('Answered')[str]; if(script!==null) {script.setAttribute("style", "");} } </script> <span class=Answered style=" ...

javascriptjquery

Using Vue: Incorporating and extracting JSON data with JavaScript

I need to import the following JSON from a different component because it includes require and Math. I am having trouble saving it in JSON file format. let test = [ { name:"A", imgSrc: require('@/assets/img/A.png'), ...

javascriptvue.js

Unique Symbols and Characters in JavaScript

My JavaScript code looks like this: confirm("You are selecting to start an Associate who is Pending Red (P RD) status. Is this your intent?") I am encountering a strange issue where I get an alert with special characters, even though my code does not con ...

javascriptspecial-charactersalertconfirm

Unexpected Quote Will Not Appear

My random quote generator is not functioning properly, it should display a different quote on each click of the button. My colleagues are also facing the same issue. It was working fine when implemented in JavaScript, but after converting all the syntax to ...

javascriptjquery

What is the best way to increase the quantity of items in an array while simultaneously reducing the values of one or more specified keys for each object?

I have the following array: const disabledDays = [ { year: selectedDay.year, month: selectedDay.month, day: selectedDay.day -1 } ]; and I intend to pass it as a prop to a component: <DatePicker v ...

javascriptarraysreactjsreact-nativejavascript-objects

Transforming the navigation menu using CSS, HTML, and jQuery

One challenge I am facing involves creating a menu similar to the one on http://edition.cnn.com/. I want the clicked button in the menu to receive focus, while the others lose it. Despite trying various methods, I have not been successful. Can someone off ...

javascriptjqueryhtmlcss

Tips for refreshing a Twitter feed in real-time by utilizing AJAX requests and JavaScript

I recently started learning javascript and I'm struggling with loading a new twitter feed based on user input. Here is the code I have been working on: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /& ...

javascriptjqueryhtmlcssajax

Verify if a specific key is present in associative arrays

Can you please explain the correct way to check for the existence of a key in associative arrays? For instance: var mydata = { key1: '', key2: { subkey1: { subkey1_1: { value1: '' ...

javascriptjqueryundefinedassociative-arrayexists

how to use an object as a key in the groupBy function with underscore.js

My JSON structure is as follows: I am attempting to group by NodeGroup using the underscore library. vm.populatedNodeGroups = _($scope.nodes).groupBy(function (o) { return o.NodeGroup.Name; }); Within vm.populatedNodeGroups, ...

javascriptangularjsunderscore.js

Tips for triggering onclick before changing to a new page?

Currently, I am developing a React application and have encountered the following situation: <a href={link} variant="primary" onClick={this.onClickDoSomething}> here. </a> My goal is for the onClick event to trig ...

javascriptreactjsonclick

Exploring ways to access elements within shadow-root (open) in Angular using SVG.js

I'm currently tackling a project involving Angular Elements. Within this specialized component, my goal is to incorporate SVG.js 3+. However, due to the necessity of utilizing ViewEncapsulation.ShadowDom in my component, I am encountering challenges w ...

javascriptangulartypescriptshadow-domsvg.js