Changing category field and category type in chart javascript

  • 2
  • Question
  • Updated 3 years ago
  • Answered
Can I change category field and category type from Category Axes in bar chart through JavaScript and redraw chart based on new field?
Photo of TJ

TJ

  • 952 Points 500 badge 2x thumb

Posted 3 years ago

  • 2
Photo of J.

J., Official Rep

  • 7,470 Points 5k badge 2x thumb
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?
(Edited)
Photo of TJ

TJ

  • 952 Points 500 badge 2x thumb
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?
Photo of TJ

TJ

  • 952 Points 500 badge 2x thumb
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.
(Edited)
Photo of J.

J., Official Rep

  • 7,470 Points 5k badge 2x thumb
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!
Photo of Jonathan Gillespie

Jonathan Gillespie

  • 870 Points 500 badge 2x thumb
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.
Photo of TJ

TJ

  • 952 Points 500 badge 2x thumb
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('<dataaxes/>').append(
        $xml('<axis title="Records" id="axis1" integersonly="true" minvalue="0" maxvalue="80"/>')
    ),
    $xml('<categoryaxes/>').append(
        $xml('<axis id="categories" field="'+categoryFieldName+'" categorytype="field"/>')
    ),
    $xml('<serieslist/>').append(
        $xml('<series splitfield="myField__c" aggfunction="count" modelId="myModel" splittype="field" valuefield="Name"/>')
    ),
    $xml('<colors/>'),
    $xml('<legend layout="horizontal" valign="bottom" halign="center"/>'),

    $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.
Photo of TJ

TJ

  • 952 Points 500 badge 2x thumb
If the chart does not render, you may try with below code:
var dynamicChartComp = skuid.component.getById('dynamicChartComponentID');      dynamicChartComp.render();