Google Column Chart change color for each column with json

JuanSedano

I´m trying to add a different color in each column, i have the following code to draw the chart:

var formDataKinder = {type:"Kinder"};
var jsonDataKinder = $.ajax({
    type: "POST",
    data : formDataKinder,      
    url: "./content/chartsData.php",
    dataType:"json",
    async: false
}).responseText;

var dataKinder = new google.visualization.DataTable(jsonDataKinder);

var optionsKinder = {
    legend: 'none',
    chartArea: {'width': '80%', 'height': '80%'}
};

var chartKinder = new google.visualization.ColumnChart(document.getElementById('Kinderchart'));
chartKinder.draw(dataKinder, optionsKinder);

I add the style in the array but the column do not change:

{"cols": [
        {"id":"","label":"Grado","pattern":"","type":"string"},
        {"id":"","label":"Estudiantes","pattern":"","type":"number"},
        {"id":"","role":"style","type":"string"}
    ],
    "rows": [
        {"c":[{"v":"1ro.","f":null},{"v":8,"f":null},{"p":"color: #A22979","f":null}]},
        {"c":[{"v":"2do.","f":null},{"v":23,"f":null},{"p":"color: #1D63BB","f":null}]},
        {"c":[{"v":"3ro.","f":null},{"v":32,"f":null},{"p":"color: #D72D16","f":null}]}         
]}

Any idea?

Jumpei

Hope this helps.

{"cols": [
        {"id":"","label":"Grado","pattern":"","type":"string"},
        {"id":"","label":"Estudiantes","pattern":"","type":"number"},
        {"id":"","role":"style","type":"string"}
    ],
    "rows": [
        {"c":[{"v":"1ro.","f":null},{"v":8,"f":null},{"v":"#A22979","f":null}]},
        {"c":[{"v":"2do.","f":null},{"v":23,"f":null},{"v":"#1D63BB","f":null}]},
        {"c":[{"v":"3ro.","f":null},{"v":32,"f":null},{"v":"#D72D16","f":null}]}         
]}

You can know the JSON structure of the DataTable by using DataTable.toJSON() after execute google.visualization.arrayToDataTable().
https://developers.google.com/chart/interactive/docs/gallery/columnchart

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Google Column Chart change color for each column with json

분류에서Dev

Slickgrid use a column to contain the color for each row?

분류에서Dev

How to change section color of a stacked bar chart in Google Charts API?

분류에서Dev

Remove blank space above and below Google Charts horizontal column chart

분류에서Dev

Calculated text column for Google Line Chart x-axis not working

분류에서Dev

Value in each column of table

분류에서Dev

Change column to unique

분류에서Dev

Highcharts - column color different from color in legend

분류에서Dev

change data in column with the previous information in another column

분류에서Dev

Passing parameter to each column of datatable

분류에서Dev

Write csv with each list as column

분류에서Dev

WPF DataGrid CustomSort for each Column

분류에서Dev

Change color of label in each repeatbox row

분류에서Dev

Column range chart columns top alignment

분류에서Dev

Highcharts dataGrouping approximation column point color based on column value?

분류에서Dev

How to repeat all column values for each row in another column

분류에서Dev

Move each Cell after column A on new line

분류에서Dev

Carry out a set task for each column with data in it

분류에서Dev

Taking each column as its own list

분류에서Dev

Add specific amount to each column in pandas

분류에서Dev

Create new row for each not empty column

분류에서Dev

Change Google Map marker color with external jQuery

분류에서Dev

how to change contents of one column in a file?

분류에서Dev

How to show a column with the value Zero in Bar chart in Highcharts?

분류에서Dev

Excel 2016: 3D column chart with transparency and no gap

분류에서Dev

How to deselect a column from a chart or graph in iWork Numbers?

분류에서Dev

MYSQL에서 Google Column Chart의 2 개 이상의 열에 데이터를 공급합니다.

분류에서Dev

Don't let me change the css Google Chart

분류에서Dev

Google Sheets formula to add column to array?

Related 관련 기사

  1. 1

    Google Column Chart change color for each column with json

  2. 2

    Slickgrid use a column to contain the color for each row?

  3. 3

    How to change section color of a stacked bar chart in Google Charts API?

  4. 4

    Remove blank space above and below Google Charts horizontal column chart

  5. 5

    Calculated text column for Google Line Chart x-axis not working

  6. 6

    Value in each column of table

  7. 7

    Change column to unique

  8. 8

    Highcharts - column color different from color in legend

  9. 9

    change data in column with the previous information in another column

  10. 10

    Passing parameter to each column of datatable

  11. 11

    Write csv with each list as column

  12. 12

    WPF DataGrid CustomSort for each Column

  13. 13

    Change color of label in each repeatbox row

  14. 14

    Column range chart columns top alignment

  15. 15

    Highcharts dataGrouping approximation column point color based on column value?

  16. 16

    How to repeat all column values for each row in another column

  17. 17

    Move each Cell after column A on new line

  18. 18

    Carry out a set task for each column with data in it

  19. 19

    Taking each column as its own list

  20. 20

    Add specific amount to each column in pandas

  21. 21

    Create new row for each not empty column

  22. 22

    Change Google Map marker color with external jQuery

  23. 23

    how to change contents of one column in a file?

  24. 24

    How to show a column with the value Zero in Bar chart in Highcharts?

  25. 25

    Excel 2016: 3D column chart with transparency and no gap

  26. 26

    How to deselect a column from a chart or graph in iWork Numbers?

  27. 27

    MYSQL에서 Google Column Chart의 2 개 이상의 열에 데이터를 공급합니다.

  28. 28

    Don't let me change the css Google Chart

  29. 29

    Google Sheets formula to add column to array?

뜨겁다태그

보관