The "date" data type is a continuous type, which will chart against a
continuous axis. You must convert the data to a discrete (string) type to
get the effect you want. Be aware that charts will graph all points
equidistant when using a discrete axis, even when the raw data is not
equidistant (you can see an example of this here
<http://jsfiddle.net/asgallant/Xfx3h/>).
To convert the data to a discrete type, you can use the "view" parameter of
the ChartWrapper containing your chart:
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'
}
}
},
view: {
columns: [{
type: 'string',
sourceColumn: 0,
calc: 'stringify'
}, 1, 2, 3, 4] // make sure the rest of this list of columns
matches what you want to display in the chart
}
});
On Wednesday, July 23, 2014 7:06:00 AM UTC-4, Ankur Dulwani wrote:
>
> 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.
