Friday, 17 March 2017

Highchart y axis need 2 category each having 3 sub category

I am using high chart version v4.0.4, i have worked bar chart like mentioned below i need output with there bar for every year details given below I am working on below high chart code

var data_first_vd = 0;
var data_second_vd = 0;
var glb_data_ary = [];
var dynamicval1 = 5.85572581;
var dynamicval2 = 0.16091656;
if((dynamicval1>1) || (dynamicval2>1)){
    var data_tit = 'Value';
    var data_val = '${value}';
    var prdelvalaxis = 1000000;
}else{
    prdelvalaxis = 1000;
    data_tit = "Value";
    data_val = "${value}";
}
data_first_vd=5.86;
data_second_vd =0.16;
var data_first_ud =1397.128;
var data_second_ud = 28.145;

data_first_ud_lbl = '1.40M';
data_second_ud_lbl = '28K';
data_first_vd_lbl = '5.86M';
data_second_vd_lbl = '161K';
data_first_vd_lbl_xaxis = '$5.86M';
data_second_vd_lbl_xaxis = '$161K';
var ud1 = 1397;
var ud2 = 28;
var vd1 = 6;
var vd2 = 0;


$('#id').highcharts({
    credits: { enabled: false },
    chart: {
        type: 'bar',
        height: 200,
        marginLeft: 120,
        marginBottom:50,
        marginTop: 47,
        marginRight:30,
        plotBorderWidth: 0,
    },
    title: {
        text: null
    },
    xAxis: {
        drawHorizontalBorders: false,

        labels: {
            groupedOptions: [{

                rotation: 270,

            }],
            rotation: 0, 
            align:'center',
            x: -30,
            y: 5,
            formatter: function () { 
                if (curYear === this.value) {
                    return '<span style="color:#6C9CCC;">' + this.value + '</span>';
                } 
                else if (prevYear === this.value) {
                    return '<span style="color: #ED7D31;">' + this.value + '</span>';
                }
                else if ('VALUE' === this.value) {
                    return '<span style="color:#942EE1;">' + this.value + '</span>';
                }
                else{
                    return '<span style="color: #E124D2;">' + this.value + '</span>';
                }
            },
            useHTML:true
        },
        categories: [{
            name: "UNITS",

            categories: [2017, 2016]
        },{
            name: "VALUE",

            categories: [2017, 2016]
        }
     ],

    },
    yAxis: [{ // Primary yAxis
        labels: {
            format: data_val,               
            formatter: function () { 
                if(this.value!=0){ 
                    return '$'+valueConverter_crt(this.value*prdelvalaxis);                     
                }else{ 
                    return this.value;
                }
            },
            style: {

                color: '#942EE1'
            }
        },
        title: {
            text: "<span style='font-size: 12px;'>"+data_tit+"</span>",
            style: {

                color: '#942EE1'
            },
            useHTML:true
        }
    }, { // Secondary yAxis
        title: {
            text: "<span style='font-size: 12px;'>Units</span>",
            style: {

                 color: '#E124D2'
            },
            useHTML:true
        },
        labels: {
            format: '{value}',
            formatter: function () {
                if(this.value!=0){ 
                    return cal_pro_del_xaxis(this.value);
                }else{ 
                    return this.value;
                }
            },
            style: {
                 color: '#E124D2'
            }
        },
        opposite: true
    }],
    tooltip: { enabled: false },
    exporting: { enabled: false },
    legend: { enabled: false },
    plotOptions: {
        series: {
            dataLabels: {
                inside: true,
                align: 'left',
                enabled: true,
                formatter: function () {
                    return this.point.name;

                },
                color: '#000000',

            },
            stacking: false,
            pointWidth: 15,
            groupPadding: 0.5               
        },
    },
    series: [{
        yAxis: 1,
        data: [{y:1397.128,name:data_first_ud_lbl,color:'#6C9CCC'},{y:28.145,name:data_second_ud_lbl,color:'#ED7D31'}],
    }, {            
        data: [null,null,{y:5.86,name:data_first_vd_lbl_xaxis,color:'#6C9CCC'},{y:0.16,name:data_second_vd_lbl_xaxis,color:'#ED7D31'}],
    }]
});

existing chart

I need out put like below chart This chart i draw in paint. Expected ChartHere 3 bar added in every year Please help me to achieve this



via raj

No comments:

Post a Comment