CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Leo
Leo

Reputation: 418

Google charts pointSize and lineWidth options - do not change Scatter chart

I am using Gooble Material ScatterChart (since I need dual-Y chart). So I load it with:

google.load('visualization', '1.1', {packages: ['scatter']});

But now it seems that it is impossible to set lineWidth and PointSize options of such charts. Seems that it does not affect anything:

      var options = {
        width: 900,
        height: 500,
      }

What am I doing wrong? Documentation (https://google-developers.appspot.com/chart/interactive/docs/gallery/scatterchart#configuration-options) says there are these properties for ScatterChart. No refinement is given for Material chart. But I do not see any affect and no errors are thrown.

Here is the full code of JS function and a piece of HTML. I have commented out non-Material test portion of code, which is working fine.

1: https://github.com/leoKiddy/google_charts/blob/master/dual-Y_Scatter_PointSize.html "link to GitHub".

Upvotes: 2

Views: 917

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59358

Indeed, it seems pointSize & lineWidth properties could not be applied to google.charts.Scatter object.

But you could consider the following approach for adjusting the chart.

As an alternative for pointSize property,the point size could be specified via CSS:

#chart_div circle {
   r: 3;
}

Regarding lineWidth property, points could be connected using line element once the chart is generated as demonstrated below.

Complete example

google.load('visualization', '1.1', { packages: ['scatter'] });
google.setOnLoadCallback(drawChart);


function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Student ID');
    data.addColumn('number', 'Hours Studied');
    data.addColumn('number', 'Final');

    data.addRows([
      [0, 0, 67], [1, 1, 88], [2, 2, 77],
      [3, 3, 93], [4, 4, 85], [5, 5, 91],
      [6, 6, 71], [7, 7, 78], [8, 8, 93],
      [9, 9, 80], [10, 10, 82], [11, 0, 75],
      [12, 5, 80], [13, 3, 90], [14, 1, 72],
      [15, 5, 75], [16, 6, 68], [17, 7, 98],
      [18, 3, 82], [19, 9, 94], [20, 2, 79],
      [21, 2, 95], [22, 2, 86], [23, 3, 67],
      [24, 4, 60], [25, 2, 80], [26, 6, 92],
      [27, 2, 81], [28, 8, 79], [29, 9, 83]
    ]);



    var options = {
        chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
        },
        width: 900,
        height: 500,
        axes: {
            y: {
                'hours studied': { label: 'Hours Studied' },
                'final grade': { label: 'Final Exam Grade' }
            }
        },
        series: {
            0: { axis: 'hours studied' },
            1: { axis: 'final grade' }
        },
        //pointSize: 10,
        //lineWidth: 1
    };
  
 
    var chart = new google.charts.Scatter(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Scatter.convertOptions(options));
    google.visualization.events.addListener(chart, 'ready', configureChart);
}




function configureChart()
{
    var chartContainer = document.getElementById('chart_div');
    var options = {
       pointSize: 3,
       lineWidth: 1
    };
    drawLines(chartContainer,options);
}



function drawLines(chartContainer,options)
{
    var points = chartContainer.getElementsByTagName('circle');
    var area = {}; 
    for(var i = 0; i < points.length;i++){
       if(i > 0){
           area.start = {'x': points[i-1].getAttribute('cx'), 'y': points[i-1].getAttribute('cy')};
           area.end = {'x': points[i].getAttribute('cx'), 'y': points[i].getAttribute('cy')};
           if(points[i].getAttribute('fill') == points[i-1].getAttribute('fill'))
              drawLine(chartContainer,area,points[i].getAttribute('fill'),'1');
       }
    }
}




function drawLine(chartContainer,area,color,width)
{
    var line = document.createElementNS('http://www.w3.org/2000/svg','line');
    line.setAttribute('x1',area.start.x);
    line.setAttribute('y1',area.start.y);
    line.setAttribute('x2',area.end.x);
    line.setAttribute('y2',area.end.y);
    line.setAttribute('stroke-width',width);
    line.setAttribute('stroke',color);
    var svg = chartContainer.getElementsByTagName('svg')[0];
    svg.appendChild(line);
}

   
#chart_div circle {
     r: 3;
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

Upvotes: 2

Related Questions