How can I draw an additional horizontal grid line with a specific value in Google Bar chart (Not average value)

Subrata Sarkar

How can I draw an additional horizontal grid line with a specific value in Google Bar chart. The line I want to draw is not the average. It is a specific value.

What I am getting enter image description here

What I need enter image description here

How can I do this?

EDIT

This my data model:

var data = google.visualization.arrayToDataTable([
    ["Month", "Points", { role: "style" }, "TARGET GOAL"],
    ["Apr-19", 17, "#c4c4c4", 25], 
    ["May-19", 32, "#c4c4c4", 25], 
    ["Jun-19", 20, "#c4c4c4", 25], 
    ["Jul-19", 22, "#c4c4c4", 25], 
    ["Aug-19", 27, "#c4c4c4", 25], 
    ["Sep-19", 26, "#c4c4c4", 25], 
    ["Oct-19", 18, "#008600", 25], 
    ["Nov-19", 18, "#008600", 25], 
    ["Dec-19", 18, "#008600", 25], 
]);

And in options object I have this:

seriesType: 'bars',
series:{
   3: {
        type: 'line'
      }
}

Since 25 is the value I want to be rendered as a line and it is in the 4th position.

And finally

var chart = new google.visualization.ComboChart(document.getElementById("container_id"));

Am I missing something?

EDIT-2 Complete script:

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

function drawChart_ebcg_unitary() {
    var data = google.visualization.arrayToDataTable([
        ["Month", "Points", { role: "style" }, "TARGET GOAL"],
        ["Apr-19", 17, "#c4c4c4", 25], 
        ["May-19", 32, "#c4c4c4", 25], 
            ["Jun-19", 20, "#c4c4c4", 25], 
        ["Jul-19", 22, "#c4c4c4", 25], 
        ["Aug-19", 27, "#c4c4c4", 25], 
        ["Sep-19", 26, "#c4c4c4", 25], 
        ["Oct-19", 18, "#008600", 25], 
        ["Nov-19", 18, "#008600", 25], 
        ["Dec-19", 18, "#008600", 25], 
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1,
             {
                calc: "stringify",
                sourceColumn: 1,
                type: "string",
                role: "annotation"
             },
        2]);

        var options = {
        chartArea: {
                    left: 50,
                    width: "90%",
                    height: 250
        },

        title: "",
        width: '100%',
        height: 350,
        bar: {groupWidth: "90%"},
        legend: {position: "none"},
        seriesType: 'bars',
        series:{
            1: {
                type: 'line'
            }
        },
        vAxis: {
            minValue: 0,
            title: 'SALES UNITS'
        },
        hAxis: {
            title: 'MONTH'
        },
        annotations: {
            textStyle: {
                fontName: 'Arial, sans-serif',
                color: '#000000',
                fontSize: 12,
                bold: true
            },
            alwaysOutside: true
        }
    };


    var chart = new google.visualization.ComboChart(document.getElementById("ecbg_unitary"));
    chart.draw(view, options);
}

jQuery(window).resize(function () {
    drawChart_ebcg_unitary();
});

EDIT 3: Average line
How can I make the average line (please see screenshot) value (25) to appear only once, i.e at the end of the line rather than showing it on every month's column. This needs to look similar as in the screenshot under (What I need) section. Please advise.

enter image description here

WhiteHat

use a ComboChart, which allows you to draw series of different types.

in the options, set the main seriesType.
then use the series option, to change the type of a specific series...

{
  seriesType: 'bars',
  series: {
    1: {
      type: 'line'
    }
  }
}

see following working snippet...

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

function drawChart_ebcg_unitary() {
    var data = google.visualization.arrayToDataTable([
        ["Month", "Points", { role: "style" }, "TARGET GOAL"],
        ["Apr-19", 17, "#c4c4c4", 25], 
        ["May-19", 32, "#c4c4c4", 25], 
            ["Jun-19", 20, "#c4c4c4", 25], 
        ["Jul-19", 22, "#c4c4c4", 25], 
        ["Aug-19", 27, "#c4c4c4", 25], 
        ["Sep-19", 26, "#c4c4c4", 25], 
        ["Oct-19", 18, "#008600", 25], 
        ["Nov-19", 18, "#008600", 25], 
        ["Dec-19", 18, "#008600", 25], 
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1,
             {
                calc: "stringify",
                sourceColumn: 1,
                type: "string",
                role: "annotation"
             },
        2, 3]);

        var options = {
        chartArea: {
                    left: 50,
                    width: "90%",
                    height: 250
        },

        title: "",
        width: '100%',
        height: 350,
        bar: {groupWidth: "90%"},
        legend: {position: "none"},
        seriesType: 'bars',
        series:{
            1: {
                type: 'line'
            }
        },
        vAxis: {
            minValue: 0,
            title: 'SALES UNITS'
        },
        hAxis: {
            title: 'MONTH'
        },
        annotations: {
            textStyle: {
                fontName: 'Arial, sans-serif',
                color: '#000000',
                fontSize: 12,
                bold: true
            },
            alwaysOutside: true
        }
    };


    var chart = new google.visualization.ComboChart(document.getElementById("ecbg_unitary"));
    chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="ecbg_unitary"></div>

EDIT

to display the annotation for the average only once,
use your own calculation for the annotation,
and only return a value if the row index equals the last row...

var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
    calc: 'stringify',
    sourceColumn: 1,
    type: 'string',
    role: 'annotation'
  },
  2, 3, {
    calc: function(dt, row) {
      var annotation = null;
      if (row === (dt.getNumberOfRows() - 1)) {
        annotation = dt.getFormattedValue(row, 3);
      }
      return annotation;
    },
    type: 'string',
    role: 'annotation'
  }
]);

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

