Discussion about Column Chart customization

[crazyc...@gmail.com]

Hi Guys,

Below is the sample Code

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <script type="text/javascript">

    google.charts.load("current", {packages:['corechart']});

    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = google.visualization.arrayToDataTable([

        ["Element", "Density", { role: "style" } ],

        ["Copper", 8.94, "#b87333"],

        ["Silver", 10.49, "silver"],

        ["Gold", 19.30, "gold"],

        ["Platinum", 21.45, "color: #e5e4e2"],

  ["Emerald", 21.45, "color: green"]

      ]);

      var view = new google.visualization.DataView(data);

      view.setColumns([0, 1,

                       { calc: "stringify",

                         sourceColumn: 1,

                         type: "string",

                         role: "annotation" },

                       2]);

      var options = {

        title: "Density of Precious Metals, in g/cm^3",

        width: 600,

        height: 400,

        bar: {groupWidth: "95%"},

        legend: { position: "none" },

      };

      var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));

      chart.draw(view, options);

  }

  </script>

<div id="columnchart_values" style="width: 900px; height: 300px;border:1px solid black;"></div>

Current Output:

Expected output:

Please see the different b/w Current output and Expected output

Issues in the Current output:

1. Extra spaces in the chart area. I tried to reduce the width of the div and still i am unable to remove the white space in the chart area.

2. Horizontal line needs to be removed

3. Need to make the chart in fit to the div border.

4.Y axis values need not show but the line needs to be there

I have attached my sample code as well. I request anyone to help me to achieve this requirement. Any sample code would be much appreciated.

Thanks

[crazyc...@gmail.com]

Hi,

can any one please help me on this.

Thanks

[Sergey Grabkovsky]

Hi,

Here are answers to your questions in order:

1) In order to get rid of the spacing around the chart, you need to set your 'chartArea' options.

2) Presumably you're talking about the gridlines here? These can be gotten rid of by setting the vAxis.gridlines.count setting to 0.

3) This will happen once your chart size actually matches your div size and you've gotten rid of the space around the chart area (#1).

4) Sadly, this is not trivial. In order to actually do this, you will have to use a numeric axis with custom ticks.

Here's a jsfiddle example of all the things you requested: http://jsfiddle.net/jmqug9un/

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/baf1ae3f-761b-419c-8de2-61df754bb031%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

	•	Sergey Grabkovsky
	•	Software Engineer
	•	Google, Inc
	•	gra...@google.com

[Crazy Champ]

Thanks a lot Sergey.  Much appreciated. got the trick from your code.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/6reyKbMY3pM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAEwwup5fivPme-2YBsV4b1S4qf90aR1xF-cbCR5NoqS3RmiD9Q%40mail.gmail.com.