Spacing of data points in Google charts

Question

Spacing of data points in Google charts

I'm currently facing an issue with the spacing between the "Applications" and the data in my chart. In Chart 1, there is no space between the colon and the integer value. I would like it to resemble Chart 2 which shows the desired spacing.

(As a new user, I am unable to upload images of the charts)
Chart 1:
2011
Applicaitons:10 <-- no spacing

Chart 2: (sourced from Google)
25
Cats: 42 <-- spacing

I am populating the data dynamically, unlike the example provided by Google charts. Below is the code snippet:

    public string GetAppFiledPatIssuedByYear(DateTime? startDate, DateTime? endDate)
    {
        // Code logic
    }

***** Javascript function where the code is executed *****

function getAppFiledPatentsIssuedByYear() {
// Retrieve data and call drawing function
}

function drawAppFiledPatIssuedByYearChart(json) {
// Draw chart using google.visualization arrayToDataTable method
}

The backend returns the data as a string, which is then converted to a JSON object and passed back to the frontend in the JS file.

Link to Google Datapoint
How can I achieve the desired spacing between "Applications:10" and "Applications: 10"?

javascript c#asp.net-mvc google-visualization

Answer 1

Answer №1

unable to replicate the problem at this time, everything appears to be functioning correctly.
take a look at the working snippet provided below:

is the issue related to the fontName? (what value is assigned to it?)

are there any missing components in the code snippet below?
filedAndIssuedColors & setVAxisTicks -- although unlikely to be causing the problem.

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([["Year","Applications", "Patents"], ["1990", 1, 0], ["1991", 11, 0], ["1992", 2, 0], ["1993", 1, 0], ["1994", 19, 0], ["1997", 1, 0], ["2000", 1, 0], ["2001", 9, 0], ["2002", 11, 0], ["2003", 2, 1], ["2004", 2, 0], ["2005", 15, 0], ["2006", 2, 1], ["2007", 34, 1], ["2008", 2, 5], ["2009", 2, 5], ["2010", 27, 1], ["2011", 14, 6], ["2012", 23, 7], ["2013", 22, 14], ["2014", 15, 6], ["2015", 94, 12], ["2016", 26, 22], ["2017", 96, 33], ["2018", 22, 51]]);

  var options = {
      isStacked: false,
      height: 250,
      width: "100%",
      fontSize: 12,
      //fontName: fontName,
      pointSize: 10,
      legend: { position: 'top' },
      chartArea: {
          top: 50,
          left: 60,
          width: "100%"
      },
      hAxis: {
          slantedText: true,
          slantedTextAngle: 45,
          textStyle: {
              fontsize: 11
          }
      },
      vAxis: {
          format: "0",
          textStyle: {
              bold: true
          },
          viewWindow: {
              min: 0
          }
      },

      //colors: filedAndIssuedColors
  };

  //setVAxisTicks(data, options);

  var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
  chart.draw(data, options);

});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

UPDATE

there's an option to expand the tooltip using custom formatting,
refer to the functional snippet provided below...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([["Year","Applications", "Patents"], ["1990", 1, 0], ["1991", 11, 0], ["1992", 2, 0], ["1993", 1, 0], ["1994", 19, 0], ["1997", 1, 0], ["2000", 1, 0], ["2001", 9, 0], ["2002", 11, 0], ["2003", 2, 1], ["2004", 2, 0], ["2005", 15, 0], ["2006", 2, 1], ["2007", 34, 1], ["2008", 2, 5], ["2009", 2, 5], ["2010", 27, 1], ["2011", 14, 6], ["2012", 23, 7], ["2013", 22, 14], ["2014", 15, 6], ["2015", 94, 12], ["2016", 26, 22], ["2017", 96, 33], ["2018", 22, 51]]);

  var options = {
      isStacked: false,
      height: 250,
      width: "100%",
      fontSize: 12,
      fontName: 'Open Sans',
      pointSize: 10,
      legend: { position: 'top' },
      chartArea: {
          top: 50,
          left: 60,
          width: "100%"
      },
      hAxis: {
          slantedText: true,
          slantedTextAngle: 45,
          textStyle: {
              fontsize: 11
          }
      },
      vAxis: {
          format: "0",
          textStyle: {
              bold: true
          },
          viewWindow: {
              min: 0
          }
      },
      tooltip: {
          isHtml: true
      }
  };
  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    type: 'string',
    role: 'tooltip',
    calc: function (dt, row) {
      return '<div class="tooltip"><div><span>' + dt.getValue(row, 0) + '</span></div><div>' + dt.getColumnLabel(1) + ':&nbsp;&nbsp;<span>' + dt.getValue(row, 1) + '</span></div>';
    },
    p: {html: true}
  }, 2, {
    type: 'string',
    role: 'tooltip',
    calc: function (dt, row) {
      return '<div class="tooltip"><div><span>' + dt.getValue(row, 0) + '</span></div><div>' + dt.getColumnLabel(2) + ':&nbsp;&nbsp;<span>' + dt.getValue(row, 2) + '</span></div>';
    },
    p: {html: true}
  }]);
console.log('test');

  var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
  chart.draw(view.toDataTable(), options);
});

.tooltip {
  font-family: 'Open Sans';
  font-size: 11pt;
  padding: 4px;
}

.tooltip div {
  padding: 4px;
}

