Dynamically populating google column charts - javascript

I want to populate a dynamic column chart such that the rows as well the columns are dynamic.
Here is a sample json array that I want to transform:
{"location":"Chain","item_category":"A","delay":"681"},
{"location":"Chennai ","item_category":"A","delay":"286"},{"location":"Bawal","item_category":"A","delay":"339"},{"location":"Haridwar","item_category":"A","delay":"1256"},{"location":"Ludhiana","item_category":"A","delay":"1048"},{"location":"Bawal","item_category":"B","delay":"1"}
There are 3 parameters namely location, item_category and delay where:
Location represents columns. (Varies dynamically)
Delay range should be on Y-axis. (Varies dynamically)
On x-axis they are mapped with items.
So far, I'm able to fetch all the required data but unable to create a graph out of it. I have referred to various libraries such as Google-visualization, Pchart, JPGraph and many more.
Each time I freeze on populating the graph dynamically.
Here is a sample code for populating Google Column Chart:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Item Category', 'Location 1', 'Location 2', 'Location 3,...'],
['item1', 1000, 400, 200,...delay value of location 'n'],
['item2', 1170, 460, 250,...],
['item3', 660, 1120, 300]...],
['item4', 1030, 540, 350]
.
.
]);
//I want to populate this data variable using PHP
var chart = new google.charts.Bar(document.getElementById('my_Chartid'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
These are the links I have referred. I want to populate this data variable in javascript dynamically.
Google column chart dashboard
https://developers.google.com/chart/interactive/docs/gallery/columnchart


first, need to convert json data to normal array
then use a data view to create a column for each category
then aggregate the data and draw the chart
google.charts.load('current', {
callback: function () {
var jsonData = [
{"location":"Chain","item_category":"A","delay":"681"},
{"location":"Chennai ","item_category":"A","delay":"286"},
{"location":"Bawal","item_category":"A","delay":"339"},
{"location":"Haridwar","item_category":"A","delay":"1256"},
{"location":"Ludhiana","item_category":"A","delay":"1048"},
{"location":"Bawal","item_category":"B","delay":"100"}
];
// load chart data
var chartData = [];
jsonData.forEach(function (row, rowIndex) {
// column headings
var columns = Object.keys(row);
if (rowIndex === 0) {
chartData.push(columns);
}
// row values
var chartRow = [];
columns.forEach(function (column, colIndex) {
var chartCell = row[column];
if (colIndex > 1) {
chartCell = parseFloat(chartCell);
}
chartRow.push(chartCell);
});
chartData.push(chartRow);
});
var data = google.visualization.arrayToDataTable(chartData);
// create data view
var view = new google.visualization.DataView(data);
// init column arrays
var aggColumns = [];
var viewColumns = [0];
// build view & agg column for each category
data.getDistinctValues(1).forEach(function (category, index) {
// add view column
viewColumns.push({
calc: function (dt, row) {
if (dt.getValue(row, 1) === category) {
return dt.getValue(row, 2);
}
return null;
},
label: category,
type: 'number'
});
// add agg column
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index + 1,
label: category,
type: 'number'
});
});
// set view columns
view.setColumns(viewColumns);
// agg view
var group = google.visualization.data.group(
view,
[0],
aggColumns
);
var chart = new google.charts.Bar(document.getElementById('chart_div'));
// use group data to draw chart
chart.draw(group);
},
packages:['bar']
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Related

How to filter out duplicates and increment in a Google table-chart

I want to loop through a list of objects and store that result in a Google-chart table. But before I draw the table, I want to go through the list and see if there are any duplicates. If there are any duplicate I want to remove the it, but want to increment the one that isn't removed.
function drawTable()
{
var data = new google.visualization.DataTable();
data.addColumn('string', 'Teamname');
data.addColumn('number', 'Number of resources');
var number = 1;
{% for k, v in teammember %}
{% for object in object_list %}
data.addRows([['{{ object.team.name }}', number]]);
{% endfor %}
{% endfor %}
var table = new google.visualization.Table(document.getElementById('table-div'));
table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}
As you can see here I have one column for the name of a team and one should contain the number of members associated to that team.
So in my for-loop I find all the teams, but how should I build the rest of the code for finding the duplicates, increment, and remove the duplicate.
So a example could look like:
Name - Team-members
Junior Bobcat 3
Team Bobcat 4
Junior Coffe 4

recommend using google's group() method
Takes a populated DataTable object and performs a SQL-like GROUP BY operation, returning a table with rows grouped by the specified column values.
go ahead and load your data table without finding duplicates or incrementing
then use the the group method and use the grouped table to draw the chart
see following working snippet...
google.charts.load('current', {
packages: ['table']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Teamname');
data.addColumn('number', 'Number of resources');
data.addRow(['Junior Bobcat', 1]);
data.addRow(['Team Bobcat', 1]);
data.addRow(['Junior Coffe', 1]);
data.addRow(['Junior Bobcat', 1]);
data.addRow(['Team Bobcat', 1]);
data.addRow(['Junior Coffe', 1]);
data.addRow(['Junior Bobcat', 1]);
data.addRow(['Team Bobcat', 1]);
data.addRow(['Junior Coffe', 1]);
data.addRow(['Team Bobcat', 1]);
data.addRow(['Junior Coffe', 1]);
var dataGroup = google.visualization.data.group(
data,
[0],
[{
column: 1,
type: 'number',
label: data.getColumnLabel(1),
aggregation: google.visualization.data.sum
}]
);
var table = new google.visualization.Table(document.getElementById('table-div'));
table.draw(dataGroup, {showRowNumber: true, width: '100%', height: '100%'});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table-div"></div>

Google Charts: Loop through control (to set different states) and print PNG for each state

I have a single Google Chart with a control. The control is a category filter (one category max) that lets me select which company whose data I want to see. I want to create a function that loops through each company and obtains the PNG for each.
My function only prints the last company's PNG with the loop. I've looked into callbacks and closures but am still struggling to grasp the concept entirely.
Code snippet:
//chart is a ChartWrapper
//companyIdFilter is a ControlWrapper
$(function() {
$("#loopSave").click(function() {
var arrCompanyID = [1,2,3];
for (var i=0; i<arrCompanyID.length; i++) {
var currentID = arrCompanyID[i];
(function(id){
google.visualization.events.addOneTimeListener(chart.getChart(), 'ready', function(){
var initState = { selectedValues: [id] };
companyIdFilter.setState(initState);
var chartImg = chart.getChart().getImageURI();
sendChartToDrive_Src(chartImg, id);
});
companyIdFilter.draw();
})(currentID);
}
})
});
Edit
What I am trying to accomplish is a loop that goes through each company ID and saves + upload the image to Google Drive. My data table is structured to match the source data in Google Sheets. What's happening right now for me is that my function will only save the last chart (in this case, 2). I am following this blog post and it seems like there is a similar issue.
Partial jsfiddle: https://jsfiddle.net/nelsonology/b90cvsnf/12/

rather than depending on the filter's state to change the chart,
recommend setting a view on the chart to only draw the rows for a specific company
you can use data table method --> getFilteredRows
this will return an array of row indexes for a given column value
chart.setView({
// exclude company id column from chart (column 0)
columns: [1, 2],
// include rows for company id
rows: data.getFilteredRows([{
column: 0,
value: id
}])
});
not sure exactly how your code is setup, using a dashboard, etc.
but following is working snippet to illustrate the concept
each image is added to the page for example purposes
click "save image" to see it in action...
google.charts.load('current', {
packages: ['controls', 'corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'id');
data.addColumn('number', 'x');
data.addColumn('number', 'y');
data.addRows([
[1, 1, 1],
[1, 2, 2],
[1, 3, 3],
[2, 21, 1],
[2, 22, 2],
[2, 23, 3],
[3, 41, 1],
[3, 42, 2],
[3, 43, 3]
]);
var companyIdFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'control_div',
options: {
filterColumnLabel: 'id',
ui: {
allowTyping: false,
allowMultiple: false
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
view: {
columns: [1, 2]
}
});
var dashboardContainer = document.getElementById('dashboard_div');
var dashboard = new google.visualization.Dashboard(dashboardContainer);
dashboard.bind(companyIdFilter, chart);
dashboard.draw(data);
var colors = ['cyan', 'magenta', 'lime']; // for example only
$('.save-button').on('click', function () {
var arrCompanyID = data.getDistinctValues(0);
$.each(arrCompanyID, function (i, id) {
chart.setView({
// exclude company id column from chart (column 0)
columns: [1, 2],
// include rows for company id
rows: data.getFilteredRows([{
column: 0,
value: id
}])
});
// for example only
chart.setOption('backgroundColor', colors[i]);
chart.setOption('colors', ['yellow']);
google.visualization.events.addOneTimeListener(chart.getChart(), 'ready', function(){
var chartImg = chart.getChart().getImageURI();
// for example only
$('#image_div').append('<img src="' + chartImg + '" />');
//sendChartToDrive_Src(chartImg, id);
});
chart.draw();
});
});
});
.control {
display: inline-block;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
<div>
<button class="save-button ui-button ui-widget ui-corner-all">
<span class="ui-icon ui-icon-disk"></span><span> Save Image</span>
</button>
<div class="control" id="control_div"></div>
</div>
<div id="chart_div"></div>
</div>
<div id="image_div"></div>

Google ComboChart not showing all data rows

Google ComboChart is not showing all data rows when dealing with larger set of data and when using series type 'bars' and 'lines.'
I'm setting series 2 as type 'bars', but not all data is shown.
If I change series 2 as type 'lines', all data is shown.
Same applies when using simple ColumnChart - if date range is long (~3 years), not all data is shown.
Is there some option that is limiting date range of data?
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([[{label: 'date', type: 'string'}, {label: 'data1', type: 'number'}, {label: 'data2', type: 'number'}, {label: 'data3', type: 'number'}],['12.09.2011',8901.00,2967.00, null],['13.09.2011',17693.36,2948.89, null],['20.09.2011',28900.00,2890.00, null],['22.09.2011',2850.00,2850.00, null],['26.09.2011',2798.65,2798.65, null],['27.09.2011',5789.00,2894.50, null],['28.09.2011',5600.00,2800.00, null],['03.10.2011',7845.01,2615.00, null],['04.10.2011',5222.00,2611.00, null],['12.10.2011',5230.11,2615.06, null],['13.10.2011',2799.00,2799.00, null],['17.10.2011',2870.00,2870.00, null],['21.10.2011',51840.00,2880.00, null],['24.10.2011',39418.00,2815.57, null],['26.10.2011',16812.06,2802.01, null],['27.10.2011',44100.00,2940.00, null],['28.10.2011',20073.14,2867.59, null],['02.11.2011',2815.02,2815.02, null],['08.11.2011',31421.01,2856.46, null],['10.11.2011',2850.00,2850.00, null],['11.11.2011',20509.00,2929.86, null],['16.11.2011',11689.02,2922.26, null],['23.11.2011',5430.01,2715.01, null],['25.11.2011',14700.02,2450.00, null],['30.11.2011',50399.91,2800.00, null],['01.12.2011',14289.98,2858.00, null],['02.12.2011',2900.00,2900.00, null],['05.12.2011',8290.00,2763.33, null],['19.12.2011',2700.00,2700.00, null],['27.12.2011',132600.00,2600.00, null],['30.12.2011',5450.00,2725.00, null],['04.01.2012',23451.00,2605.67, null],['05.01.2012',69216.00,2563.56, null],['11.01.2012',25840.02,2584.00, null],['13.01.2012',20580.00,2572.50, null],['17.01.2012',12999.97,2599.99, null],['23.01.2012',14825.15,2470.86, null],['27.01.2012',7206.00,2402.00, null],['30.01.2012',5000.00,2500.00, null],['31.01.2012',38997.00,2599.80, null],['06.02.2012',31880.00,2656.67, null],['07.02.2012',26843.00,2684.30, null],['09.02.2012',49530.00,2751.67, null],['15.02.2012',70874.00,2834.96, null],['16.02.2012',35756.00,2979.67, null],['20.02.2012',50484.00,2969.65, null],['21.02.2012',5720.01,2860.01, null],['22.02.2012',161239.76,3042.26, null],['23.02.2012',21063.00,3009.00, null],['24.02.2012',22003.84,3143.41, null],['27.02.2012',15778.72,3155.74, null],['29.02.2012',3195.02,3195.02, null],['01.03.2012',63943.57,3197.18, null],['02.03.2012',6300.00,3150.00, null],['05.03.2012',22019.05,3145.58, null],['06.03.2012',9324.00,3108.00, null],['07.03.2012',30841.04,3084.10, null],['12.03.2012',34095.02,3099.55, null],['13.03.2012',12754.98,3188.75, null],['14.03.2012',180724.39,3409.89, null],['15.03.2012',10495.00,3498.33, null],['16.03.2012',19801.00,3300.17, null],['19.03.2012',34633.00,3463.30, null],['20.03.2012',21380.64,3563.44, null],['21.03.2012',44253.10,3404.08, null],['22.03.2012',47515.13,3393.94, null],['26.03.2012',40574.05,3121.08, null],['28.03.2012',6650.00,3325.00, null],['29.03.2012',6354.08,3177.04, null],['02.04.2012',80078.00,3203.12, null],['04.04.2012',3177.00,3177.00, null],['05.04.2012',27029.34,3378.67, null],['06.04.2012',38417.02,3201.42, null],['10.04.2012',31839.99,3184.00, null],['17.04.2012',48711.00,3247.40, null],['23.04.2012',31545.01,3154.50, null],['24.04.2012',9434.10,3144.70, null],['27.04.2012',6487.96,3243.98, null],['02.05.2012',15977.60,3195.52, null],['03.05.2012',12720.26,3180.07, null],['04.05.2012',9300.02,3100.01, null],['07.05.2012',12350.01,3087.50, null],['09.05.2012',3100.00,3100.00, null],['10.05.2012',6260.01,3130.01, null],['15.05.2012',18155.01,3025.84, null],['16.05.2012',6100.00,3050.00, null],['17.05.2012',71447.09,2976.96, null],['18.05.2012',9268.00,3089.33, null],['23.05.2012',17796.03,2966.01, null],['24.05.2012',20349.15,2907.02, null],['28.05.2012',2911.01,2911.01, null],['29.05.2012',26196.06,2910.67, null],['30.05.2012',25290.09,2810.01, null],['04.06.2012',8100.00,2700.00, null],['12.06.2012',2900.00,2900.00, null],['15.06.2012',10884.09,2721.02, null],['28.06.2012',5464.00,2732.00, null],['03.07.2012',13855.00,2771.00, null],['04.07.2012',56000.00,2800.00, null],['05.07.2012',95127.92,2882.66, null],['06.07.2012',29516.40,2951.64, null],['10.07.2012',33587.00,3053.36, null],['11.07.2012',90906.04,3134.69, null],['12.07.2012',9250.00,3083.33, null],['13.07.2012',31683.36,3168.34, null],['17.07.2012',2971.00,2971.00, null],['18.07.2012',29528.90,3280.99, null],['19.07.2012',12800.00,3200.00, null],['23.07.2012',91070.00,3252.50, null],['24.07.2012',9417.03,3139.01, null],['25.07.2012',25760.00,3220.00, null],['26.07.2012',49776.00,3111.00, null],['27.07.2012',13040.00,3260.00, null],['07.08.2012',138298.00,3292.81, null],['09.08.2012',44871.00,3451.62, null],['13.08.2012',158843.40,3694.03, null],['17.08.2012',3989.00,3989.00, null],['20.08.2012',95843.86,3993.49, null],['21.08.2012',153428.78,3934.07, null],['22.08.2012',3999.99,3999.99, null],['23.08.2012',3730.00,3730.00, null],['24.08.2012',40452.28,3677.48, null],['28.08.2012',248299.60,3598.54, null],['29.08.2012',34690.00,3469.00, null],['30.08.2012',10200.00,3400.00, null],['31.08.2012',35000.00,3500.00, null],['03.09.2012',27200.00,3400.00, null],['04.09.2012',6700.00,3350.00, null],['05.09.2012',3350.00,3350.00, null],['06.09.2012',9750.03,3250.01, null],['10.09.2012',23060.01,3294.29, null],['11.09.2012',40686.99,3390.58, null],['12.09.2012',21149.98,3525.00, null],['13.09.2012',32834.98,3648.33, null],['14.09.2012',21503.00,3583.83, null],['18.09.2012',26765.00,3345.63, null],['20.09.2012',53578.19,3348.64, null],['21.09.2012',19878.00,3313.00, null],['28.09.2012',3400.00,3400.00, null],['02.10.2012',76956.98,3498.04, null],['03.10.2012',112000.00,3500.00, null],['05.10.2012',107512.86,3468.16, null],['09.10.2012',7200.00,3600.00, null],['10.10.2012',3677.98,3677.98, null],['12.10.2012',6900.00,3450.00, null],['15.10.2012',6900.00,3450.00, null],['17.10.2012',3448.00,3448.00, null],['18.10.2012',34426.03,3442.60, null],['19.10.2012',3440.01,3440.01, null],['22.10.2012',31400.00,3488.89, null],['24.10.2012',14000.00,3500.00, null],['26.10.2012',10500.00,3500.00, null],['31.10.2012',154911.37,3442.47, null],['05.11.2012',906760.90,3584.04, null],['06.11.2012',7100.00,3550.00, null],['08.11.2012',3560.00,3560.00, null],['09.11.2012',3550.00,3550.00, null],['15.11.2012',3405.00,3405.00, null],['19.11.2012',7000.00,3500.00, null],['22.11.2012',31500.00,3500.00, null],['27.11.2012',28000.10,3500.01, null],['06.12.2012',3434.00,3434.00, null],['11.12.2012',20400.00,3400.00, null],['13.12.2012',10350.00,3450.00, null],['17.12.2012',44625.89,3432.76, null],['18.12.2012',3595.00,3595.00, null],['20.12.2012',89996.00,3749.83, null],['24.12.2012',11106.00,3702.00, null],['27.12.2012',40916.00,3409.67, null],['28.12.2012',51070.30,3404.69, null],['31.12.2012',7345.00,3672.50, null],['03.01.2013',10501.00,3500.33, null],['04.01.2013',84373.40,3515.56, null],['07.01.2013',47438.00,3649.08, null],['08.01.2013',11200.00,3733.33, null],['09.01.2013',30019.00,3752.38, null],['10.01.2013',297316.96,3861.26, null],['11.01.2013',120499.00,3887.06, null],['14.01.2013',52054.06,3718.15, null],['15.01.2013',56911.00,3794.07, null],['16.01.2013',38020.00,3802.00, null],['18.01.2013',4.00,3800.00, null],['21.01.2013',65926.98,3878.06, null],['22.01.2013',42602.00,3872.91, null],['23.01.2013',162577.50,4064.44, null],['24.01.2013',50545.00,4212.08, null],['25.01.2013',25160.00,4193.33, null],['29.01.2013',4160.00,4160.00, null],['30.01.2013',4000.00,4000.00, null],['01.02.2013',26410.00,3772.86, null],['04.02.2013',69103.13,3839.06, null],['05.02.2013',7800.00,3900.00, null],['06.02.2013',214800.00,3977.78, null],['07.02.2013',82827.47,3944.17, null],['08.02.2013',48499.95,4041.66, null],['11.02.2013',92148.92,4188.59, null],['12.02.2013',77960.09,4103.16, null],['14.02.2013',48780.98,4065.08, null],['19.02.2013',28000.00,4000.00, null],['22.02.2013',28050.01,4007.14, null],['25.02.2013',71345.47,4196.79, null],['26.02.2013',8300.00,4150.00, null],['28.02.2013',8102.10,4051.05, null],['05.03.2013',33150.00,4143.75, null],['06.03.2013',234162.79,4257.51, null],['07.03.2013',30983.00,4426.14, null],['13.03.2013',26100.01,4350.00, null],['14.03.2013',108446.01,4337.84, null],['15.03.2013',64800.00,4320.00, null],['18.03.2013',12960.00,4320.00, null],['19.03.2013',51621.00,4301.75, null],['21.03.2013',12862.00,4287.33, null],['22.03.2013',4300.00,4300.00, null],['29.03.2013',51521.00,4293.42, null],['02.04.2013',43000.00,4300.00, null],['03.04.2013',12621.02,4207.01, null],['04.04.2013',4300.00,4300.00, null],['08.04.2013',25210.04,4201.67, null],['09.04.2013',56052.18,4003.73, null],['10.04.2013',8600.00,4300.00, null],['12.04.2013',8110.02,4055.01, null],['15.04.2013',8100.03,4050.02, null],['19.04.2013',85413.69,4270.68, null],['23.04.2013',16640.04,4160.01, null],['29.04.2013',69424.00,4083.76, null],['02.05.2013',175913.06,3909.18, null],['03.05.2013',19037.06,3807.41, null],['07.05.2013',50250.88,3865.45, null],['09.05.2013',3840.00,3840.00, null],['10.05.2013',36000.00,4000.00, null],['13.05.2013',28000.00,4000.00, null],['14.05.2013',36000.00,4000.00, null],['15.05.2013',4000.00,4000.00, null],['16.05.2013',4020.00,4020.00, null],['17.05.2013',40170.01,4017.00, null],['21.05.2013',8000.00,4000.00, null],['22.05.2013',28000.00,4000.00, null],['03.06.2013',18780.10,3756.02, null],['07.06.2013',48851.01,3757.77, null],['11.06.2013',18540.13,3708.03, null],['12.06.2013',11100.00,3700.00, null],['13.06.2013',14400.10,3600.03, null],['14.06.2013',47200.00,3933.33, null],['17.06.2013',24293.91,4048.99, null],['19.06.2013',19800.00,3960.00, null],['20.06.2013',7600.00,3800.00, null],['21.06.2013',22778.00,3796.33, null],['26.06.2013',83600.00,3800.00, null],['27.06.2013',18572.00,3714.40, null],['01.07.2013',38000.00,3800.00, null],['08.07.2013',7400.00,3700.00, null],['09.07.2013',80476.30,3658.01, null],['10.07.2013',14400.42,3600.11, null],['11.07.2013',14798.00,3699.50, null],['12.07.2013',32073.29,3563.70, null],['16.07.2013',3540.00,3540.00, null],['17.07.2013',3611.02,3611.02, null],['22.07.2013',3553924.46,3600.73, null],['26.07.2013',36000.08,3600.01, null],['29.07.2013',51434.10,3598.14, null],['30.07.2013',14779.14,3597.05, null],['31.07.2013',390648.30,3551.35, null],['01.08.2013',3580000.00,3580.00, null],['07.08.2013',31784.05,3531.56, null],['08.08.2013',7200.00,3600.00, null],['13.08.2013',44623.97,3718.66, null],['16.08.2013',3700.00,3700.00, null],['20.08.2013',7280.00,3640.00, null],['22.08.2013',41622.00,3783.82, null],['23.08.2013',86721.00,3770.48, null],['26.08.2013',22430.01,3738.34, null],['28.08.2013',3750.00,3750.00, null],['04.09.2013',19597.31,3919.46, null],['05.09.2013',19150.00,3830.00, null],['06.09.2013',198452.00,3744.38, null],['09.09.2013',3800.00,3800.00, null],['10.09.2013',11697.00,3899.00, null],['11.09.2013',11697.00,3899.00, null],['12.09.2013',11550.00,3850.00, null],['13.09.2013',19649.00,3929.80, null],['16.09.2013',7850.00,3925.00, null],['17.09.2013',250170.00,3848.77, null],['18.09.2013',19479.97,3895.99, null],['19.09.2013',70200.00,3900.00, null],['20.09.2013',19495.97,3899.19, null],['23.09.2013',11738.00,3912.67, null],['24.09.2013',15696.00,3924.00, null],['25.09.2013',157235.00,3835.00, null],['26.09.2013',11401.00,3800.33, null],['27.09.2013',7600.00,3800.00, null],['30.09.2013',7799.88,3899.94, null],['01.10.2013',93620.20,3744.81, null],['02.10.2013',11669.94,3889.98, null],['03.10.2013',7779.96,3889.98, null],['04.10.2013',7500.00,3750.00, null],['07.10.2013',60527.01,3782.94, null],['09.10.2013',3755.00,3755.00, null],['10.10.2013',7700.00,3850.00, null],['11.10.2013',7760.00,3880.00, null],['14.10.2013',11569.98,3856.66, null],['15.10.2013',7759.98,3879.99, null],['16.10.2013',11639.93,3879.98, null],['17.10.2013',38799.85,3879.99, null],['18.10.2013',39317.96,3931.80, null],['21.10.2013',3968.60,3968.60, null],['22.10.2013',7937.10,3968.55, null],['23.10.2013',11925.58,3975.19, null],['24.10.2013',30171.43,3771.43, null],['25.10.2013',15600.00,3900.00, null],['28.10.2013',7940.00,3970.00, null],['29.10.2013',41374.50,3761.32, null],['30.10.2013',10750.00,3583.33, null],['31.10.2013',11195.00,3731.67, null],['04.11.2013',7539.99,3770.00, null],['05.11.2013',3774.00,3774.00, null],['06.11.2013',14603.01,3650.75, null],['07.11.2013',7499.00,3749.50, null],['08.11.2013',3769.99,3769.99, null],['11.11.2013',83914.09,3648.44, null],['12.11.2013',7499.00,3749.50, null],['13.11.2013',21712.02,3618.67, null],['14.11.2013',173380.35,3538.37, null],['15.11.2013',3608.01,3608.01, null],['18.11.2013',21360.00,3560.00, null],['19.11.2013',21000.06,3500.01, null],['20.11.2013',7336.02,3668.01, null],['21.11.2013',3668.01,3668.01, null],['22.11.2013',3686.00,3686.00, null],['25.11.2013',7374.99,3687.50, null],['26.11.2013',7377.98,3688.99, null],['27.11.2013',569800.00,3700.00, null],['28.11.2013',3700.00,3700.00, null],['29.11.2013',7399.98,3699.99, null],['02.12.2013',3699.99,3699.99, null],['03.12.2013',21738.06,3623.01, null],['04.12.2013',3600.00,3600.00, null],['05.12.2013',67496.34,3552.44, null],['06.12.2013',150756.01,3505.95, null],['09.12.2013',13975.00,3493.75, null],['11.12.2013',86653.70,3466.15, null],['12.12.2013',24180.10,3454.30, null],['16.12.2013',7000.00,3500.00, null],['17.12.2013',38500.00,3500.00, null],['18.12.2013',10766.68,3588.89, null],['19.12.2013',3588.80,3588.80, null],['20.12.2013',20945.01,3490.84, null],['23.12.2013',199809.51,3632.90, null],['27.12.2013',36589.04,3658.90, null],['30.12.2013',276531.42,3736.91, null],['31.12.2013',74816.54,3740.83, null],['02.01.2014',7599.98,3799.99, null],['03.01.2014',11273.18,3757.73, null],['07.01.2014',59199.97,3700.00, null],['08.01.2014',635615.72,3591.05, null],['09.01.2014',367406.55,3602.03, null],['10.01.2014',183574.01,3599.49, null],['13.01.2014',28409.03,3551.13, null],['14.01.2014',25010.80,3572.97, null],['15.01.2014',24777.98,3539.71, null],['16.01.2014',145499.41,3548.77, null],['17.01.2014',63248.64,3513.81, null],['20.01.2014',24524.24,3503.46, null],['21.01.2014',67478.99,3551.53, null],['22.01.2014',81572.19,3546.62, null],['23.01.2014',13965.00,3491.25, null],['24.01.2014',56729.01,3545.56, null],['28.01.2014',120344.00,3646.79, null],['29.01.2014',72365.00,3618.25, null],['30.01.2014',113490.05,3546.56, null],['31.01.2014',7195.98,3597.99, null],['03.02.2014',151627.06,3526.21, null],['04.02.2014',77612.08,3527.82, null],['05.02.2014',10740.00,3580.00, null],['06.02.2014',125314.49,3580.41, null],['07.02.2014',7216.00,3608.00, null],['10.02.2014',46310.00,3562.31, null],['11.02.2014',24842.02,3548.86, null],['13.02.2014',103820.00,3580.00, null],['14.02.2014',91770.06,3529.62, null],['17.02.2014',7139.66,3569.83, null],['18.02.2014',10555.03,3518.34, null],['19.02.2014',7099.46,3549.73, null],['20.02.2014',42578.00,3548.17, null],['21.02.2014',7100.00,3550.00, null],['24.02.2014',132156.09,3477.79, null],['25.02.2014',24366.24,3480.89, null],['26.02.2014',739002.95,3405.54, null],['27.02.2014',44459.99,3420.00, null],['28.02.2014',10259.98,3419.99, null],['03.03.2014',59907.02,3328.17, null],['04.03.2014',60088.99,3338.28, null],['05.03.2014',85538.20,3289.93, null],['06.03.2014',89702.32,3203.65, null],['07.03.2014',3328.88,3328.88, null],['10.03.2014',25875.59,3234.45, null],['12.03.2014',35042.30,3185.66, null],['14.03.2014',133441.13,3254.66, null],['17.03.2014',57834.33,3213.02, null],['18.03.2014',16160.10,3232.02, null],['19.03.2014',6580.00,3290.00, null],['21.03.2014',35719.00,3247.18, null],['24.03.2014',83470.00,3210.38, null],['25.03.2014',142265.00,3308.49, null],['26.03.2014',62943.20,3312.80, null],['27.03.2014',16935.66,3387.13, null],['01.04.2014',128422.90,3379.55, null],['03.04.2014',64402.00,3389.58, null],['04.04.2014',30501.00,3389.00, null],['07.04.2014',52819.08,3301.19, null],['09.04.2014',3300.00,3300.00, null],['15.04.2014',80173.13,3206.93, null],['16.04.2014',28502.00,3166.89, null],['18.04.2014',13000.00,3250.00, null],['28.04.2014',25206.15,3150.77, null],['29.04.2014',6387.93,3193.97, null],['30.04.2014',89489.43,3085.84, null],['02.05.2014',36059.00,3004.92, null],['05.05.2014',136634.21,2907.11, null],['08.05.2014',11453.05,2863.26, null],['09.05.2014',5865.99,2933.00, null],['12.05.2014',29144.52,2914.45, null],['13.05.2014',26940.99,2993.44, null],['14.05.2014',11728.12,2932.03, null],['15.05.2014',49405.76,2906.22, null],['16.05.2014',32056.05,2914.19, null],['21.05.2014',55955.83,2797.79, null],['22.05.2014',11243.90,2810.98, null],['26.05.2014',92501.43,2890.67, null],['28.05.2014',5795.98,2897.99, null],['29.05.2014',68444.93,2851.87, null],['02.06.2014',8428.53,2809.51, null],['03.06.2014',28092.47,2809.25, null],['04.06.2014',14085.04,2817.01, null],['06.06.2014',2800.03,2800.03, null],['09.06.2014',5789.60,2894.80, null],['10.06.2014',31968.05,2906.19, null],['11.06.2014',50176.02,2951.53, null],['13.06.2014',67871.18,2827.97, null],['16.06.2014',14198.77,2839.75, null],['18.06.2014',5920.00,2960.00, null],['20.06.2014',29529.70,2952.97, null],['23.06.2014',31367.44,2851.59, null],['24.06.2014',5919.89,2959.95, null],['26.06.2014',316756.81,3045.74, null],['27.06.2014',87289.97,3010.00, null],['30.06.2014',38045.98,2926.61, null],['08.07.2014',25590.53,2843.39, null],['10.07.2014',8607.01,2869.00, null],['11.07.2014',8349.02,2783.01, null],['14.07.2014',68505.15,2740.21, null],['15.07.2014',24554.81,2728.31, null],['17.07.2014',16522.10,2753.68, null],['18.07.2014',17099.28,2849.88, null],['21.07.2014',17076.99,2846.17, null],['23.07.2014',20174.51,2882.07, null],['25.07.2014',36778.00,2829.08, null],['28.07.2014',2890.00,2890.00, null],['29.07.2014',14449.00,2889.80, null],['30.07.2014',11575.70,2893.93, null],['31.07.2014',17328.00,2888.00, null],['04.08.2014',5607.00,2803.50, null],['08.08.2014',41765.45,2784.36, null],['11.08.2014',11389.80,2847.45, null],['14.08.2014',16800.32,2800.05, null],['18.08.2014',13931.28,2786.26, null],['19.08.2014',30429.00,2766.27, null],['21.08.2014',11173.87,2793.47, null],['22.08.2014',19425.00,2775.00, null],['26.08.2014',8482.90,2827.63, null],['27.08.2014',33943.90,2828.66, null],['28.08.2014',13161262.62,2949.63, null],['29.08.2014',29879.80,2987.98, null],['01.09.2014',2980.00,2980.00, null],['03.09.2014',176917.09,2808.21, null],['04.09.2014',279173.18,2848.71, null],['05.09.2014',199712.14,2894.38, null],['08.09.2014',37701.00,2900.08, null],['09.09.2014',254355.79,2857.93, null],['10.09.2014',87778.22,2831.56, null],['11.09.2014',2849.99,2849.99, null],['12.09.2014',86949.85,2804.83, null],['15.09.2014',2847.97,2847.97, null],['16.09.2014',166566.09,2823.15, null],['17.09.2014',5700.00,2850.00, null],['18.09.2014',14150.00,2830.00, null],['19.09.2014',19849.50,2835.64, null],['22.09.2014',14199.99,2840.00, null],['23.09.2014',70005.08,2800.20, null],['24.09.2014',338981.13,2801.50, null],['25.09.2014',221199.51,2799.99, null],['26.09.2014',63699.57,2769.55, null],['29.09.2014',5640.00,2820.00, null],['30.09.2014',2859.90,2859.90, null],['01.10.2014',128800.00,2800.00, null],['02.10.2014',1623278.42,2823.09, null],['03.10.2014',1569624.84,2906.71, null],['06.10.2014',132023.96,3000.54, null],['07.10.2014',41789.14,2984.94, null],['09.10.2014',655929.65,2954.64, null],['10.10.2014',285681.36,3071.84, null],['13.10.2014',341861.28,3025.32, null],['14.10.2014',15102.00,3020.40, null],['15.10.2014',290271.14,2961.95, null],['16.10.2014',127609.42,2900.21, null],['17.10.2014',29225.22,2922.52, null],['20.10.2014',50966.92,2998.05, null],['21.10.2014',9056.97,3018.99, null],['22.10.2014',6035.52,3017.76, null],['23.10.2014',9050.79,3016.93, null],['27.10.2014',230299.48,2915.18, null],['28.10.2014',9020.00,3006.67, null],['29.10.2014',35511.96,2959.33, null],['30.10.2014',2983.00,2983.00, null],['31.10.2014',8910.00,2970.00, null],['03.11.2014',11877.73,2969.43, null],['04.11.2014',51850.97,2880.61, null],['05.11.2014',22965.88,2870.74, null],['06.11.2014',2900.00,2900.00, null],['07.11.2014',5800.00,2900.00, null],['10.11.2014',20040.04,2862.86, null],['11.11.2014',5800.00,2900.00, null],['12.11.2014',8700.00,2900.00, null],['13.11.2014',8612.10,2870.70, null],['14.11.2014',91200.04,2850.00, null],['17.11.2014',62205.00,2827.50, null],['18.11.2014',2869.00,2869.00, null],['19.11.2014',2868.88,2868.88, null],['20.11.2014',282868.12,2800.67, null],['21.11.2014',5736.78,2868.39, null],['24.11.2014',5738.00,2869.00, null],['25.11.2014',475557.92,2764.87, null],['26.11.2014',144687.50,2782.45, null],['27.11.2014',5699.99,2850.00, null],['28.11.2014',189405.05,2785.37, null],['01.12.2014',165319.78,2802.03, null],['02.12.2014',5700.00,2850.00, null],['03.12.2014',37129.59,2856.12, null],['04.12.2014',58133.51,2906.68, null],['08.12.2014',8706.90,2902.30, null],['09.12.2014',22970.00,2871.25, null],['10.12.2014',14364.00,2872.80, null],['11.12.2014',60900.00,2900.00, null],['12.12.2014',14567.80,2913.56, null],['15.12.2014',64048.44,2911.29, null],['16.12.2014',63800.00,2900.00, null],['17.12.2014',50559.78,2974.10, null],['18.12.2014',5920.00,2960.00, null],['19.12.2014',5960.00,2980.00, null],['22.12.2014',8837.40,2945.80, null],['30.12.2014',14764.95,2952.99, null],['31.12.2014',49704.00,2923.76, null],['02.01.2015',14756.00,2951.20, null],['05.01.2015',169712.07,2977.40, null],['07.01.2015',20688.50,2955.50, null],['08.01.2015',30147.51,3014.75, null],['09.01.2015',26680.15,2964.46, null],['12.01.2015',94847.30,2963.98, null],['13.01.2015',14776.32,2955.26, null],['14.01.2015',449995.50,2999.97, null],['15.01.2015',5917.03,2958.52, null],['16.01.2015',5967.98,2983.99, null],['19.01.2015',8844.83,2948.28, null],['21.01.2015',158149.94,2928.70, null],['22.01.2015',5880.00,2940.00, null],['23.01.2015',8771.94,2923.98, null],['26.01.2015',14428.16,2885.63, null],['27.01.2015',5850.00,2925.00, null],['29.01.2015',104246.36,2817.47, null],['03.02.2015',2895.00,2895.00, null],['06.02.2015',14172.35,2834.47, null],['12.02.2015',217521.26,2753.43, null],['16.02.2015',42715.78,2847.72, null],['17.02.2015',149334.86,2871.82, null],['18.02.2015',281230.81,2899.29, null],['20.02.2015',28962.00,2896.20, null],['23.02.2015',59300.00,2965.00, null],['24.02.2015',38544.81,2964.99, null],['26.02.2015',31843.00,2894.82, null],['27.02.2015',8700.00,2900.00, null],['04.03.2015',5880.00,2940.00, null],['06.03.2015',14463.00,2892.60, null],['09.03.2015',58259.90,2913.00, null],['11.03.2015',8841.87,2947.29, null],['12.03.2015',23575.17,2946.90, null],['13.03.2015',26537.45,2948.61, null],['18.03.2015',26418.00,2935.33, null],['24.03.2015',2935.49,2935.49, null],['07.04.2015',48003.08,2823.71, null],['09.04.2015',39740.73,2838.62, null],['15.04.2015',43077.14,2871.81, null],['17.04.2015',28490.54,2849.05, null],['24.04.2015',11399.96,2849.99, null],['27.04.2015',16904.82,2817.47, null],['28.04.2015',19950.00,2850.00, null],['29.04.2015',17190.00,2865.00, null],['30.04.2015',57852.59,2892.63, null],['07.05.2015',86860.32,2801.95, null],['13.05.2015',8625.98,2875.33, null],['14.05.2015',8538.00,2846.00, null],['20.05.2015',11399.96,2849.99, null],['22.05.2015',81368.70,2805.82, null],['26.05.2015',8519.97,2839.99, null],['27.05.2015',2830.00,2830.00, null],['28.05.2015',5699.62,2849.81, null],['29.05.2015',97513.10,2786.09, null],['01.06.2015',19600.00,2800.00, null],['02.06.2015',131054.08,2788.38, null],['08.06.2015',24959.86,2773.32, null],['09.06.2015',30818.28,2801.66, null],['10.06.2015',11199.88,2799.97, null],['11.06.2015',33595.21,2799.60, null],['15.06.2015',75473.63,2795.32, null],['17.06.2015',157289.94,2808.75, null],['18.06.2015',126949.92,2821.11, null],['19.06.2015',36840.70,2833.90, null],['26.06.2015',8669.67,2889.89, null],['29.06.2015',126881.03,2819.58, null],['30.06.2015',28075.22,2807.52, null],['01.07.2015',84318.94,2810.63, null],['02.07.2015',75378.98,2791.81, null],['03.07.2015',5600.00,2800.00, null],['06.07.2015',14000.00,2800.00, null],['07.07.2015',30919.91,2810.90, null],['09.07.2015',11290.23,2822.56, null],['13.07.2015',16987.82,2831.30, null],['14.07.2015',195402.67,2873.57, null],['16.07.2015',14293.25,2858.65, null],['20.07.2015',45217.29,2826.08, null],['22.07.2015',2895.54,2895.54, null],['24.07.2015',17157.52,2859.59, null],['27.07.2015',28253.70,2825.37, null],['28.07.2015',8499.96,2833.32, null],['29.07.2015',90013.22,2812.91, null],['03.08.2015',14094.99,2819.00, null],['06.08.2015',14210.00,2842.00, null],['10.08.2015',50464.71,2803.60, null],['17.08.2015',14079.98,2816.00, null],['20.08.2015',8486.81,2828.94, null],['21.08.2015',14102.88,2820.58, null],['24.08.2015',96942.62,2769.79, null],['25.08.2015',8302.94,2767.65, null],['27.08.2015',13762.00,2752.40, null],['31.08.2015',153443.49,2645.58, null],['01.09.2015',13629.94,2725.99, null],['02.09.2015',13725.00,2745.00, null],['14.09.2015',13500.00,2700.00, null],['17.09.2015',78589.79,2619.66, null],['21.09.2015',13117.87,2623.57, null],['23.09.2015',51440.04,2572.00, null],['24.09.2015',7710.33,2570.11, null],['29.09.2015',17899.00,2557.00, null],['01.10.2015',2598.99,2598.99, null],['02.10.2015',2522.00,2522.00, null],['05.10.2015',41597.98,2599.87, null],['13.10.2015',10512.00,2628.00, null],['15.10.2015',41104.20,2569.01, null],['19.10.2015',170859.86,2588.79, null],['20.10.2015',34069.37,2620.72, null],['21.10.2015',154359.93,2616.27, null],['22.10.2015',2677.34,2677.34, null],['23.10.2015',181317.94,2706.24, null],['26.10.2015',108040.40,2701.01, null],['27.10.2015',617770.82,2709.52, null],['28.10.2015',105427.06,2849.38, null],['30.10.2015',64027.71,2783.81, null],['02.11.2015',61029.97,2774.09, null],['03.11.2015',32868.95,2739.08, null],['09.11.2015',42364.12,2824.27, null],['10.11.2015',8343.21,2781.07, null],['11.11.2015',8489.79,2829.93, null],['12.11.2015',22240.08,2780.01, null],['13.11.2015',27845.00,2784.50, null],['25.11.2015',46729.86,2748.82, null],['30.11.2015',27094.22,2709.42, null],['01.12.2015',5595.94,2797.97, null],['07.12.2015',13694.92,2738.98, null],['14.12.2015',5589.72,2794.86, null],['18.12.2015',47928.95,2662.72, null],['21.12.2015',35093.71,2699.52, null],['28.12.2015',2779.93,2779.93, null],['29.12.2015',2777.70,2777.70, null],['30.12.2015',41141.49,2742.77, null],['04.01.2016',15930.39,2655.07, null],['08.01.2016',2556.20,2556.20, null],['13.01.2016',7740.11,2580.04, null],['14.01.2016',23220.00,2580.00, null],['19.01.2016',63170.18,2526.81, null],['21.01.2016',74712.75,2490.43, null],['25.01.2016',13240.75,2648.15, null],['26.01.2016',26452.05,2645.21, null],['27.01.2016',26488.90,2648.89, null],['29.01.2016',13243.95,2648.79, null],['01.02.2016',18340.00,2620.00, null],['03.02.2016',66195.05,2647.80, null],['04.02.2016',93840.86,2681.17, null],['09.02.2016',2770.00,2770.00, null],['15.02.2016',10760.79,2690.20, null],['16.02.2016',11099.42,2774.86, null],['17.02.2016',8391.90,2797.30, null],['18.02.2016',41917.00,2794.47, null],['22.02.2016',27359.03,2735.90, null],['29.02.2016',28304.73,2830.47, null],['04.03.2016',5670.00,2835.00, null],['08.03.2016',5671.65,2835.83, null],['09.03.2016',11213.08,2803.27, null],['16.03.2016',116990.48,2658.87, null],['18.03.2016',11020.49,2755.12, null],['21.03.2016',5498.98,2749.49, null],['31.03.2016',16209.38,2701.56, null],['01.04.2016',10804.00,2701.00, null],['04.04.2016',101067.99,2731.57, null],['05.04.2016',13500.00,2700.00, null],['06.04.2016',21917.75,2739.72, null],['11.04.2016',48711.06,2706.17, null],['12.04.2016',2700.00,2700.00, null],['15.04.2016',16200.00,2700.00, null],['18.04.2016',8100.00,2700.00, null],['19.04.2016',8058.15,2686.05, null],['21.04.2016',27000.00,2700.00, null],['29.04.2016',2748.87,2748.87, null],['02.05.2016',2665.01,2665.01, null],['04.05.2016',2726.00,2726.00, null],['05.05.2016',49588.99,2754.94, null],['06.05.2016',479562.99,2837.65, null],['09.05.2016',36530.09,2810.01, null],['10.05.2016',25248.00,2805.33, null],['17.05.2016',25200.00,2800.00, null],['19.05.2016',20299.99,2900.00, null],['23.05.2016',17200.00,2866.67, null],['24.05.2016',11626.12,2906.53, null],['30.05.2016',28404.23,2840.42, null],['31.05.2016',39256.86,2804.06, null],['06.06.2016',5700.00,2850.00, null],['13.06.2016',11198.38,2799.60, null],['14.06.2016',2869.37,2869.37, null],['23.06.2016',30304.31,2754.94, null],['24.06.2016',8279.70,2759.90, null],['27.06.2016',2712.46,2712.46, null],['29.06.2016',11200.00,2800.00, null],['14.07.2016',13900.00,2780.00, null],['21.07.2016',8370.00,2790.00, null],['25.07.2016',2715.00,2715.00, null],['29.07.2016',53069.90,2793.15, null],['01.08.2016',24741.00,2749.00, null],['02.08.2016',5580.00,2790.00, null],['11.08.2016',13725.09,2745.02, null],['12.08.2016',2789.99,2789.99, null],['18.08.2016',8250.00,2750.00, null],['22.08.2016',125839.89,2796.44, null],['23.08.2016',25560.00,2840.00, null]]
);
var options = {
title : 'w00t',
vAxis: {title: ''},
hAxis: {title: ''},
seriesType: 'lines',
series: {2: {type: 'bars'}},
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

The problem is in chart_div (div that contains Google Chart) width - it's fixed on 900px, and all that data (columns) does not fit into that width. You have to extend width manually.

Calculation for a cell with values from a cell from another table

I am trying to recreate a excel like feel using HandsOnTable and RuleJS. I am able to put in formulas where the calculations use cell values from the same table but cannot find a way to compute with cells from different tables.
In my example(see http://jsfiddle.net/satyamallyaudipi/3sct2h8q/81/ , I have been trying to compute the value of a Addl Costs cell in lineItem1 Table from Customer $ Targets in "Target" Table as in
=0.5*(B$2 from Target table)
Here is my html
<div id="target_Table" ></div>
<div id="lineItem_Table" ></div>
Here is the relevant javascript code
$(document).ready(function () {
var targetContainer = document.getElementById('target_Table');
var lineItemContainer = document.getElementById('lineItem_Table');
var targetData = [
["","2016","2017","2018","2019","2020","2021","2022","2023","2024","2025","Total"],
["Customer $ Targets:",500000,600000,700000,800000,900000,1000000,1100000,1200000,1300000,1400000,0],
["Customer % Targets:",0.55,0.56,0.57,0.58,0.58,0.59,0.59,0.60,0.6,0.6,0]];
var lineItemData = [
["","Total","2016","2017","2018","2019","2020","2021","2022","2023","2024","2025"],
["Qty","=SUM(C2:L2)",1500,2400,3000,3000,2100,0,0,0,0,0],
["Addl Cost", "=0.005*B$2","=0.005*C$2", ="0.005*D$2", "=0.005*E$2", "=0.005*F$2", "=0.005*G$2", "=0.005*H$2", "=0.005*I$2", "=0.005*J$2", "=0.005*K$2","=0.005*:L$2"]];
^-I would like this to be targetData B column
var target = new Handsontable(targetContainer, {
data: targetData,
....
});
var lineItem1 = new Handsontable(lineItemContainer, {
data: lineItemData,
.....
});
Here is the full jsfiddle http://jsfiddle.net/satyamallyaudipi/3sct2h8q/81/. Is it even possible to do this with HandsOnTable?

Google Charts axis labels

I'm trying to draw a chart in an application where I show data month on month, and would like to add labels to the x-axis to signify the years, but when I try to add a label it automatically adds the year and month cluttering up the look of the application.
var e=new google.visualization.arrayToDataTable([
["Year",county_1,county_2,"National"],
["Jan-10",med_jan_10_1,med_jan_10_2,med_jan_10_3],
["Feb-10",med_feb_10_1,med_feb_10_2,med_feb_10_3],
["Mar-10",med_mar_10_1,med_mar_10_2,med_mar_10_3],
["Apr-10",med_apr_10_1,med_apr_10_2,med_apr_10_3],
["May-10",med_may_10_1,med_may_10_2,med_may_10_3],
["Jun-10",med_jun_10_1,med_jun_10_2,med_jun_10_3],
["Jul-10",med_jul_10_1,med_jul_10_2,med_jul_10_3],
["Aug-10",med_aug_10_1,med_aug_10_2,med_aug_10_3],
["Sept-10",med_sep_10_1,med_sep_10_2,med_sep_10_3],
["Oct-10",med_oct_10_1,med_oct_10_2,med_oct_10_3],
["Nov-10",med_nov_10_1,med_nov_10_2,med_nov_10_3],
["Dec-10",med_dec_10_1,med_dec_10_2,med_dec_10_3],
["Jan-11",med_jan_11_1,med_jan_11_2,med_jan_11_3],
["Feb-11",med_feb_11_1,med_feb_11_2,med_feb_11_3],
["Mar-11",med_mar_11_1,med_mar_11_2,med_mar_11_3],
["Apr-11",med_apr_11_1,med_apr_11_2,med_apr_11_3],
["May-11",med_may_11_1,med_may_11_2,med_may_11_3],
["Jun-11",med_jun_11_1,med_jun_11_2,med_jun_11_3],
["Jul-11",med_jul_11_1,med_jul_11_2,med_jul_11_3],
["Aug-11",med_aug_11_1,med_aug_11_2,med_aug_11_3],
["Sept-11",med_sep_11_1,med_sep_11_2,med_sep_11_3],
["Oct-11",med_oct_11_1,med_oct_11_2,med_oct_11_3],
["Nov-11",med_nov_11_1,med_nov_11_2,med_nov_11_3],
["Dec-11",med_dec_11_1,med_dec_11_2,med_dec_11_3],
["Jan-12",med_jan_12_1,med_jan_12_2,med_jan_12_3],
["Feb-12",med_feb_12_1,med_feb_12_2,med_feb_12_3],
["Mar-12",med_mar_12_1,med_mar_12_2,med_mar_12_3],
["Apr-12",med_apr_12_1,med_apr_12_2,med_apr_12_3],
["May-12",med_may_12_1,med_may_12_2,med_may_12_3],
["Jun-12",med_jun_12_1,med_jun_12_2,med_jun_12_3],
["Jul-12",med_jul_12_1,med_jul_12_2,med_jul_12_3],
["Aug-12",med_aug_12_1,med_aug_12_2,med_aug_12_3],
["Sept-12",med_sep_12_1,med_sep_12_2,med_sep_12_3],
["Oct-12",med_oct_12_1,med_oct_12_2,med_oct_12_3],
["Nov-12",med_nov_12_1,med_nov_12_2,med_nov_12_3],
["Dec-12",med_dec_12_1,med_dec_12_2,med_dec_12_3],
["Jan-13",med_jan_13_1,med_jan_13_2,med_jan_13_3],
["Feb-13",med_feb_13_1,med_feb_13_2,med_feb_13_3],
["Mar-13",med_mar_13_1,med_mar_13_2,med_mar_13_3],
["Apr-13",med_apr_13_1,med_apr_13_2,med_apr_13_3],
["May-13",med_may_13_1,med_may_13_2,med_may_13_3],
["Jun-13",med_jun_13_1,med_jun_13_2,med_jun_13_3],
["Jul-13",med_jul_13_1,med_jul_13_2,med_jul_13_3],
["Aug-13",med_aug_13_1,med_aug_13_2,med_aug_13_3],
["Sept-13",med_sep_13_1,med_sep_13_2,med_sep_13_3],
["Oct-13",med_oct_13_1,med_oct_13_2,med_oct_13_3],
["Nov-13",med_nov_13_1,med_nov_13_2,med_nov_13_3],
["Dec-13",med_dec_13_1,med_dec_13_2,med_dec_13_3],
["Jan-14",med_jan_14_1,med_jan_14_2,med_jan_14_3],
["Feb-14",med_feb_14_1,med_feb_14_2,med_feb_14_3],
["Mar-14",med_mar_14_1,med_mar_14_2,med_mar_14_3],
["Apr-14",med_apr_14_1,med_apr_14_2,med_apr_14_3],
["May-14",med_may_14_1,med_may_14_2,med_may_14_3],
["Jun-14",med_jun_14_1,med_jun_14_2,med_jun_14_3],
["Jul-14",med_jul_14_1,med_jul_14_2,med_jul_14_3],
["Aug-14",med_aug_14_1,med_aug_14_2,med_aug_14_3],
["Sept-14",med_sep_14_1,med_sep_14_2,med_sep_14_3],
]);
var b={
title:"House Price Index by County:",
curveType:"function",
is3D:true,
legend:"top",
width:600,
height:250,
hAxis: {textPosition: 'none' }};
var d=new google.visualization.LineChart(document.getElementById("chart_div"));
d.draw(e,b)
}
Can anyone suggest a way to just have the labels of the years (2010:2014) on the graphs?

You will likely need to loop through the data to change it as you see fit:
var exampleData = ["Jan-10",med_jan_10_1,med_jan_10_2,med_jan_10_3];
for (var i = 0; i < exampleData.length; i++) {
var date = exampleData[i][0];
var year = '20' + date.split('-')[1];
exampleData[i][0] = year;
}

Categories