Stacked Bar chart with a different colors

OL Connect Professional Designer
1

Hello - I am trying to use a stacked bar chart and change the color of the two data points. I can change the color of each bar (as if it were one) but it doesn’t seem to be picking up the second data point. It seems to read it as one. My code I have is below. I am trying to show values1 as #232c68 and values2 as#6da141. The color #9455a2 was just being used to see if and what changes there were based on the coding. With this code my result is ‘Today’ is all green and 1 Yr Before is all purple. the orange and yellow are the default colors. I left them so you can see the two different data points.

Can anyone help me?

if (results.length) {

// The data-chartdata attribute only holds the key value pairs of the data

var chartData = ;

chartData.push({‘value_label’ : ‘Today’,
‘values_1’ : record.tables[‘Longitudinal’][0].fields[‘EligToday’],“color”:“#232c68”,
‘values_2’ : record.tables[‘Longitudinal’][0].fields[‘PartToday’],“color”:“#6da141”});

chartData.push({‘value_label’ : ‘1 Yr Before’,
‘values_1’ : record.tables[‘Longitudinal’][0].fields[‘EligYr1’],“color”:“#9455a2”,
‘values_2’ : record.tables[‘Longitudinal’][0].fields[‘PartYr1’]});

chartData.push({‘value_label’ : ‘2 Yr Before’,
‘values_1’ : record.tables[‘Longitudinal’][0].fields[‘EligYr2’],
‘values_2’ : record.tables[‘Longitudinal’][0].fields[‘PartYr2’]});

chartData.push({‘value_label’ : ‘3 Yr Before’,
‘values_1’ : record.tables[‘Longitudinal’][0].fields[‘EligYr3’],
‘values_2’ : record.tables[‘Longitudinal’][0].fields[‘PartYr3’]});

results.attr(‘data-chartData’, JSON.stringify(chartData));

var graphsData = {

  'categoryField' : 'value_label',

  'graphs' : [

  {'title' : '', 'valueField':'values_1',"ColorField":"color"},

  {'title' : '', 'valueField':'values_2',"ColorField":"color"}]

};

results.attr(‘data-graphsdata’, JSON.stringify(graphsData));

}

var params = JSON.parse(results.attr(“data-params”));

params.amValueAxis.color = “white”;
params.amGraph.colorField = “color”;
results.attr(“data-params”, JSON.stringify(params));

2

Would you be willing to share the template and data so I can give it look?

We improved the Business Graphics feature in the oncoming 2018.1. Better insert wizard with chart and data preview, new JSON Source tab in the Chart Properties dialog (allows you to verify the configuration and add features not available in the user interface), full amChart API support, set colors per serie via the user interface.

Erik

3

Hi Erik - I don’t have this exact sample as I had to change how I was dong things because I couldn’t get this to work at all. I did try to recreate the graph though with my data. I hope this helps. I have one graph with no edits and the other is the one I tried to edit with different colors. https://learn.objectiflune.com/qa-blobs/8720270286103978811.zip

Let me know if you have trouble with the file.

Thank you!!!

4

Hello Erik,

I am wondering if you had a chance to look at this yet? Is there any hope for it?

thanks

5

Yes, there is hope but it requires the oncoming 2018.1 release (eta early may). Attached a screendump of the graph in 2018.1 and below a copy of the expanded barcode script.

As mentioned 2018.1 has a revamped Business Graphics feature with full amChart API support. One could even copy and paste pie, line and bar chart configurations taken from online chart maker found on the amcharts website. Online Chart Maker | amCharts

Erik

Connect user script:

if (results.length) {

var chartData = [];
chartData.push({
  'value_label' : 'Today',
  'values_1' : record.tables['Longitudinal'][0].fields['EligToday'],
  'values_2' : record.tables['Longitudinal'][0].fields['PartToday']
}); 

chartData.push({
  'value_label' : '1 Yr Before',
  'values_1' : record.tables['Longitudinal'][0].fields['EligYr1'],
  'values_2' : record.tables['Longitudinal'][0].fields['PartYr1']
});

chartData.push({
  'value_label' : '2 Yr Before', 
  'values_1' : record.tables['Longitudinal'][0].fields['EligYr2'],
  'values_2' : record.tables['Longitudinal'][0].fields['PartYr2']
});

chartData.push({
  'value_label' : '3 Yr Before', 
  'values_1' : record.tables['Longitudinal'][0].fields['EligYr3'],
  'values_2' : record.tables['Longitudinal'][0].fields['PartYr3']
});

var config = { 
  type : "serial", 
  categoryField: "value_label",
  rotate: true,
  dataProvider : chartData,
  graphs: [
  { 
    "valueField": "values_1",
    "type": "column",
    "fillAlphas": 1,
    "fillColors": "#232c68",
    "lineThickness": 0
  },
  { 
    "valueField": "values_2",
    "type": "column",
    "fillAlphas": 1,
    "fillColors": "#6da141",
    "lineThickness": 0
  }
  ],
  "valueAxes": [
  {
    "id": "ValueAxis-1",
    "stackType": "regular",
    "title": "Axis title"
  }
  ]
};

results.attr('data-amchart', JSON.stringify(config) );
}
6

This is awesome. I can’t wait - thank you !!!