Changing category field and category type in chart javascript

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?

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?

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.

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!

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.

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.

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