asked on

C3.JS graph NOT showing text when NO data available

I am using C3.js to show a graph whose data is coming from a URL that is returning JSON formatted data.
Everything works like a charm except when I want to show a simple "No Data Available" when data is empty.

Reading C3 documentation the solution seems to be pretty easy and has to be added within the data array:

empty: {
    label: {
        text: "No Data Available"
    }
},

Open in new window

This is not working "completely" since the text informing of no data available is showing for a fraction of a second and disappear immediately.

I was not able to find any clue showing me a behavior like this.

Just for the records I am using last versions:
- C3.js 0.7.1
- D3.js 5.9.2
and of course the related C3.css

Any suggestion?

Norie

Mark

Where are you putting 'empty'?

Are you adding it to the JSON data?

Mike Paradis

ASKER

As i said in the question I am putting it in the data section but to clarify to you here's the code:

var markChart = c3.generate({
    padding: {
        top: 10,
        left: 60,
        right: 60,
    },
    bindto: '#markGraph',
    data: {
        url: markChartUrl,
        mimeType: 'json',
        x: 'time',
        type: 'bar',
        keys: {
            value: ['time', 'smallEventsLog', 'mediumEventsLog', 'largeEventsLog']
        },
        colors: {
            'smallEventsLog':'lightblue',
            'mediumEventsLog':'orange',
            'largeEventsLog':'red'
        },
        groups: [
            ['smallEventsLog', 'mediumEventsLog', 'largeEventsLog']
        ],
        names: {
            smallEventsLog: 'In seconds',
            mediumEventsLog: 'In minutes',
            largeEventsLog: 'In hours',
        },
        empty: {
            label: {
                text: "No Data Available"
            }
        },
    },
    legend: {
        position: 'inset',
        inset: {
            anchor: 'top-right',
            x: 20,
            y: -20,
            step: 1
        }
    },
    axis: {
        x: {
            type: 'category',
            tick: {
                format: '',
                fit: false,
                multiline: false,
                count: 2,
            },
        },
        y: {
            show: false,
        }
    },
    zoom: {
        enabled: false,
    },
});

Open in new window

Mike Paradis

ASKER

How do I ask for more attention for this question? The bell only goes to chat and chat doesn't work.

lenamtl

Hi,

empty: { 
label: { text: "No Data" }
 }

Open in new window

should work fine

Check if you have any error in console using Chrome right click Inspect

Mike Paradis

ASKER

I appreciate the help but you do not seem to understand the question. Thank you.

Mike Paradis

ASKER

This site is not even responding to emails about problems. I explained that trying to get more attention is not working and that the only option being given is chat. I don't want to get into a chat just to get more attention for a question and your chat is not working anyhow, it just hangs there, no one ever responds.

Norie

Mark

The behaviour might be caused by something else on the page/in the code.

It might even be connected to the data - what is actually being returned when there's no data?

Can you post the URL you are pulling the data from?

Mike Paradis

ASKER

https://www.experts-exchange.com/questions/29149513/C3-JS-graph-NOT-showing-text-when-NO-data-available.html?anchorAnswerId=42890411#a42890411
[]

lenamtl

Hi,

What causing the message to disappear this probably another JavaScript event like a page reload, hide a div ...
You may want to set up a JSfiddle https://jsfiddle.net/
so we can see more of your code.

The code you have posted is good so if the text disappear this is because another JavaScript event that probably hide it

Mike Paradis

ASKER

That is what I was looking for first to be sure there was nothing else but couldn't find any other JS running at the same time.
That is why i decided to update C3/D3 to the latest version but with poor results: nothing changed

lenamtl

Does this code interact with server side code like PHP if so check the end of the code the problem may come from there.

I usually end my PHP request with some Javascript like : hide a message after a delay / reload page / remove a div etc.

Also check the css of the no data div this may need some adjustment, but as you see the message at least a few seconds it's more a Javascript issue.

Mike Paradis

ASKER

I double checked both the chance there were an overlapping number of JS called in the same PHP page and also if any other JS was doing something strange.

So far I havent found one javascript line that could in any case override the c3.js and for some reason act like a second update to the same page.

But I decided to refactor completely this page to have only c3.js and d3.js as it is suggested by the official site.

Will come back as soon as I have tested the above.

lenamtl

Don't forget to check if you have any errors in console using Chrome right click, Inspect

Keep this console open during your test then if an error occur this is more easy to debug.

Does the code interact with PHP? if so check your PHP functions result and how the code end.

Mike Paradis

ASKER

Console is always on when I debug, thx for the advice
Yes the JS is part of a PHP app

lenamtl

ok then in your PHP function check if you have any JS like this at the end (if so the problem may came from this part)

echo '<script>  some script here </script>';

Open in new window

Mike Paradis

ASKER

I appreciate the help but nothing being offered here is working so far. Not sure if I should close this question.

lenamtl

We don't have a live link or jsfiddle so we can only guess....

You said that you will come back once you refactored the code?
Have you done that part, what was the result....

Mike Paradis

ASKER

Exactly the same result

Norie

Mark

Can you get the C3.JS graph part to work on its own?

Mike Paradis

ASKER

Sorry, have not had the chance to get back to this yet. Will update when I can.