How can I display the latest value in Chart?

분류에서Dev

How to create a bar chart/histogram with bar per discrete value?

분류에서Dev

How can I get and change a value of a line inside of a file if the value of such line is unknown by me?

분류에서Dev

How to show a column with the value Zero in Bar chart in Highcharts?

분류에서Dev

How to draw a dynamic line chart based on an infotable?

분류에서Dev

How can I change a wpf Databound grid cell based on the cell value?

분류에서Dev

Double value in Google chart not working

분류에서Dev

How can I count and log the number of rows in a sheet with a specific month/year value

분류에서Dev

How can I create a file with a specific size from a command line?

분류에서Dev

How can I run a specific line as a command in a text file?

분류에서Dev

I used a for loop to draw different curves. But how can I change every line to a different color?

분류에서Dev

How can I change button value with stylish?

분류에서Dev

How can I test for a file having a value?

분류에서Dev

how to i can return value in mvc 4

분류에서Dev

How do I draw a line on a Lazarus form?

분류에서Dev

How to calculate an average value based on duplicate groups?

분류에서Dev

How to get plot of average value from R

분류에서Dev

How do I get the full value(including any additional tags) from .text of an XML key / Value using Javascript

분류에서Dev

How to find grid last row value of any specific column using jquery

분류에서Dev

Horizontal bar chart y axis alignment

분류에서Dev

How do i add dropdown items to my horizontal menu bar?

분류에서Dev

JessTab: Finding average value

분류에서Dev

How to get specific value of an dictionary

분류에서Dev

How to change section color of a stacked bar chart in Google Charts API?

분류에서Dev

How can I add the the value of an "else" statement to it's previous "if"?

분류에서Dev

React Native: how can i Get value of Picker and add it to Flatlist

분류에서Dev

How can I get a column of value from hashmap

분류에서Dev

How can I find the greatest alpha numeric value by number

분류에서Dev

how can i get value from tfoot datatable jquery?

Related 관련 기사

  1. 1

    How can I display the latest value in Chart?

  2. 2

    How to create a bar chart/histogram with bar per discrete value?

  3. 3

    How can I get and change a value of a line inside of a file if the value of such line is unknown by me?

  4. 4

    How to show a column with the value Zero in Bar chart in Highcharts?

  5. 5

    How to draw a dynamic line chart based on an infotable?

  6. 6

    How can I change a wpf Databound grid cell based on the cell value?

  7. 7

    Double value in Google chart not working

  8. 8

    How can I count and log the number of rows in a sheet with a specific month/year value

  9. 9

    How can I create a file with a specific size from a command line?

  10. 10

    How can I run a specific line as a command in a text file?

  11. 11

    I used a for loop to draw different curves. But how can I change every line to a different color?

  12. 12

    How can I change button value with stylish?

  13. 13

    How can I test for a file having a value?

  14. 14

    how to i can return value in mvc 4

  15. 15

    How do I draw a line on a Lazarus form?

  16. 16

    How to calculate an average value based on duplicate groups?

  17. 17

    How to get plot of average value from R

  18. 18

    How do I get the full value(including any additional tags) from .text of an XML key / Value using Javascript

  19. 19

    How to find grid last row value of any specific column using jquery

  20. 20

    Horizontal bar chart y axis alignment

  21. 21

    How do i add dropdown items to my horizontal menu bar?

  22. 22

    JessTab: Finding average value

  23. 23

    How to get specific value of an dictionary

  24. 24

    How to change section color of a stacked bar chart in Google Charts API?

  25. 25

    How can I add the the value of an "else" statement to it's previous "if"?

  26. 26

    React Native: how can i Get value of Picker and add it to Flatlist

  27. 27

    How can I get a column of value from hashmap

  28. 28

    How can I find the greatest alpha numeric value by number

  29. 29

    how can i get value from tfoot datatable jquery?

뜨겁다태그

보관