Y axis cordinate in combinatin charts

[anujpratap09]

Hi,

I am developing a combination chart.
the combination chart is showing every chart y axis, but i want to show only single y axis and each chart will draw on the basis of that single Y axis value.
Below is my code.

var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy'
},
title: {
text: 'Average Monthly Weather Data for Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}],
yAxis: [{ // Primary yAxis
labels: {
formatter: function() {
return this.value + ' °C';
},
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
},
opposite: true

},
{ // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function() {
return this.value + ' mm';
},
style: {
color: '#4572A7'
}
}

},
{ // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Sea-Level Pressure',
style: {
color: '#AA4643'
}
},
labels: {
formatter: function() {
return this.value + ' mb';
},
style: {
color: '#AA4643'
}
},
opposite: true}],
tooltip: {
formatter: function() {
var unit = {
'Rainfall': 'mm',
'Temperature': ' °C',
'Sea-Level Pressure': 'mb'
}[this.series.name];

return '' + this.x + ': ' + this.y + ' ' + unit;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 80,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Temperature',
color: '#89A54E',
type: 'area',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]},
{
name: 'Rainfall',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

},{
name: 'Rainfall2',
color: '#15a2f7',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

},
{
name: 'Sea-Level Pressure',
type: 'spline',
color: '#AA4643',
yAxis: 2,
data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
marker: {
enabled: false
},
dashStyle: 'shortdot'

}
]
});

[hfrntt]

So, you just have to remove other y axes, see: http://jsfiddle.net/vb7ps/

[anujpratap09]

Thanks for support.
My code is working fine on my local machine but after deployed code on testing server first graph is woking fine but second graph is not showing.
I am unable to find the issue.
On one machine first graph also not showing, IE8 also installed on that machine but i don't why it's happening.
And in IE6 and IE7 graph is not showing.
Below is my code

Code: Select all

