Hi,
I am trying to create a chart similar to chart in google finance.
Instead of Annotated Timeline graph, I have used Combo Chart and binded it
with controller. I want remove the non trading days from the graph i.e
weekends.
Though I am not passing any data for weekends, graph automatically takes
empty space for that date.
Below is my code for creating a chart:
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['corechart', 'controls'
]});
</script>
<script type="text/javascript">
function drawVisualization() {
{%if data %}
var db_data = {{ data|safe }};
var arr = new Array();
var count = 1
for (var i = 1; i < db_data.length; i++) {
var temp_arr = new Array();
temp_arr[0] =new Date(db_data[i][0])
temp_arr[1] = parseFloat(db_data[i][1])
if (db_data[i][3]!=''){
d = db_data[i][3].replace('"',' ').replace("'"," ").replace(")","
").replace("("," ")
temp_arr[2] =""+count
count = parseInt(count)+1
temp_arr[3] ="<div style='height:150px; width:200px;
overflow:auto'>"+d+"</div>"
}else{
temp_arr[2]=''
temp_arr[3]=''
}
temp_arr[4] =parseFloat(db_data[i][2])/parseFloat(1000000)
arr.push(temp_arr)
}
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard'));
var control = new google.visualization.ControlWrapper({
'controlType': 'DateRangeFilter',
'containerId': 'control',
'options': {
// Filter by the date axis.
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartView': {
'columns': [0,1]
},
// 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
'minRangeSize': 604800000
},
}
});
var chart = new google.visualization.ChartWrapper({
'chartType': 'ComboChart',
'containerId': 'chart',
'options': {
'hAxis': {
'slantedText': false,
'textStyle': {
fontSize: 12
}
},
'vAxes':{
0:{
'title':'Share Price($)',
'format':'$#,###',
'textStyle': {
fontSize: 12
}
},
1:{
'title':'Volume (MM)',
'textStyle': {
fontSize: 12
}
}
},
'chartArea': {
'backgroundColor': {
'stroke': 'black',
'strokeWidth': 1
}
},
'legend': {
'position': 'top',
'maxLines': 3
},
tooltip: {isHtml: true},
'series': {
0: {
'type': 'line',
'targetAxisIndex': 0,
'color':'#310d78'
},
1: {
'type': 'bars',
'targetAxisIndex': 1,
'color':'#b3d9ff'
}
}
}
});
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Stock Price');
data.addColumn({type:'string', role:'annotation', p: {html:true}});
data.addColumn({type:'string', role:'annotationText', p: {html:true
}});
data.addColumn('number', 'Volume');
data.addRows(arr);
dashboard.bind(control, chart);
dashboard.draw(data);
{% endif %}
}
google.setOnLoadCallback(drawVisualization);
</script>
Enter code here...
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
