0

I have a ZingChart pie chart fed by an external CSV file. How do I hide the label on the pie chart? In the simulated code below it's that read entirely text appearing at the bottom.

var chartData = {
  type: "pie",
  csv: {
    title: true,
    dataString: "Chart title__Number of books|read entirely_None|30_Many|31_Few|25_All|14",
    rowSeparator: "_",
    separator: "|",
    mirrored: true,
    horizontalLabels: true,
    verticalLabels: true,
  }
}

zingchart.render({
  id: "chartDiv",
  data: chartData,
});
<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zingchart/2.6.0/zingchart.min.js"></script>
</head>

<body>
  <div id='chartDiv'></div>
</body>

</html>

The docs don't make it clear how to address those items (or they do... and it doesn't work).

Leeroy
  • 2,003
  • 1
  • 15
  • 21

1 Answers1

1

We call those "items" valueBox's in our library. Every piece of text on the chart inherits from label and in this case, valueBox inherits from that as well. This means you can apply a pretty standard set of label manipulations to all pieces of text on the chart.

   "plot": {
      "valueBox": {
        "visible": false
      }
    }

Adversely, you can add multiple labels through a valueBox array. It can either be a single object or an array of objects. This would allow you to display multiple labels.

NOTE: the _ is a comment in JSON structure

     "_valueBox": [
        {
          type: 'all',
          placement: 'out',
          text: '%t'
        },
        {
          type: 'all',
          placement: 'in',
          text: '%v (%npv)'
        }    
      ]

Note: CSV legend is broken in v2.6.0. We have put a patch out at the following link.enter code here

    <script src= "https://cdn.zingchart.com/hotfix/zingchart.min.js"></script>

All documentation referenced can be found here:

https://www.zingchart.com/docs/tutorials/chart-elements/value-boxes/

https://www.zingchart.com/docs/api/json-configuration/graphset/plot/

https://www.zingchart.com/docs/api/json-configuration/graphset/plot/value-box/

https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/

var myConfig = {
"graphset":[
    {
        "type":"pie",
        "csv":{
            "title":true,
            "separator":"|",
            "mirrored":true,
            "data-string":"Chart title__Number of books|read entirely_None|30_Many|31_Few|25_All|14",
            "row-separator":"_",
            "horizontal-labels":true,
            "vertical-labels":true
        },
        "scale":{
           "visible":false
        },
        "plot": {
          "valueBox": {
            "visible": false
          },
          "_valueBox": [
            {
              type: 'all',
              placement: 'out',
              text: '%t'
            },
            {
              type: 'all',
              placement: 'in',
              text: '%v (%npv)'
            }    
          ]
        }
    }
],
"tween":null
};

zingchart.render({ 
 id: 'myChart', 
 data: myConfig, 
 height: '100%', 
 width: '100%' 
});
html, body {
 height:100%;
 width:100%;
 margin:0;
 padding:0;
}
#myChart {
 height:100%;
 width:100%;
 min-height:150px;
}
.zc-ref {
 display:none;
}
<!DOCTYPE html>
<html>
 <head>
  <script src= "https://cdn.zingchart.com/hotfix/zingchart.min.js"></script>
 </head>
 <body>
  <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
 </body>
</html>
nardecky
  • 2,623
  • 8
  • 18
  • I want `valueBox`es, which are the values of individual data points, but I don't want the scale label that describes the whole pie, that says "read entirely". The demo doesn't do this, it even seems not to do what the code says (no values at all and pie chart label still there). – Leeroy May 16 '17 at 21:22
  • The offending piece of text has the id `myChart-graph-id0-scale-item_0`, that's why I'm calling it an item. – Leeroy May 16 '17 at 21:43
  • I see what you are saying now. The bitium plugin I have messing up the chart view on stackoverflow so I couldn't see that text. It has to do with the column and row separators. Honestly are you parsing a csv file in javascript and passing the data-string to us? It might be easier to just put the format into javascript object notation format a lot easier. Is this a possibility? Or are you just http requesting the string format of your csv and plugging it into ZingChart? – nardecky May 19 '17 at 21:52
  • I am in fact using csv files with `csv: { url: '/resources/data001.csv', ...}`. Made the demo with `data-string` because why post another file online when everything can be self-contained here. I cannot comment out or delete anything in the CSVs because they are shared, and collaborators sometimes need to view them in Excel and update them. If it's not possible from within ZingChart I can hide that label in a hacky way no problem! But I was struggling to understand the mental model here... – Leeroy May 21 '17 at 12:58
  • 1
    A quick and easy way to get rid of the text is adding the following code. "scale":{ "visible":false }, – nardecky May 22 '17 at 20:33
  • I asked the question because `scale: { visible: false }` did _not_ work for me, for some reason... maybe I was sloppy. Thank you! – Leeroy May 22 '17 at 21:30