Google Visualization library loading creates two different results

1
votes

I'm having a very frustrating issue with proper loading of the Google Visualization library. I have two charts on my page. One is a columnchart and the other is a linechart.

Im loading my library like this: google.load('visualization', '1.0', {'packages':['corechart'],'callback':drawcharts});

Then im calling my columnchart like this:

var chart = new google.visualization.ColumnChart(chartDiv)

and my linechart like this:

myLineChart = new google.visualization.LineChart(document.getElementById('myChart2'));

This results in the following two charts: Column chart

Line Chart

The first pic is the linechart and that is the issue. When i instead load my visualization library like this:

google.load('visualization', '1.0', {'packages':['linechart','columnchart'], 'callback': drawcharts});

I get my linechart how I want it:

Preferred line chart

but my columnchart becomes like this:

enter image description here

I've tried adjusting the bar:groupwidth on the columnchart but i'm getting issues when using an Addlistener event on the columnchart.

How can I load the libraries required so I can have the corechart version of the linechart and the normal columnchart (not the one with corechart)? Basically, image 2 and 3? How is corechart.linechart different from just loading linechart?

1
javascriptjquerychartsgoogle-visualization
will you please share the code demonstrating the problem with the event? - WhiteHat
@WhiteHat The core of my problem is how the mouseover listener works when the columnchart is loaded using "corechart" or just "columnchart". Im using this code found here by geocodezip: geocodezip.com/v3_elevation-profile_distance.html. On line 84, you can see he is loading columnchart. When I load corechart, the mouseover on the elevation doesn't go all the way. I tried to make a fiddle but I was having issues. - user5563910

1 Answers

0
votes

Such a silly mistake. My width of my chart div and the width set in my chart options were not the same. When I made them the same, it works fine.