How to implement style or properties for Google Charts using JSON data?

Question

What is the correct way to apply styles/properties to individual points for a Google Visualization Chart when using JSON formatted data? Specifically, I am needing to change the color of individual points on the chart depending on the data. For example - with the JSFiddle below, how would you change the first point to another color? I have tried various options using the "p" (properties) fields with no luck. Anyone know how to do this?

https://jsfiddle.net/burtonrhodes/fpd08jrt/14/

Json Data

{
  "cols": [
    {
      "id": "Week",
      "label": "Week",
      "type": "string",
      "pattern": null,
      "p": null
    },
    {
      "id": "Showings",
      "label": "Showings",
      "type": "number",
      "pattern": null,
      "p": null
    }
  ],
  "rows": [
    {
      "c": [
        {
          "v": "1",
          "f": null,
          "p": null
        },
        {
          "v": 2,
          "f": null,
          "p": {"point" : "fill-color: #FF7A06;"}
        }
      ]
    },
    {
      "c": [
        {
          "v": "2",
          "f": null,
          "p": null
        },
        {
          "v": 1,
          "f": null,
          "p": null
        }
      ]
    }
  ]
}

Answer 1

it's the same concept as the other answer when using json,
add a column after the series column for the style,
as follows...

{
  "cols": [
    {
      "id": "Week",
      "label": "Week",
      "type": "string",
      "pattern": null,
      "p": null
    },
    {
      "id": "Showings",
      "label": "Showings",
      "type": "number",
      "pattern": null,
      "p": null
    },
    {
      "id": "Sytle",
      "role": "style",
      "type": "string",
      "pattern": null,
      "p": null
    }
  ],
  "rows": [
    {
      "c": [
        {
          "v": "1",
          "f": null,
          "p": null
        },
        {
          "v": 2,
          "f": null,
          "p": null
        },
        {
          "v": "point {fill-color: #ff7a06;}",
          "f": null,
          "p": null
        }
      ]
    },
    {
      "c": [
        {
          "v": "2",
          "f": null,
          "p": null
        },
        {
          "v": 1,
          "f": null,
          "p": null
        },
        {
          "v": null,
          "f": null,
          "p": null
        }
      ]
    }
  ]
}

the key is to have a property for --> "role": "style"
the style should be the value of the row.

style role reference

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable({
    "cols": [
      {
        "id": "Week",
        "label": "Week",
        "type": "string",
        "pattern": null,
        "p": null
      },
      {
        "id": "Showings",
        "label": "Showings",
        "type": "number",
        "pattern": null,
        "p": null
      },
      {
        "id": "Sytle",
        "role": "style",
        "type": "string",
        "pattern": null,
        "p": null
      }
    ],
    "rows": [
      {
        "c": [
          {
            "v": "1",
            "f": null,
            "p": null
          },
          {
            "v": 2,
            "f": null,
            "p": null
          },
          {
            "v": "point {fill-color: #ff7a06;}",
            "f": null,
            "p": null
          }
        ]
      },
      {
        "c": [
          {
            "v": "2",
            "f": null,
            "p": null
          },
          {
            "v": 1,
            "f": null,
            "p": null
          },
          {
            "v": null,
            "f": null,
            "p": null
          }
        ]
      }
    ]
  });

  let chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, {
    title: "Showings by Week",
    fontName: "Arial",
    fontSize: 14,
    titleTextStyle: {
      color: "#2B557D"
    },
    pointSize: 6,
    colors: ['#C6D9FD'],
    lineWidth: 1,
    curveType: "line",
    vAxis: {
      minValue:0,
      viewWindow: {
        min: 0
      },
      maxValue: 3
    },
    hAxis: {
      maxAlternation: 1,
      //title: 'Week'
    },
    legend:  {
      position: 'none'
    },
    tooltip: {
      isHtml: true
    },
    animation:{
      duration: 1500,
      easing: 'out',
      startup: true
    }
  });
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Answer 2

One way to customise the color, size, and shape of data points on a line chart with Google's Charts API is to do so via JSON, and inline styling.

To apply this technique to your code, you'd first revise the format of your chart data (ie that is supplied in your chart_data_json div) as follows:

<!-- 
The third column allows you to specify optional styling, ie orange fill and 
sizing for the first data point 
-->
<div id="chart_data_json">
[
  [1, 2, "point { size: 4; fill-color: orange; }"], 
  [2, 1, null]
]
</div>

You'd then need to update your charting code so that it can use this new data format. The main idea here is to use the built in google.visualization.arrayToDataTable() method to simplify this. Also note the presense of {'type': 'string', 'role': 'style'}, which specifies that the chart API should interpret data in the third column as styling information:

  /* Parse JSON from data element */
  let jsonData = JSON.parse( $('#chart_data_json').text() );

  /* Define the rules for how charts api should interpret columns in data */
  let dataTable = [
    [{ 'type' :'string'}, 'Y', {'type': 'string', 'role': 'style'}]
  ];

  /* Add parsed json data to data table */
  dataTable = dataTable.concat(jsonData)

  /* Pass json data to arrayToDataTable() */
  var data = google.visualization.arrayToDataTable(dataTable);

For a full working demo, see this jsFiddle. Hope that helps!