Geek Answers Handbook

Drawing visual lines in Google charts

I am writing a google chart. He has columns. In addition, I want to draw 2 lines that indicate the minimum and maximum valid value.

enter image description here

The only solution I came across changed the first ComboCharts example. My result is as follows:

enter image description here

This is not enough. The graph is variable, so if only 1 Quartal is displayed, the line will only be a point. My questions:

  • Is there a way to draw the line further, so that it falls into the left and right border of the chart?
  • Can I draw markup lines on a chart without pretending to be another datapoint?

If you want, you can play here with ComboChart here .

+9
google-visualization
source share
2 answers

You cannot force rows to go from edge to border with the discrete (row-based) x axis. If you switch to the continuous axis (number, date, date and time, time of day), you can add one line before your real data, and one line after it contains the target lines (and zeros for other data series):

function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('number', 'Quarter'); data.addColumn('number', 'Value 1'); data.addColumn('number', 'Value 2'); data.addColumn('number', 'Value 3'); data.addColumn('number', 'Goal 1'); data.addColumn('number', 'Goal 2'); data.addRows([ [0, null, null, null, 10, 14], [1, 5, 4, 7, null, null], [2, 6, 9, 6, null, null], [3, 2, 6, 4, null, null], [5, null, null, null, 10, 14] ]); var chart = new google.visualization.ComboChart(document.querySelector('#chart_div')); chart.draw(data, { height: 400, width: 600, isStacked: true, legend: { position: 'top' }, seriesType: 'bars', interpolateNulls: true, series: { 3: { type: 'line' }, 4: { type: 'line' } }, hAxis: { format: 'Q#', ticks: [1, 2, 3, 4], viewWindow: { min: 0.5, max: 4.5 } }, chartArea: { left: '10%', width: '80%' } }); } google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

See a working example: http://jsfiddle.net/asgallant/W67qU/

+11
source share

Maybe a little late, but I ran into the same problem. I tried to set the maximum and minimum lines in a line chart with a lot of data points in a series, and I wanted to avoid adding new series with a lot of repeating points, so I used overlays ( https://developers.google.com/Diagram/Interactive/ Documents / Overlay # javascript2 ).

Here is an example, this is just a draft, which I am currently working on, but may possibly help:

 <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js" ></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <style> #container { position: relative; width: 900px; height: 500px; } .min-bar { height: 1px; background-color: red; position: absolute; left: 0; right: 0; } </style> <script type="text/javascript"> $(function() { $.get( "https://firebasestorage.googleapis.com/v0/b/manasav-pricetracker.appspot.com/o/products%2F-L6O-CtBKZAc2NTCFq7Z.data?alt=media&token=60e06bb6-59b7-41a9-8fd0-f82f4ddc75f2", function(data) { google.charts.load("current", { packages: ["corechart"] }); google.charts.setOnLoadCallback(drawChart); var downloadedData = JSON.parse("[" + data); function drawChart() { var dataTable = [["Time", "New"]]; let min = Number.MAX_VALUE; let rowMin; for (var i in downloadedData) { var d = downloadedData[i]; if (d.new < min) { rowMin = i; min = d.new; } dataTable.push([new Date(d.date), d.new]); } var data = google.visualization.arrayToDataTable(dataTable); var options = { title: "Price evolution", legend: { position: "bottom" }, trendlines: { 0: {} } }; var chart = new google.visualization.LineChart( document.getElementById("curve_chart") ); function placeMarker(dataTable) { var cli = this.getChartLayoutInterface(); var chartArea = cli.getChartAreaBoundingBox(); document.querySelector(".min-bar").style.top = Math.floor(cli.getYLocation(min)) + "px"; document.querySelector(".min-bar").style.left = Math.floor(cli.getXLocation(dataTable.getValue(0,0))) - 25 + "px"; document.querySelector(".min-bar").style.right = (document.querySelector("#container").offsetWidth - Math.floor(cli.getXLocation(dataTable.getValue(dataTable.getNumberOfRows()-1,0)))) - 25 + "px"; // document.querySelector(".min-bar").style.top = // Math.floor(cli.getXLocation(dataTable.getValue(rowMin, 1))) + // "px"; } google.visualization.events.addListener( chart, "ready", placeMarker.bind(chart, data) ); chart.draw(data, options); } } ); }); </script> </head> <body> <div id="container"> <div id="curve_chart" style="width: 900px; height: 500px"></div> <div class="min-bar"></div> </div> </body> </html>

Jsfiddle demo => https://jsfiddle.net/jRubia/8z7ao1nh/

0
source share

More articles:


All Articles