Need to modify parameters of this HTML chart(Morris)

scripts

#1

I think this is HTML/CSS, if it’s JS related issue, I’d very much appreciate a cat move :slight_smile:

I’m trying to use a nifty responsive admin template for a project. You can see what I’m using here: https://s-esx.com/fivemin/template/pages/index.html

The part I’m trying to work with is this:

What I would like to do is alter the vertical to go from 0-64 and change the time span to a 24 hour display instead of years.

I looked through the HTML and found the div called <div id="morris-area-chart"></div> so I did a search for morris and found a js file that handled the points in the graph but it does not deal with the limiting parameters or text points of the graph.

I focused on the 30,000 for a search point. I looked through the files for 30,000 but couldn’t find it. I inspected the element and can clearly see it so I know I’m messing something up.

How can I find this to edit it? I see the HTML in the inspector but not on the page and searching for the things I can see (like 30,000) isn’t working for me.

Thanks for your time!


#2

It sounds to me more like you need to adjust the data rather than the chart… based on that chart, the data has been grouped into… i’m going to say quarterly sums.
If the chart’s modeller is intelligent, it should adjust the graph’s scales to fit the data. If that scaling isn’t what you want, we can come back to that, but lets at least get it to the point that it’s dealing with the data you want (last 24 hours, with data points… every hour?) first.


#3

Thanks for your help! I took your advice and modified the js graph data to see how it would handle it and there were some unexpected and funny results: I placed data for the 24 hours:

    Morris.Area({
        element: 'morris-area-chart',
        data: [{
            period: '1 AM',
            online: 30
        }, {
            period: '2 AM',
            online: 18
        }, {
            period: '3 AM',
            online: 11
        }, {
            period: '4 AM',
            online: 9
        }, {
            period: '5 AM',
            online: 5
        }, {
            period: '6 AM',
            online: 2
        }, {
            period: '7 AM',
            online: 4
        }, {
            period: '8 AM',
            online: 1
        }, {
            period: '9 AM',
            online: 1
        }, {
            period: '10 AM',
            online: 4
        }, {
            period: '11 AM',
            online: 6
        }, {
            period: '12 PM',
            online: 11
        }, {
            period: '1 PM',
            online: 16
        }, {
            period: '2 PM',
            online: 14
        }, {
            period: '3 PM',
            online: 21
        }, {
            period: '4 PM',
            online: 26
        }, {
            period: '5 PM',
            online: 19
        }, {
            period: '6 PM',
            online: 25
        }, {
            period: '7 PM',
            online: 32
        }, {
            period: '8 PM',
            online: 32
        }, {
            period: '9 PM',
            online: 32
        }, {
            period: '10 PM',
            online: 32
        }, {
            period: '11 PM',
            online: 32
        }, {
            period: '12 AM',
            online: 32
        }],
        xkey: 'period',
        ykeys: ['online'],
        labels: ['Online'],
        pointSize: 2,
        hideHover: 'auto',
        resize: true
    });

And it sorted it by 1am, 1pm, 2am, 2pm, etc. and corrupted the sort display on the bottom line. On the plus side, the vertical scope of the graph seems to adjust smartly so I only need to fix the horizontal portion of this graph to respect my sorting and display the label that I set correctly instead of trying to convert it to a year display.

I’m not sure how to do these two things, however. Any help on this would be greatly appreciated.

Page with new graph data can be found here: https://s-esx.com/fivemin/template/pages/index.html


#4

So a quick look at the documentation tells us everything we need to know.

xkey (in this case, ‘period’) is expecting a datetime format, either in the form of an object or string. So convert your period keys to the format expected (either pipe it through a DateTime object, or change the string to the appropriate format (2019-01-16 01:00 … 2019-01-16 23:00, 2019-01-17 00:00 etc).

You may also want to look at the ‘xLabels’ key in the documentation.


#5

My wife says I never read the directions. She’s apparently right.

All issues solved thanks to your guidance, thanks so much for your help!