function RenderChart()
{

for(var i=0;i<functionSpaceOccupied.length;i++)
{
    functionSpaceOccupied[i]= parseFloat(functionSpaceOccupied[i]);
}

for(var i=0;i<totalInquiry.length;i++)
{
    totalInquiry[i]= parseFloat(totalInquiry[i]);
}

for(var i=0;i<totalNonDeduct.length;i++)
{
    totalNonDeduct[i]= parseFloat(totalNonDeduct[i]);
}

for(var i=0;i<totalDeduct.length;i++)
{
    totalDeduct[i]= parseFloat(totalDeduct[i]);
}

for(var i=0;i<roomsForecast.length;i++)
{
    roomsForecast[i]= parseFloat(roomsForecast[i]);
}

for(var i=0;i<inquiry.length;i++)
{
    inquiry[i]= parseFloat(inquiry[i]);
}

for(var i=0;i<deducted.length;i++)
{
    deducted[i]= parseFloat(deducted[i]);
}

for(var i=0;i<nonDeducted.length;i++)
{
    nonDeducted[i]= parseFloat(nonDeducted[i]);
}

var options = new Highcharts.Chart({
    chart: {
        renderTo: 'container'//,
        //zoomType: 'xy'
    },
    title: {
        text: 'Combined All Chart'
    },
    subtitle: {
        text: 'Source: www..com'
    },
    xAxis: [{
        categories: arrAxisData }],
    yAxis: [{ // Primary yAxis
        labels:
        {
            formatter: function() {
                return this.value;// + ' °C';
            },
            style: {
                color: '#000000'
            }
        },
        title: {
            text: 'Function Space Occupied',
            style: {
                color: '#000000'
            }
        },
        opposite: true

        },
    { // Secondary yAxis
        gridLineWidth: 0,
        title: {
            text: '',
            style: {
                color: '#7F62A9'
            }
        },
        labels: {
            formatter: function() {
                return this.value;// + ' mm';
            },
            style: {
                color: '#7F62A9'
            }
        }

        },
    { // Tertiary yAxis
        gridLineWidth: 0,
        title: {
            text: 'Rooms Forecast',
            style: {
                color: '#AA4643'
            }
        },
        labels: {
            formatter: function() {
                return this.value + ' %';// + ' mb';
            },
            style: {
                color: '#AA4643'
            }
        },
        opposite: true}],
    tooltip: {
        formatter: function() {
            var unit = {
                'Inquiry': 'Inquiry',
                'Non Deduct':'Non Deduct',
                'Deduct':'Deduct',
                'Function Space Occupied': 'Function Space',
                'Rooms Forecast': 'Rooms Forecast %'
            }[this.series.name];

            return '' +'<b>'+ this.x +'</b><br/>'+ unit +': ' + this.y;// + ' ' + unit;
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        x: 120,
        verticalAlign: 'top',
        y: 80,
        floating: true,
        backgroundColor: '#FFFFFF'
    },
    series: [{
        name: 'Function Space Occupied',
        color: '#D1DCEE',
        type: 'area',
        data: functionSpaceOccupied},
    {
        name: 'Inquiry',
        color: '#4AADC4',
        type: 'column',
        yAxis: 1,
        data: inquiry

        },{
        name: 'Non Deduct',
        color: '#7F62A9',
        type: 'column',
        yAxis: 1,
        data: nonDeducted

        },{
        name: 'Deduct',
        color: '#9BBB56',
        type: 'column',
        yAxis: 1,
        data: deducted

        },
    {
        name: 'Rooms Forecast',
        type: 'spline',
        color: '#AA4643',
        yAxis: 2,
        data: roomsForecast,
        marker: {
            enabled: false
        },
        dashStyle: 'shortdot'

        }
                    ]
});


var chart;
$(document).ready(function() {
   chart = new Highcharts.Chart({
      chart: {
         renderTo: 'dvGuest',
         defaultSeriesType: 'column'
      },
      title: {
         text: 'Guest Room chart'
      },
      xAxis: {
         categories: arrAxisData
      },
      yAxis: {
         min: 0,
         title: {
            text: ''
         }//,
         //stackLabels: {
         //   enabled: true,
        //    style: {
        //       fontWeight: 'bold',
        //       color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        //    }
        // }
      },
      legend: {
         align: 'right',
         x: -100,
         verticalAlign: 'top',
         y: 20,
         floating: true,
         backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
         borderColor: '#CCC',
         borderWidth: 1,
         shadow: false
      },
      tooltip: {
         formatter: function() {
            return '<b>'+ this.x +'</b><br/>'+
                this.series.name +': '+ this.y +'<br/>'+
                'Total: '+ this.point.stackTotal;
         }
      },     
     
       plotOptions: {
        column: {
            stacking: 'normal'
        }
    },
       series: [{
         name: 'Total Inquiry',
         color: '#CDFFFF',
         data: totalInquiry
      }, {
         name: 'Total Non Deduct',
         color: '#802B57',
         data: totalNonDeduct
      }, {
         name: 'Total Deduct',
         color: '#8F8EEB',
         data: totalDeduct
      }]
   });
   
   
});

}


Edit: I created a sample page with static graph values that page also working fine on local but after deployed on testing server page showing the below error.
See the attached image.
Message: 'qb' is null or not an object
Line: 53
Char: 126
Code: 0
URI: http://10.12.11.3/.Web.UI/JavaScripts/C ... hcharts.js

Thanks in advance.

[hfrntt]

Can I see this website live?

[anujpratap09]

This website is not public website.
so I can't provied the credetials.
I have split my JS code for both 2 graph in two files.
Now it's working fine except one machine but not woking on IE6 on every machine.

I have one more query.
I want to save chart image on button click like http://jsfiddle.net/hfrntt/fXHB5/1896/ but i want to save image on a predefined location on server where image is save on button click and no save dialog will open.

But above mention url code not woking on my machine, i am using IE8 browser.
What i have to change in code to remove save dialog and provide a pre defined location to save chart image on server.

[hfrntt]

You need to set up the exporting server on your machine (see: http://www.highcharts.com/documentation ... #exporting). I just tried that demo on IE8 and it works without any issue. Are you using 'normal' IE8 or IE8 mode in IE9?