Carbon

forked from arnicas's block: Slope Chart in High Charts

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Example SlopeGraph</title>

$(function () {
    $('#container').highcharts({
    chart: {
        renderTo:'container',
        defaultSeriesType:'line',
        marginTop:100
    },
    title:{
        text:'Energy CO2 Emissions per State<br/>Metric Ton per Capita<br/>2005 and 2013'
    },
    legend:{
        enabled:false
    },
    tooltip: {
        formatter: function() {
            return this.series.name + ' ' + this.y;
        }
    },
    xAxis: {
        opposite:true,
        lineColor:'#999',
        categories:['2005','2013'],
        title:{
            text:''
        },
        labels:{
            style:{
                fontWeight:'bold'
            }
        }
    },
    yAxis: {
        gridLineWidth:0,
        labels:{
            enabled:false,
        },
        title:{
            text:'',
       }
    },
    plotOptions: {
        line:{
            lineWidth:2,
            shadow:false,
            color:'#666',
            marker:{
                radius:2,
                symbol: 'circle'
            },
            dataLabels:{
                enabled:true,
                align:'left',
                x:10,
                y:0,
                formatter:function(){
                    if(this.x == 2013){
                        return this.series.name + ' ' + this.y;
                    }
                }
            }
        },
        scatter:{
            shadow:false,
            color:'#666',
            marker:{
                radius:2
            },
            dataLabels:{
                enabled:true,
                align:'right',
                x:-10,
                y:0,
                formatter:function(){
                    return this.point.name + ' ' + this.y;
                }
            }
        }
    },
    series: [{
        name:'Utah',
        data: [14.50,12.03]
     },{
         name:'Indiana',
         data: [19.45,14.91]
     },{
         name:'Kentucky',
         data: [22.04,19.57]
     },{
         name:'Missouri',
         data: [13.46,12.54]
     },{
         name:'West Virginia',
         data: [46.84,79.29]
     },{
         name:'Wyoming',
         data: [85.02,79.29]
     },{
         type:'scatter',
         data: [{'x':0,'y':14.50,'name':'Utah'},
             {'x':0,'y':19.45,'name':'Indiana'},
             {'x':0,'y':22.04,'name':'Kentucky'},
             {'x':0,'y':13.46,'name':'Missouri'},
             {'x':0,'y':46.84,'name':'West Virginia'},
             {'x':0,'y':85.02,'name':'Wyoming'}]
      }]
  });
});

</script>
</head>
<body>

</body>
</html>

https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js

https://code.highcharts.com/highcharts.js