dcsimg
www.webdeveloper.com
Results 1 to 10 of 10

Thread: Trying to add labels to the axes of my bar chart

  1. #1
    Join Date
    Jun 2017
    Posts
    9

    Trying to add labels to the axes of my bar chart

    I have the following barchart:

    http://jsfiddle.net/9fd92y9x/65/

    I'm trying to do the following:

    1) Add labels to the x- and y-axes

    2) Add a dotted grid that start at the x- and y-axes and line up with the tick marks (as illustrated by this image: http://imgur.com/fuGUt8o )

    Any help would be much appreciated!

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,556
    I don't often advocate the use of libraries / frameworks with some exceptions.

    So going to your favourite search engine, search for graphing in javascript and you will find that the wheel has been reinvented several or more times... A list of different types of charting / plotting libraries are available.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,556
    Oh and... Axes are for chopping trees down, Axis is for plotting your graph, same sound different meaning.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  4. #4
    Join Date
    Dec 2012
    Posts
    1,587
    @/.//: The TO is already using a library!

    Hallo madamefeemy, I don't know about the library you are using but some time ago I created a chart by use of Highcharts and it was easy to add labels to the axises:
    Code:
                    Highcharts.chart('chart', {
    
                        chart: {
                            type: 'spline'
                        },
                        title: {
                            text: 'Hg Injection Data'
                        },
    
                        yAxis: {
                            title: { text: 'Percent Pore Volume Hg saturated (%)' },
                            labels: {
                                formatter: function () {
                                    return this.value + ' %';
                                }
                            },
                            min: 0, max: 100,
                            tickInterval: 10
                        },
    
                        xAxis: {
                            title: { text: 'Apparent Pore-Throat Size (Ám)' },
                            type: 'logarithmic',
                            tickInterval: 1,
                            minorTickInterval: 0.1
                        },
    
                        series: [{ name: "CV Hg I", data: datcumu, color: "#0000FF", marker: { symbol: 'circle'} }, { name: "IV Hg I", data: datinc, color: "#FF0000", marker: { symbol: 'circle'}}]
                    });
    The labels are applied by the titles.

    Highchart is free for non commercial use.

    Another common and free charts library is chart.js which features labels too:
    https://stackoverflow.com/questions/...s-y-axis-title

    Both seem to be featuring a grid by default.
    Last edited by Sempervivum; 06-17-2017 at 10:02 AM.

  5. #5
    Join Date
    Dec 2012
    Posts
    1,587
    PS: When I have a look at the Javascript in your fiddle it seems to me that handling of both, Highcharts and chart.js is much easier.

  6. #6
    Join Date
    Jun 2017
    Posts
    9
    I have spent hours in my favorite search engine and whittled my question down to this very specific problem to which I was able to find no solution, which is why I came here for some help. Oh, and axes is the plural of axis. Same word different degree of plurality

  7. #7
    Join Date
    Jun 2017
    Posts
    9
    Thanks for your reply Sempervivum. Unfortunately, HighCharts puts an icon that says "made using highcharts" in the bottom right hand corner. I've searched chart.js but there are separate issues that arise in the graph that I'm trying to construct.

  8. #8
    Join Date
    Dec 2012
    Posts
    1,587
    there are separate issues that arise in the graph that I'm trying to construct.
    What are these issues? Missing features, errors? Maybe they can fixed.

  9. #9
    Join Date
    Jun 2017
    Posts
    9
    Never mind - I resolved my issues. Thanks anyway, Sempervivum.

  10. #10
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,858

    Quote Originally Posted by \\.\ View Post
    "Oh and... Axes are for chopping trees down, Axis is for plotting your graph, same sound different meaning. "
    It appears that axes may be employed for purposes other than the felling of trees.

    The Oxford Dictionary of English gives this information...

    axes
    Plural of axis
    Plural of axe

    coothead
    ~ the original bald headed old fart ~

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center