Problem solved:
I had a CSS class for a generic SVG component with restrictions of
size; however a Google chart is rendered as an SVG component and therefore
inheriting the sizing restrictions. I renamed the generic SVG class and
make it as .clipped class and the problem was solved. And for the last
issue, I used instead of minValue: hAxis.viewWindow.min property.
Regards
El jueves, 4 de junio de 2020, 10:42:03 (UTC-6), Néstor Olimpo Franco
Fierro escribió:
>
> Problem description:
> I have a scatter chart of 1200px width by 400px height, however, when
> rendered into browser is clipped at 600px width. Also the min value for
> hAxis is not respected (is always 0). The method for drawing the chart is
> as follows:
> function dibujaGráfica(tabla,lambda){
> let data= new google.visualization.DataTable();
> data.addColumn('number',lambda?'λ nm': 'px');
> data.addColumn('number','Transmitancia: T');
> data.addRows(obtenRenglones(tabla,lambda));
> let options={
> width:1200,
> height:400,
> title:'Transmitancia',
> hAxis:{title:lambda?'λ nm':'px', minValue:lambda?250:0, maxValue:
> lambda?1200:600,gridlines:{count:13} },
> vAxis:{title:'Transmitancia', minValue:0, maxValue:1},
> interpolateNulls:true,
> series:{
> 0: { lineWidth: 1, pointSize: 0.1 },
> allowPointSelect:true
> },
> };
> chart = new google.visualization.ScatterChart(Γ('gráfica'));
> google.visualization.events.addListener(chart,'select',function(){
> var selección=chart.getSelection();
> if(selección.length){
> let row=selección[0].row;
> pixelTarget.value=data.getValue(row,0);
> }
> });
> chart.draw(data, options);
> }
>
> *lambda* is a boolean variable that indicates if the instrument "is
> calibrated" and switches units from pixels to nanometers as you can see on
> the titles. This is working ok.
> *tabla* it is the data (x & y values for the chart), but it is formatted
> to google chart needs by the method obtenRenglones().
> The container for the chart:
> <div id="gráfica" style="
> width: 1200px; height: 400px;position:relative;top:550px;left:0px;"></div>
>
> Here is the output of the chart... truncated at 600px.
>
>
>
--
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 view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/a93eaa71-0186-4bf4-83f9-499a72c1ff1do%40googlegroups.com.
