As the title says, sometimes it loads fine, sometimes it doesn't show at all. (Applies to all browsers)
When it loads:
http://puu.sh/hpkrH/03adef7313.png
When it doesn't:
http://puu.sh/hpkjT/097c9e3e67.png
This code is loaded into the page just after closing the body tag but before closing the html tag.
var rankedSolo5 = {
GamesPlayed: 0,
Wins: 0,
Losses: 0,
WinPercent: 0,
Assists: 0,
Kills: 0,
MinKills: 0,
NeutralMinKills: 0,
TurretsKilled: 0,
AverageKills: 0,};
$.ajax({
url: 'https://'+summonerRegion+'.api.pvp.net/api/lol/'+summonerRegion+'/v1.4/summoner/by-name/'+summonerName+'?api_key=76555fa3-4e44-4b11-8692-f2cfad2fd30d',
dataType: 'json',
//If summoner doesn't exist show error
error : function(jqXHR, textStatus, errorThrown) {
if(jqXHR.status == 404 || errorThrown == 'Not Found'){
$(".statsValue").html(summonerError);}},
//If summoner is found, find Id of summoner
success: function(response) {
nameToId = response;
console.log(nameToId);
console.log(nameToId[summonerName].name);
$('#summonerProfileName').html(nameToId[summonerName].name);
summonerId = nameToId[summonerName].id;
$.ajax({
url: 'https://'+summonerRegion+'.api.pvp.net/api/lol/'+summonerRegion+'/v1.3/stats/by-summoner/'+summonerId+'/summary?season=SEASON2015&api_key=76555fa3-4e44-4b11-8692-f2cfad2fd30d',
dataType: 'json',
//When Id is found, retrieve Stats
success: function(response) {
if (summonerName != undefined){
jsonData = response;
console.log(jsonData);
//Ranked Solo 5v5 Stats
rankedSolo5["Wins"] = jsonData.playerStatSummaries[5].wins;
rankedSolo5["Losses"] = jsonData.playerStatSummaries[5].losses;
rankedSolo5["Assists"] = jsonData.playerStatSummaries[5].aggregatedStats.totalAssists;
$("#rankedAssistsSolo5 .statsValue").html(rankedSolo5["Assists"]);
rankedSolo5["Kills"] = jsonData.playerStatSummaries[5].aggregatedStats.totalChampionKills;
$("#rankedKillsSolo5 .statsValue").html(rankedSolo5["Kills"]);
rankedSolo5["MinKills"] = jsonData.playerStatSummaries[5].aggregatedStats.totalMinionKills;
$("#rankedMinKillsSolo5 .statsValue").html(rankedSolo5["MinKills"]);
rankedSolo5["NeutralMinKills"] = jsonData.playerStatSummaries[5].aggregatedStats.totalNeutralMinionsKilled;
$("#rankedNeutralMinKillsSolo5 .statsValue").html(rankedSolo5["NeutralMinKills"]);
rankedSolo5["TurretsKilled"] = jsonData.playerStatSummaries[5].aggregatedStats.totalTurretsKilled;
$("#rankedTurretsKilledSolo5 .statsValue").html(rankedSolo5["TurretsKilled"]);
//Ratios, Etc...
rankedSolo5["GamesPlayed"] = rankedSolo5["Wins"]+rankedSolo5["Losses"];
$("#rankedGamesPlayedSolo5 .statsValue").html(rankedSolo5["GamesPlayed"]);
rankedSolo5["WinPercent"] = Math.floor(rankedSolo5["Wins"]*(100/(rankedSolo5["Wins"]+rankedSolo5["Losses"])))+"%";
$("#rankedWinPercentSolo5").html(rankedSolo5["WinPercent"]);
//Draw the charts after data is collected
chart();
}
}
});
}
});}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Stats');
data.addColumn('number', 'Stats');
data.addRows([
['Wins', rankedSolo5["Wins"]],
['Losses', rankedSolo5["Losses"]],
]);
var data2 = google.visualization.arrayToDataTable([
['M/T Ratio', 'Minion Kills/Turret Kills'],
['Minion Kills', rankedTeam5["MinKills"]],
['Turret Kills', rankedTeam5["TurretsKilled"]]
]);
var options = {
width: 200,
height: 200,
colors: ['#337ab7', '#ff5e5e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
pieHole: 0.4,
backgroundColor: {fill: 'none'},
pieSliceBorderColor:"transparent",
legend: 'none',
chartArea: {'width': '85%', 'height': '85%'},
pieSliceText: 'label',
fontSize: 11,
};
setTimeout(function(){
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
var chart2 = new google.visualization.PieChart(document.getElementById('donutchart2'));
chart2.draw(data2, options);
var chart3 = new google.visualization.PieChart(document.getElementById('donutchart3'));
chart3.draw(data2, options);
var chart4 = new google.visualization.PieChart(document.getElementById('donutchart4'));
chart4.draw(data2, options);
},250);
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Stats');
data.addColumn('number', 'Stats');
data.addRows([
['Wins', rankedSolo5["Wins"]],
['Losses', rankedSolo5["Losses"]],
]);
var data2 = google.visualization.arrayToDataTable([
['M/T Ratio', 'Minion Kills/Turret Kills'],
['Minion Kills', rankedTeam5["MinKills"]],
['Turret Kills', rankedTeam5["TurretsKilled"]]
]);
var options = {
width: 200,
height: 200,
colors: ['#337ab7', '#ff5e5e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
pieHole: 0.4,
backgroundColor: {fill: 'none'},
pieSliceBorderColor:"transparent",
legend: 'none',
chartArea: {'width': '85%', 'height': '85%'},
pieSliceText: 'label',
fontSize: 11,
};
setTimeout(function(){
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
var chart2 = new google.visualization.PieChart(document.getElementById('donutchart2'));
chart2.draw(data2, options);
var chart3 = new google.visualization.PieChart(document.getElementById('donutchart3'));
chart3.draw(data2, options);
var chart4 = new google.visualization.PieChart(document.getElementById('donutchart4'));
chart4.draw(data2, options);
},250);
}
My head tag looks like this:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
Any help figuring this out would be greatly appreciated.
for some reason a google chart won't consistently render if you don't set the width and height on the actual DOM container (i.e. it's not enough to rely on the width and height settings in options)
Related
Is it possible to make a timeline like this one with google apps?
I have built an standard web app but there is a problem that there is too many data for whole timeline so it is hard to see some blocks.... I was thinking about zoom option but have no idea how I can do this.
Here you have my code so far:
array from timelineData function looks like that:
[["00G080","NA14599","2021-01-08T21:25:00.000Z","2021-01-12T14:22:00.000Z"],["00G080","NA14599","2021-01-12T14:22:00.000Z","2021-01-12T15:19:00.000Z"]...]
gs:
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate();
}
function timelineData(){
const ss = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/d/1KzaKe9ShAZZAlK3CQC-UmrKzZXghNKAAx_pDHFX3YLI/edit#gid=0');
const srcSheet = ss.getSheetByName("Array");
const srcValues = srcSheet.getRange(2, 1, srcSheet.getLastRow()-1, 4).getDisplayValues()
const newAr = srcValues.map(r=>[r[0],r[1], new Date(r[2]), new Date(r[3])]);
const arr = JSON.stringify(newAr);
return arr
}
html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>機械別工程残</h1>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(getData);
function getData(){
google.script.run.withSuccessHandler(drawChart).timelineData();
}
function drawChart(dane) {
//console.log(dane);
const obj = JSON.parse(dane);
const newAr = obj.map(r=>[r[0],r[1], new Date(r[2]), new Date(r[3])]);
var container = document.getElementById('chart');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: '機械' });
dataTable.addColumn({ type: 'string', id: 'オーダー' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows(newAr);
var options = {
colors: ['#cbb69d', '#603913', '#c69c6e', '#e743f0', '#f04343', '#f0e443', '#b9f043', '#4ff043', '#43f0d9', '#435df0'],
// timeline: { colorByRowLabel: true}
};
chart.draw(dataTable, options);
}
</script>
<div id="chart" style="height: 600px;"></div>
</body>
</html>
My timeline looks like this:
Thanks to advice from WhiteHat I was able to put working code.
Hope someone will find it useful
code.gs
function doGet() {
var template = HtmlService.createTemplateFromFile('index3');
return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function timelineData(){
const ss = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/d/1KzaKe9ShAZZAlK3CQC-UmrKzZXghNKAAx_pDHFX3YLI/edit#gid=0');
const srcSheet = ss.getSheetByName("Array");
const srcValues = srcSheet.getRange(2, 1, srcSheet.getLastRow()-1, 4).getDisplayValues()
const newAr = srcValues.map(r=>[r[0],r[1], new Date(r[2]), new Date(r[3])]);
const arr = JSON.stringify(newAr);
return arr
}
html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>機械別工程残</h1>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline","controls"],'language': 'ja'});
google.charts.setOnLoadCallback(getData);
function getData(){
google.script.run.withSuccessHandler(drawChart).timelineData();
}
function drawChart(dane) {
//console.log(dane);
const obj = JSON.parse(dane);
const newAr = obj.map(r=>[r[0],r[1], new Date(r[2]), new Date(r[3])]);
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard')
);
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control',
options: {
filterColumnIndex: 3,
ui: {
minRangeSize: (60 * 60 * 1000),
chartType: 'TimeLine',
chartOptions: {
width: 900,
height: 70,
chartArea: {
width: '100%',
height: '80%'
},
hAxis: {
baselineColor: 'none'
}
},
chartView: {
columns: [2, 3]
}
}
}
});
google.visualization.events.addListener(control, 'error', function (error) {
console.log('error: ' + error.id + ' - ' + error.message);
google.visualization.errors.removeError(error.id);
});
var chart = new google.visualization.ChartWrapper({
chartType: 'Timeline',
containerId: 'chart',
options: {
width: 985,
height: 600,
chartArea: {
width: '100%',
height: '80%'
},
tooltip: {
isHtml: true
}
},
view: {
columns: [0, 1, 2, 3]
}
});
var data = new google.visualization.DataTable();
data.addColumn({ type: 'string', id: 'Student' });
data.addColumn({ type: 'string', id: 'Event Type' });
data.addColumn({ type: 'datetime', id: 'Start' });
data.addColumn({ type: 'datetime', id: 'End' });
data.addRows(newAr);
dashboard.bind(control, chart);
dashboard.draw(data);
}
</script>
<div id="dashboard">
<div id="chart" style="width: 1050px; left:30px" ></div>
<div>範囲設定</div>
<div id="control" style="width: 1050px; left:30px"></div>
</div>
</body>
</html>
I have included 2 charts in my page one is bar chart and gauge chart using google chart. The bar chart displayed perfectly but not matter how I tweaked the code the 'gauge' chart wont be displayed.
these are the javascript that I included
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="https://apis.google.com/js/platform.js?onload=myFunc" async defer></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
here is the java script code to display the chart. I am taking the data from the database to be displayed.
<script type="text/javascript">
// Global variable to hold data
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
</script>
<script type="text/javascript">
$(function () {
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'pageUtamaDataEntry.aspx/GetChartData',
data: '{}',
success:
function (response) {
drawchart(response.d);
},
error: function () {
alert("Error loading data! Please try again.");
}
});
})
function drawchart(dataValues) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'BranchName');
data.addColumn('number', 'TotalDelivery');
data.addRow([dataValues[0].BranchName,
dataValues[0].TotalDelivery]);
var barchart_options = { title: 'Rekapitulasi Pendapatan tahun berjalan',
vAxis: { title: 'BranchName' },
hAxis: { title: 'TotalDelivery' },
width: 550,
height: 400,
legend: 'none',
seriesType: 'bars',
series: { 5: { type: 'line'} }
};
var barchart = new google.visualization.ColumnChart(document.getElementById('barchart_div'));
barchart.draw(data, barchart_options);
var gauge_options= { title: 'whatsoever',
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var gaugechart = new google.visualization.Gauge(document.getElementById('chart_div'));
gaugechart.draw(data, gauge_options);
setInterval(function () {
data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
chart.draw(data, options);
}, 13000);
setInterval(function () {
data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
chart.draw(data, options);
}, 5000);
setInterval(function () {
data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
chart.draw(data, options);
}, 26000);
}
</script>
when I debug the javascript it says
Uncaught TypeError: google.visualization.Gauge is not a constructor
Thank you for your time
You need to load gauge chart type before using it. Change the following line
google.charts.load('current', { 'packages': ['corechart'] });
to
google.charts.load('current', { 'packages': ['corechart', 'gauge'] });
Hey to all i have the code below for a google pie chart that takes data from a jsontable and i want when i click a slice to redraw the chart based on the selection.
I have the code below and i'm at a loss how to proceed
<head>
<style>
div.absolute {
position: absolute;
top: 120px;
}
</style>
<link href="style.css" rel="stylesheet" />
<!--Auto refresh code -->
<meta http-equiv="refresh" content="<?php echo $sec?>;URL='<?php echo $page?>'">
<!--Load the Ajax API-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://www.google.com/jsapi"></script>
<script src="http://www.google.com/jsapi?ext.js"></script>
<script src="https://rawgit.com/louisremi/jquery-smartresize/master/jquery.throttledresize.js"></script>
<script>
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(initChart);
$(window).on("throttledresize", function (event) {
initChart();
});
function initChart() {
var options = {
title: 'Arrived Today (Email)',
width: '100%',
height: '100%',
sliceVisibilityThreshold: 0,
pieSliceText: 'percentage',
pieStartAngle: 100,
//is3D: 'true',
pieHole: 0.3,
slices: {
1: {offset: 0.2},
2: {offset: 0.3},
3: {offset: 0.4},
4: {offset: 0.5},
5: {offset: 0.6},
},
//slices: {0: {color: 'green'}, 1: {color: 'blue'}},
pieSliceBorderColor: 'black',
legend: 'right',
legendTextStyle: {fontSize: 15},
pieSliceText: 'value' ,
titleTextStyle: {
color: '333333',
fontName: 'Arial',
fontSize: 14 ,
align:'right'
},
chartArea : { left: 35 }
};
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var data2 = new google.visualization.DataTable(<?=$jsonTable2?>);
var total = google.visualization.data.group(data,
[{
type: 'boolean',
column: 0,
modifier: function () {return true;}
}],
[{
type: 'number',
column: 1,
aggregation: google.visualization.data.sum
}]
);
document.getElementById("demo").innerHTML =total.getValue(0,1);
data.addRow(['Total: ' + total.getValue(0, 1), 0]);
drawChart(data, options)
}
function drawChart(data, options) {
var chart = new google.visualization.PieChart(document.getElementById('chart'));
chart.draw(data, options);
google.visualization.events.addListener(chart, 'select', selectHandler);
var label1 = data.pieSliceText('label');
// The selection handler.
// Loop through all items in the selection and concatenate
// a single message from all of them.
function selectHandler() {
var selection = chart.getSelection();
if (selection.length) {
var pieSliceLabel = data.getValue(selection[0].row, 0);
if (pieSliceLabel = 'External')
chart.draw(data2, options);
}
}
}
</script>
</head>
<body>
<h2 align="right"><font size="5">emails Arrived Today</font>
<div id="demo"></div>
</h2>
<div id="chart"></div>
</body>
thanks in advance for any help :)
function initChart() {
....
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var data2 = new google.visualization.DataTable(<?=$jsonTable2?>);
....
}
function drawChart(data, options) {
google.visualization.events.addListener(chart, 'select', selectHandler);
function selectHandler() {
var selection = chart.getSelection();
if (selection.length) {
var pieSliceLabel = data.getValue(selection[0].row, 0);
if (pieSliceLabel = 'External')
chart.draw(data2, options);
}
}
}
Everything looks fine, except the scope of your variable data2.
You initiate it in your function initChart(), and then try to use it in a sub-function from drawChart().
Either you define your var data2 outside any javascript functions, or you pass it as a parameter when you call drawChart.
When I hover over a point in my line chart/graph I get only the Y value and not the X value.
What I get:
36
Speed: 120
What I want:
Distance: 36
Speed: 120
Code:
<script type="text/javascript" src="https://www.google.com/jsapi" ></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', "Distance");
data.addColumn('number', "Speed");
data.addRows(<?php echo json_encode($DistanceSpeedArray, JSON_NUMERIC_CHECK); ?>);
var options = {
focusTarget: 'category',
backgroundColor: 'none',
chartArea: {
backgroundColor: 'transparent',
left: 40,
top: 40,
width: 1200,
height: 350
},
legend: {
position: 'top'
},
hAxis: {title: 'Distance (KM)', titleTextStyle: {color: 'black'}},
//vAxis: {title: 'Speed (KM/H)', titleTextStyle: {color: 'black'}},
colors: ['green'],
crosshair: {
orientation: 'vertical'
},
animation: {
startup: true,
duration: 5000
},
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
The above code is a complete code including the focusTarget: 'category' which still returns only the Y title. I have also included a screenshot.
You may apply a format to the Distance-column
new google.visualization.PatternFormat("Distance: {0}")
.format(data, [0], 0);
https://jsfiddle.net/6tf2fatz/
Basically you need to add focusTarget: 'category' for focus on a grouping of all data points along the major axis.
Try below code,
<script type="text/javascript" src="https://www.google.com/jsapi" ></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Distance');
data.addColumn('number', "Speed");
data.addRows(<?php echo json_encode($DistanceSpeedArray, JSON_NUMERIC_CHECK); ?>);
...
var options = { focusTarget: 'category' };
var chart = new google.visualization.LineChart(document.getElementById('your_div_chart'));
chart.draw(data, options);
}
I'm having trouble coming up with a function that will animate a single column bar inside of my chart when I use a slider going back and forth..left and right.. I have read the animation docs on the Google Charts API documentation, but I am having a hard time understanding what I need to do.
Here is my code so far. Where would I start in figuring out how to animate just one of my bars using a slider I have made in titanium? I call the function updateChart() from my app.js file using the evalJS function. I have verified it works, by doing a console.log when my slider goes back and forth. I just can't seem to wrap my head around it how to apply this to animating a single column bar. Any thoughts are appreciated.
Set up Google Charts on my html page.
<script type="text/javascript" src ="https://www.google.com/jsapi" > </script>
<script type="text/javascript ">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Importance');
data.addColumn('number', 'Earning');
data.addColumn({type: 'string', role: 'style'});
data.addRows([['',5,'#000000'], ['',5,'#ffffff'],['',5,'#666666'],['', 5,'#cccccc']]);
var options =
{
width: 200,
height: 240,
legend: {
position: 'none'
},
chartArea: {
backgroundColor: 'none'
},
bar: {
groupWidth: '100%'
},
animation: {
duration: 1000,
easing: 'out'
}
};
function updateChart() {
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
EDITED CODE:
<script type="text/javascript" src ="https://www.google.com/jsapi" > </script>
<script type="text/javascript ">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Importance');
data.addColumn('number', 'Earning');
data.addColumn({type: 'string', role: 'style'});
data.addRows([['',5,'#000000'], ['',5,'#ffffff'],['',5,'#666666'],['', 5,'#cccccc']]);
var options = {
width: 200,
height: 240,
legend: {
position: 'none'
},
chartArea: {
backgroundColor: 'none'
},
bar: {
groupWidth: '100%'
},
animation: {
duration: 1000,
easing: 'out'
}
};
function updateChart(value) {
data.setValue(0, 1, value);
chart.draw(data, options);
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Slider Hook Code in separate file (app.js) Titanium Platform
var sliderBarOne = Titanium.UI.createSlider({
top: '310',
left: '610',
min: '0',
max: '10',
width: '37%',
value: '5',
backgroundImage: 'assets/sliderBar.png'
});
sliderBarOne.addEventListener('change', function(e) {
chartView.evalJS("updateChart('" + e.value + "');");
});
You need to hook up an event listener for your slider that calls the updateChart function. The updateChart function should get the value from the slider and change the value in the DataTable, then cal the chart's draw method. How you hook up an event listener to the slider is going to depend on the library you are using for the slider. Here's some example code that assumes your slider object has a change method to set a change event handler and a `getValue method to get the value of the slider:
[edit: added in your slider code]
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Importance');
data.addColumn('number', 'Earning');
data.addColumn({type: 'string', role: 'style'});
data.addRows([
['',5,'#000000'],
['',5,'#ffffff'],
['',5,'#666666'],
['', 5,'#cccccc']
]);
var options = {
width: 200,
height: 240,
legend: {
position: 'none'
},
chartArea: {
backgroundColor: 'none'
},
bar: {
groupWidth: '100%'
},
animation: {
duration: 1000,
easing: 'out'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
function updateChart(value) {
data.setValue(0, 1, value);
chart.draw(data, options);
}
// create slider
var sliderBarOne = Titanium.UI.createSlider({
top: '310',
left: '610',
min: '0',
max: '10',
width: '37%',
value: '5',
backgroundImage: 'assets/sliderBar.png'
});
sliderBarOne.addEventListener('change', function(e) {
updateChart(e.value);
});
chart.draw(data, options);
}