CODEWITHSUNDEEP
zingchart
Shayna Symons
Shayna Symons

Reputation: 451

ZingChart how to modify node upon click/select

I am using ZingChart for a standard bar graph. I have the selected state for individual bars working as I would like but for one thing. Is there a way to show the value box (set to visible:false globally) to show just for the selected node when it is clicked/selected? I was able to make the value box for every node show in a click event I added to call an outside function using the modifyplot method but I don't see a similar method for nodes such as modifynode. If this is not an option, is there any way to insert a "fake" value box the markup of which would be created on the fly during the click event and have that element show above the selected node? Below is my render code for the chart in question. Thanks for your time!

zingchart.render({
        id: "vsSelfChartDiv",
        width: '100%',
        height: '100%',
        output: 'svg',
        data: myChartVsSelf,
        events:{
            node_click:function(p){
                zingchart.exec('vsSelfChartDiv', 'modifyplot', {
                    graphid : 0,
                    plotindex : p.plotindex,
                    nodeindex : p.nodeindex,
                    data : {
                        "value-box":{
                            "visible":true
                        }
                    }
                });
                var indexThis = p.nodeindex;
                var indexDateVal = $('#vsSelfChartDiv-graph-id0-scale_x-item_'+indexThis).find('tspan').html();
                updateTop(indexDateVal);
            }
        }
    });

Upvotes: 3

Views: 1682

Answers (1)

Patrick RoDee
Patrick RoDee

Reputation: 1106

You'd probably be better off using a label instead of a value-box. I've put together a demo here.

I'm on the ZingChart team. Feel free to hit me up if you have any more questions.

// Set up your data
var myChart = {
    "type":"line",
	"title":{
		"text":"Average Metric"
	},
  
    // The label below will be your 'value-box'
    "labels":[
        {
            // This id allows you to access it via the API
            "id":"label1",
            "text":"",
            // The hook describes where it attaches
            "hook":"node:plot=0;index=2",
            "border-width":1,
            "background-color":"white",
            "callout":1,
            "offset-y":"-30%",
            // Hide it to start
            "visible":false,
            "font-size":"14px",
            "padding":"5px"
        }
    ],
    // Tooltips are turned off so we don't have
    // hover info boxes and click info boxes
    "tooltip":{
        "visible":false
    },
	"series":[
		{
			"values":[69,68,54,48,70,74,98,70,72,68,49,69]
		}
	]
};

// Render the chart
zingchart.render({
  id:"myChart",
  data:myChart
});

// Bind your events

// Shows label and sets it to the plotindex and nodeindex
// of the clicked node
zingchart.bind("myChart","node_click",function(p){
    zingchart.exec("myChart","updateobject", {
        "type":"label",
        "data":{
            "id":"label1",
            "text":p.value,
            "hook":"node:plot="+p.plotindex+";index="+p.nodeindex,
            "visible":true
        }
    });
});

// Hides callout label when click is not on a node
zingchart.bind("myChart","click",function(p){
    if (p.target != 'node') {
        zingchart.exec("myChart","updateobject", {
        "type":"label",
        "data":{
            "id":"label1",
            "visible":false
        }
    });
    }
});
<script src='http://cdn.zingchart.com/zingchart.min.js'></script>
<div id="myChart" style="width:100%;height:300px;"></div>

Upvotes: 5

Related Questions