override point style with column role style not working in combo chart

776 views
Skip to first unread message

Alec Tee

unread,
Feb 17, 2016, 12:09:39 AM2/17/16
to Google Visualization API
Hi,

this is my first time post on this group. feel free to correct me for any mistake made.

i have a combo chart of line chart and bar chart.

i have set the series point size with default color.

but when i try to override the point color with column role style but it not working.

function drawActiveJobsChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Systems');
  data.addColumn('number', 'Counts');
  data.addColumn('number', 'Value');
  data.addColumn({
    type: 'string',
    role: 'style'
  });


  var style = 'point {size: 10; shape-type: square; fill-color: #000000;}';

  data.addRow(['foo', 10, 5, style]);
  data.addRow(['foo', 20, 10, style]);
  data.addRow(['bar', 10, 5, style]);
  data.addRow(['bar', 30, 20, style]);
  data.addRow(['baz', 20, 5, style]);
  data.addRow(['baz', 50, 30, style]);

  //});

  var options = {
    title: 'System Numbers',
    width: 900,
    height: 400,
    allowHtml: true,
    hAxis: {
      title: 'Systems',
      titleTextStyle: {
        color: 'red'
      },
      textStyle: {
        color: 'red'
      }
    },

    series: {
      0: {
        type: "line",
        targetAxisIndex: 0,
        pointShape: 'square',
        pointSize: 10
      },
      1: {
        type: "bars",
        targetAxisIndex: 1
      }
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
google.load('visualization', '1', {
  packages: ['corechart'],
  callback: drawActiveJobsChart
});


Daniel LaLiberte

unread,
Feb 17, 2016, 9:18:50 AM2/17/16
to Google Visualization API
Hi Alec,

The 'style' role always applies to the previous data column, which in your case is the 'bars' series, and for bars, the point size is irrelevant.  It works when I swapped your line and bars series in this example: https://jsfiddle.net/dlaliberte/9pwt8w0v/

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/b9d33d25-6af5-4154-8d19-bd977f7d56ac%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Alec Tee

unread,
Feb 17, 2016, 8:46:36 PM2/17/16
to google-visua...@googlegroups.com
Hi, Daniel,

it's worked.

Thks for ur quick response.

really appreciate.

Thanks again.
Regards,
Alec

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/7JIYmA52MIc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
Reply all
Reply to author
Forward
0 new messages