CODEWITHSUNDEEP
javascriptjquerygraphhighcharts
Sorav Garg
Sorav Garg

Reputation: 1067

JS Graphs using positive & negative values (Single line graph)

I want to integrate graph into my website with positive & negative values. If the value is negative then It will go into a red section, if no is positive then it will go into green section.

Right now I am unable to find such type of graph library in javascript, what will be the exact name of this type of graph?

Please let me know the solution.

Upvotes: 1

Views: 474

Answers (2)

ppotaczek
ppotaczek

Reputation: 39139

You can create this type of chart by using Highcharts. Please check the example below:

Highcharts.chart('container', {
    chart: {
        inverted: true,
        height: 80,
        events: {
            load: function() {
                var yAxis = this.yAxis[0],
                    y = this.plotTop + this.plotHeight / 2,
                    center = yAxis.toPixels(0);

                this.renderer.path([
                    'M', this.plotLeft, y, 'L', center, y
                ]).attr({
                    'stroke-width': 1,
                    stroke: 'red'
                }).add();

                this.renderer.path([
                    'M', center, y, 'L', this.plotSizeY + this.plotLeft, y
                ]).attr({
                    'stroke-width': 1,
                    stroke: 'green'
                }).add();
            }
        }
    },
    title: {
        text: ''
    },
    credits: {
        enabled: false
    },
    legend: {
        enabled: false
    },
    yAxis: {
        title: {
            text: ''
        },
        tickPositions: [-18, 0, 27],
        gridLineWidth: 2
    },
    xAxis: {
        visible: false
    },
    series: [{
        type: 'scatter',
        data: [21],
        marker: {
            fillColor: 'orange',
            radius: 10
        }
    }]
});

Live demo: http://jsfiddle.net/BlackLabel/x9vo0tr6/

API: https://api.highcharts.com/highcharts

Upvotes: 2

jknotek
jknotek

Reputation: 1864

The closest name I've found is just a "number line", and it looks like this JavaScript library has a specific example of it:

https://jsxgraph.uni-bayreuth.de/wiki/index.php/Number_line

But I think in general you're better off building a custom one-dimensional plot of sorts, with D3.js, for example.

Upvotes: 1

Related Questions