javascriptchartsgoogle-visualization
Google Charts Unexpectedly Drawing A Trendline
Using Google Charts (Combo Chart). It appears to be automatically drawing a trendline below the cumulative line.
I know I can add trendlines. But I haven't and Google Charts is adding one anyway! How do I stop it from doing this?
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart'], 'language': 'en_GB'});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = google.visualization.arrayToDataTable(
[[{"type":"date","label":"Period"},"Order QTY","Revenue","Target (Revenue)","Cumulative","Target (Cumulative)"],["Date(2023, 9, 01)",6,126.3,3733.3333333333335,126.3,112000],["Date(2023, 9, 02)",14,4925.46,3733.3333333333335,5051.76,112000],["Date(2023, 9, 03)",21,16751.65,3733.3333333333335,21803.410000000003,112000],["Date(2023, 9, 04)",20,774.18,3733.3333333333335,22577.590000000004,112000],["Date(2023, 9, 05)",19,7702.63,3733.3333333333335,30280.220000000005,112000],["Date(2023, 9, 06)",26,5711.16,3733.3333333333335,35991.380000000005,112000],["Date(2023, 9, 07)",7,101.71,3733.3333333333335,36093.090000000004,112000],["Date(2023, 9, 08)",7,239.8,3733.3333333333335,36332.89000000001,112000],["Date(2023, 9, 09)",32,8148.77,3733.3333333333335,44481.66,112000],["Date(2023, 9, 10)",14,1256.23,3733.3333333333335,45737.89000000001,112000],["Date(2023, 9, 11)",38,5964.22,3733.3333333333335,51702.11000000001,112000],["Date(2023, 9, 12)",26,1883.59,3733.3333333333335,53585.700000000004,112000],["Date(2023, 9, 13)",21,10981.02,3733.3333333333335,64566.72,112000],["Date(2023, 9, 14)",12,263.63,3733.3333333333335,64830.35,112000],["Date(2023, 9, 15)",8,136.66,3733.3333333333335,64967.01,112000],["Date(2023, 9, 16)",32,1238.84,3733.3333333333335,66205.85,112000],["Date(2023, 9, 17)",27,8939.29,3733.3333333333335,75145.14000000001,112000],["Date(2023, 9, 18)",37,6082.73,3733.3333333333335,81227.87000000001,112000],["Date(2023, 9, 19)",26,7123.39,3733.3333333333335,88351.26000000001,112000],["Date(2023, 9, 20)",29,2875.15,3733.3333333333335,91226.41,112000],["Date(2023, 9, 21)",8,68.99,3733.3333333333335,91295.40000000001,112000],["Date(2023, 9, 22)",5,20,3733.3333333333335,91315.40000000001,112000],["Date(2023, 9, 23)",23,7521.06,3733.3333333333335,98836.46,112000],["Date(2023, 9, 24)",12,494.32,3733.3333333333335,99330.78000000001,112000],["Date(2023, 9, 25)",17,3556.01,3733.3333333333335,102886.79000000001,112000],["Date(2023, 9, 26)",22,1168.64,3733.3333333333335,104055.43000000001,112000],["Date(2023, 9, 27)",17,2480.15,3733.3333333333335,106535.58,112000],["Date(2023, 9, 28)",5,332.6,3733.3333333333335,106868.18000000001,112000],["Date(2023, 9, 29)",10,99.95,3733.3333333333335,106968.13,112000],["Date(2023, 9, 30)",17,2680.08,3733.3333333333335,109648.21,112000],["Date(2023, 8, 30)",0,0,3733.3333333333335,0,112000]] );
var options = {
title : 'Last Month',
seriesType: 'bars',
vAxis: {
title : 'Revenue',
format: '£#,##0'
},
hAxis: {
format: 'd'
},
series: {
0: { // order qty
visibleInLegend: false,
color: '#D3D3D3',
targetAxisIndex: 1
},
1: { // revenue
color: '#cf0800',
},
2: { // revenue target
type: 'line',
visibleInLegend: false,
lineWidth: '1',
color: '#cf0800'
},
3: { // cumulative
type: 'line',
targetAxisIndex: 2
},
4: { // cumulative target
type: 'line',
visibleInLegend: false,
lineWidth: '1',
targetAxisIndex: 2,
color: '#304991',
},
},
vAxes: {
1: {
title: '',
textPosition: 'none'
},
2: {
title: 'Cumulative'
}
},
colors:['#cf0800', '#304991']
};
var chart_div = document.getElementById('chart_div_655b2ffdb9f5d' );
var chart = new google.visualization.ComboChart(chart_div);
// Wait for the chart to finish drawing before calling the getImageURI() method.
/*google.visualization.events.addListener(chart, 'ready', function () {
chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
console.log(chart_div.innerHTML);
});*/
chart.draw(data, options);
}
</script>
<div id="chart_div_655b2ffdb9f5d" style="width:600px;height:200px; margin:0 auto;"></div>Here's the JsFiddle. I have slimmed it down as much as I can and removed almost everything and this weird blue line below the cululative line will not go away.
I thought it might be something to do with the series: {} section. But I think I've tried every permutation I have read on the page.
Solution
the "weird blue line below the cumulative line" is not a trendline.
it is a line connecting the last data point in the data table to the first,
because the data rows are out of order.
the last row is for SEP, where all rows before are for OCT.
so, you either need to move the SEP row to be first in the data table,
or sort the data table before drawing...
data.sort({column: 0}); // sort by date column
see following working snippet...
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart'], 'language': 'en_GB'});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = google.visualization.arrayToDataTable(
[[{"type":"date","label":"Period"},"Order QTY","Revenue","Target (Revenue)","Cumulative","Target (Cumulative)"],["Date(2023, 9, 01)",6,126.3,3733.3333333333335,126.3,112000],["Date(2023, 9, 02)",14,4925.46,3733.3333333333335,5051.76,112000],["Date(2023, 9, 03)",21,16751.65,3733.3333333333335,21803.410000000003,112000],["Date(2023, 9, 04)",20,774.18,3733.3333333333335,22577.590000000004,112000],["Date(2023, 9, 05)",19,7702.63,3733.3333333333335,30280.220000000005,112000],["Date(2023, 9, 06)",26,5711.16,3733.3333333333335,35991.380000000005,112000],["Date(2023, 9, 07)",7,101.71,3733.3333333333335,36093.090000000004,112000],["Date(2023, 9, 08)",7,239.8,3733.3333333333335,36332.89000000001,112000],["Date(2023, 9, 09)",32,8148.77,3733.3333333333335,44481.66,112000],["Date(2023, 9, 10)",14,1256.23,3733.3333333333335,45737.89000000001,112000],["Date(2023, 9, 11)",38,5964.22,3733.3333333333335,51702.11000000001,112000],["Date(2023, 9, 12)",26,1883.59,3733.3333333333335,53585.700000000004,112000],["Date(2023, 9, 13)",21,10981.02,3733.3333333333335,64566.72,112000],["Date(2023, 9, 14)",12,263.63,3733.3333333333335,64830.35,112000],["Date(2023, 9, 15)",8,136.66,3733.3333333333335,64967.01,112000],["Date(2023, 9, 16)",32,1238.84,3733.3333333333335,66205.85,112000],["Date(2023, 9, 17)",27,8939.29,3733.3333333333335,75145.14000000001,112000],["Date(2023, 9, 18)",37,6082.73,3733.3333333333335,81227.87000000001,112000],["Date(2023, 9, 19)",26,7123.39,3733.3333333333335,88351.26000000001,112000],["Date(2023, 9, 20)",29,2875.15,3733.3333333333335,91226.41,112000],["Date(2023, 9, 21)",8,68.99,3733.3333333333335,91295.40000000001,112000],["Date(2023, 9, 22)",5,20,3733.3333333333335,91315.40000000001,112000],["Date(2023, 9, 23)",23,7521.06,3733.3333333333335,98836.46,112000],["Date(2023, 9, 24)",12,494.32,3733.3333333333335,99330.78000000001,112000],["Date(2023, 9, 25)",17,3556.01,3733.3333333333335,102886.79000000001,112000],["Date(2023, 9, 26)",22,1168.64,3733.3333333333335,104055.43000000001,112000],["Date(2023, 9, 27)",17,2480.15,3733.3333333333335,106535.58,112000],["Date(2023, 9, 28)",5,332.6,3733.3333333333335,106868.18000000001,112000],["Date(2023, 9, 29)",10,99.95,3733.3333333333335,106968.13,112000],["Date(2023, 9, 30)",17,2680.08,3733.3333333333335,109648.21,112000],["Date(2023, 8, 30)",0,0,3733.3333333333335,0,112000]] );
var options = {
title : 'Last Month',
seriesType: 'bars',
vAxis: {
title : 'Revenue',
format: '£#,##0'
},
hAxis: {
format: 'd'
},
series: {
0: { // order qty
visibleInLegend: false,
color: '#D3D3D3',
targetAxisIndex: 1
},
1: { // revenue
color: '#cf0800',
},
2: { // revenue target
type: 'line',
visibleInLegend: false,
lineWidth: '1',
color: '#cf0800'
},
3: { // cumulative
type: 'line',
targetAxisIndex: 2
},
4: { // cumulative target
type: 'line',
visibleInLegend: false,
lineWidth: '1',
targetAxisIndex: 2,
color: '#304991',
},
},
vAxes: {
1: {
title: '',
textPosition: 'none'
},
2: {
title: 'Cumulative'
}
},
colors:['#cf0800', '#304991']
};
var chart_div = document.getElementById('chart_div_655b2ffdb9f5d' );
var chart = new google.visualization.ComboChart(chart_div);
// Wait for the chart to finish drawing before calling the getImageURI() method.
/*google.visualization.events.addListener(chart, 'ready', function () {
chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
console.log(chart_div.innerHTML);
});*/
data.sort({column: 0}); // sort by date column
chart.draw(data, options);
}
</script>
<div id="chart_div_655b2ffdb9f5d" style="width:600px;height:200px; margin:0 auto;"></div>- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices