CODEWITHSUNDEEP
chartsgoogle-visualization
GreyKoshak
GreyKoshak

Reputation: 111

Some properties of the google charts don't work

I use Google Charts to draw 2 series of the math experiment (https://developers.google.com/chart/interactive/docs/gallery/linechart). The chart is good as for me. But I can't change some properties of the object: pointShape, lineWidth и lineDashStyle. I want to show all points and use dash-dotted lines. Could you please help me resolve this problem? Thanks a lot in advance!

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages: ['corechart', 'line']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
          data.addColumn('number', 'Width in pcs');
          data.addColumn('number', 'Test1');
          data.addColumn('number', 'Test2');

      data.addRows([
        [250,  1.097438, 4.080916],
        [500,  1.915228, 7.398398],
        [750,  2.386182, 9.241248],
        [1000, 2.692818, 10.348892],
        [1250, 2.86978,  11.033738],
        [1500, 3.091832, 11.663874],
        [1750, 3.262076, 12.256484],
        [2000, 3.279888, 12.21683]
      ]);

      var options = {
        chart: {
          title: 'Perfomance testing depending on width (height = 1080, n = 250, 20 iterations)',  
        width: 900,
        height: 500,
        lineWidth: 4,
        series: {
          0: { lineDashStyle: [4, 4] },
          1: { lineDashStyle: [4, 4] }
        }
        axes: {
          x: { 0: {side: 'bottom'} }
        },
        vAxes: {
            // Adds titles to each axis.
            0: {title: 'Time (secs)', titleTextStyle: {color: 'black'}}
        },
        hAxes: {
            // Adds titles to each axis.
            0: {title: 'Width (pics)', titleTextStyle: { color: 'black' } }
        },
        legend: {position: 'top', textStyle: {color: 'black', fontSize: 15}}
      };

      var chart = new google.charts.Line(document.getElementById('line_top_x'));

      chart.draw(data, google.charts.Line.convertOptions(options));
    }
  </script>
</head>
<body>
  <div id="line_top_x"></div>
</body>
</html>

Upvotes: 1

Views: 132

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

you're using google's Material chart

google.charts.Line

there are many options that are not supported by Material charts, see...
Tracking Issue for Material Chart Feature Parity #2143

to use those options, you will need to use the Classic chart

google.visualization.LineChart

for what it's worth, there is an option for Classic charts...

theme: 'material'

Upvotes: 1

Related Questions