.tooltip span {
  font-weight: bold;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Answer 2

unable to replicate the problem at this time, everything appears to be functioning correctly.
take a look at the working snippet provided below:

is the issue related to the fontName? (what value is assigned to it?)

are there any missing components in the code snippet below?
filedAndIssuedColors & setVAxisTicks -- although unlikely to be causing the problem.

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([["Year","Applications", "Patents"], ["1990", 1, 0], ["1991", 11, 0], ["1992", 2, 0], ["1993", 1, 0], ["1994", 19, 0], ["1997", 1, 0], ["2000", 1, 0], ["2001", 9, 0], ["2002", 11, 0], ["2003", 2, 1], ["2004", 2, 0], ["2005", 15, 0], ["2006", 2, 1], ["2007", 34, 1], ["2008", 2, 5], ["2009", 2, 5], ["2010", 27, 1], ["2011", 14, 6], ["2012", 23, 7], ["2013", 22, 14], ["2014", 15, 6], ["2015", 94, 12], ["2016", 26, 22], ["2017", 96, 33], ["2018", 22, 51]]);

  var options = {
      isStacked: false,
      height: 250,
      width: "100%",
      fontSize: 12,
      //fontName: fontName,
      pointSize: 10,
      legend: { position: 'top' },
      chartArea: {
          top: 50,
          left: 60,
          width: "100%"
      },
      hAxis: {
          slantedText: true,
          slantedTextAngle: 45,
          textStyle: {
              fontsize: 11
          }
      },
      vAxis: {
          format: "0",
          textStyle: {
              bold: true
          },
          viewWindow: {
              min: 0
          }
      },

      //colors: filedAndIssuedColors
  };

  //setVAxisTicks(data, options);

  var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
  chart.draw(data, options);

});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

UPDATE

there's an option to expand the tooltip using custom formatting,
refer to the functional snippet provided below...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([["Year","Applications", "Patents"], ["1990", 1, 0], ["1991", 11, 0], ["1992", 2, 0], ["1993", 1, 0], ["1994", 19, 0], ["1997", 1, 0], ["2000", 1, 0], ["2001", 9, 0], ["2002", 11, 0], ["2003", 2, 1], ["2004", 2, 0], ["2005", 15, 0], ["2006", 2, 1], ["2007", 34, 1], ["2008", 2, 5], ["2009", 2, 5], ["2010", 27, 1], ["2011", 14, 6], ["2012", 23, 7], ["2013", 22, 14], ["2014", 15, 6], ["2015", 94, 12], ["2016", 26, 22], ["2017", 96, 33], ["2018", 22, 51]]);

  var options = {
      isStacked: false,
      height: 250,
      width: "100%",
      fontSize: 12,
      fontName: 'Open Sans',
      pointSize: 10,
      legend: { position: 'top' },
      chartArea: {
          top: 50,
          left: 60,
          width: "100%"
      },
      hAxis: {
          slantedText: true,
          slantedTextAngle: 45,
          textStyle: {
              fontsize: 11
          }
      },
      vAxis: {
          format: "0",
          textStyle: {
              bold: true
          },
          viewWindow: {
              min: 0
          }
      },
      tooltip: {
          isHtml: true
      }
  };
  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    type: 'string',
    role: 'tooltip',
    calc: function (dt, row) {
      return '<div class="tooltip"><div><span>' + dt.getValue(row, 0) + '</span></div><div>' + dt.getColumnLabel(1) + ':&nbsp;&nbsp;<span>' + dt.getValue(row, 1) + '</span></div>';
    },
    p: {html: true}
  }, 2, {
    type: 'string',
    role: 'tooltip',
    calc: function (dt, row) {
      return '<div class="tooltip"><div><span>' + dt.getValue(row, 0) + '</span></div><div>' + dt.getColumnLabel(2) + ':&nbsp;&nbsp;<span>' + dt.getValue(row, 2) + '</span></div>';
    },
    p: {html: true}
  }]);
console.log('test');

  var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
  chart.draw(view.toDataTable(), options);
});

.tooltip {
  font-family: 'Open Sans';
  font-size: 11pt;
  padding: 4px;
}

.tooltip div {
  padding: 4px;
}

.tooltip span {
  font-weight: bold;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Spacing of data points in Google charts

Answer №1

Similar questions

After running the map.fitBounds function, you can retrieve the current boundary coordinates using map.getBounds() in

Typescript is throwing a Mongoose error stating that the Schema has not been registered for the model

Node replication including a drop-down menu

Avoid showing a pop-up window when switching to a different page

Trouble aligning text in circles and fadeToggle not functioning correctly

Steps to manage the time delay between mousewheel events triggering

Encountering an error during the installation of node js when attempting to run npm install

What is the best way to attach a click event listener to dynamically generated child elements?

Exploring the Options for csc's linkresource Function

Encountering a Problem with the onEnter Method in React

Is it possible to identify the origin URL of a user using Javascript or AngularJS?

What is the best way to showcase page content once the page has finished loading?

- "Utilizing the _underscore loop within a design framework"

Stop displaying AJAX requests in the console tab of Firebug, similar to how Twitter does it

JQuery causing array to not update properly

Concealing the table border with the help of jQuery

Controlling API requests using JavaScript, Python, and Bash

Building a Laravel Form for Uploading Images in Laravel 5.3

What causes execution to halt without error in JavaScript?

Tips for effortlessly moving content by dragging and dropping it into a text box