Search code examples
jqueryvisualizationdata-visualizationzingchart

Zingchart dynamically changing axis label with Jquery


I am working on this zingchart:

    var myConfig = {
        type: "line",
        plot:{
            aspect:"spline"
        },
      //...... legend, preview...
        "scale-x":{
                "format":"%v",
                "zooming":true,
                "label":{
                    "id": "xlabel",
                    "text":"X",
                    "margin-top":100
                },
                "item":{
                    "auto-align":true,
                    "maxChars":10
                },
                "tick":{
                    "line-color":"black",
                    "line-width":"2px",
                    "size":8
                } 
        },
        "scale-y":{
                "zooming":true,
                "decimals":0,
                "label":{
                    "id": "ylabel",
                    "text":"Y",
                    "margin-top":100
                }
        },
        series: [
                { "values": [
                        [1,10],
                        [2,20],
                        [3,50],
                        [4,60]
                    ]
                },
                { "values": [
                        [1,3],
                        [2,7],
                        [3,15],
                        [4,30],
                        [5,70],
                        [3.2,25]
                    ]
                }
            ]
    };

I have modified the graph to add plots, etc. However, I get an error when trying to modify dynamically the labels of the X and Y axes. I am using the JQuery wrapper and according to Update Object I do:

$('#myChart').updateObject({
             "type": "label",
                "data": {
                    "id": "xlabel",
                    "text": "My new label"
                }
            });

But this raises an error: Uncaught TypeError: Cannot read property 'length' of undefined on this part (I know it is minimised and will not make too much sense unless you developed zingchart):

 for (z = 0, b = p.length; z < b; z++) {

in the case "updateobject":

I am unsure I am using the object update correctly, but this is how it seems to work from the documentation. Any ideas I might be missing?

EDIT: I could not reproduce the incidence in this jsfiddle, but I could not make it work either.

EDIT2:

I think it comes to this bit, where it sets p to undefined:

case "updateobject":
    r = n.BY(e[ZC._[3]]);
    if (r && e.data) {
        r.G["objects.updates"] = []; //G = "label"
        G = e.type || "label";  // e = Object {type: "label", data: Object}
        p = r.o[G + "s"];   // p = undefined, r = e {b: undefined, M9: "zcgraph", MW: "linegraph", o: Object, G: Object…}

And r.o is:

o: Object
background-color: "#ffffff"
height: 502
legend: Object
plot: Object
plotarea: Object
preview: Object
scale-x: Object
scale-y: Object
series: Array[2]
tween: null
type: "line"
width: 755
x: 0
y: 0
__proto__: Object

This Demo shows an example where UpdateObject works:

var myConfig = {
    'type':'line',
    'series':[
        {
            'values':[11,26,7,44,11]
        }
    ],
    'labels':[
       {
            'id':'label1',
           'text':'Label 1',
            'x':50,
          'y':50,
          'background-color':'#f90',
           'padding':5
      },{
          'id':'label2',
           'text':'Label 2',
            'x':150,
         'y':50,
          'background-color':'#f09',
           'padding':5
      }
    ],
    'shapes':[
      {
            'id':'shape1',
           'x':100,
         'y':100,

It seems that the object under labels will be found (that is why I saw before a +"s" in p = r.o[G + "s"]). It might mean that I am using the wrong method to modify the label inside the "scale-x".


Solution

  • $("#myChart").modify({
        "data": {
             "scale-x":{
                "label":{
                    "id": "xlabel",
                    "text":"My new label",
                }
            }
        }
    });