Changing category field and category type in chart javascript

Questions
1

Can I change category field and category type from Category Axes in bar chart through JavaScript and redraw chart based on new field?

2

We are working on exposing more of the underlying Chart functionality through our JavaScript API, but at least at present, there isn’t a way to swap those options out and let Skuid recalc/redraw the chart, unfortunately. I can’t say for sure if we will implement this specific functionality, but I do like the idea, and we’ll certainly take it in to consideration.

I know it’s not ideal because you’ll have two almost identical charts to maintain, but the closest thing I can think of to an “in the meantime” solution would be to create two charts representing both scenarios, put them in a tab set and let the user toggle back and forth. Does that help?

3

OK, thanks.
Just wondering if I can use this (have pasted below a part of code). I wasn’t able to get this to work through console. 

xAxis: {               
categories: newField,
         title: {
                    text: null
                }
    },

I will group by newField in SOQL & pass the results to above code. Will the Skuid chart redraw?

4

J,

I was able to change the category field and redraw the chart. I used custom component hack like you informed in the email. I am responding here in case someone else needs to know. Here are the steps I followed to make this work:
1) I built Skuid Custom Component by using same XMLDefinition as my original chart. 
2) Whenever I needed to change Category field; I just modified the xmlDefinition (changed category field)
3) Called Component Factory to display the modified chart.

5

Great! Again, we recognize that our chart JavaScript API is a bit lacking, and it’s something we’re planning on addressing in the future. Thanks for rolling with it in the meantime!

6

DTJ, any chance you could provide the XML for your page (at least the relevant portion of the page)? I’m running into a similar situation where I need to redraw the chart and having an example to reference would be a huge help.

7

Jonathan,

Here is what I did:

  1. I dragged Custom Component to my page.
  2. Under the ‘Resources’ tab, I created In-Line(Component).
  3. I referred the name of the above resourrce on the custom component.

Below is the part of the In-Line(Component) code. Sorry, I cannot provide page xml because of policy restrictions. However, try these steps and if it does not work, I will create new dummy page and provide xml to you.

//creating xml Definition for the chart. You should create similar definition as per your chart requirements.
// I change Category field dynamically. I have ‘categoryFieldName’ variable referred in below xmlDefinition. I assign field value to it before this xmlDefinition.

var xmlDefinition = $xml(‘<skuidvis__chart type=“bar” model=“myModel” stacking=“true” maintitle=“New Requests” rendersnippet=“” height=“900”/>’).append( $xml(‘’).append(
$xml(‘’)
),
$xml(‘’).append(
$xml(‘’)
),
$xml(‘’).append(
$xml(‘’)
),
$xml(‘’),
$xml(‘’),

$xml('<allowedtypes/>').append(
    $xml('<type>line</type>'),
    $xml('<type>spline</type>'),
    $xml('<type>area</type>'),
    $xml('<type>areaspline</type>'),
    $xml('<type>column</type>'),
    $xml('<type>bar</type>')
)

);

console.log(xmlDefinition);
element.empty();

//calling component factory

skuid.component.factory({
   element: element,
   xmlDefinition: xmlDefinition
});

So I have a picklist field on Skuid page, the value of which is passed to the ‘categoryFieldName’ variable.
Please let me know if you need more info.

8

If the chart does not render, you may try with below code:
var dynamicChartComp = skuid.component.getById(‘dynamicChartComponentID’);      dynamicChartComp.render();