Zingchart last element keeps changing color and not matching with legend

Question

My zingchart's last element's color does not match with legend, and keeps on changing unlike the others. Any Ideas? Everything else works good. Though I'm parsing this data through MySQL database, this is how the JavaScript looks like.

My code:

 <script>
    var myData = ["12","15","7","20","2","22","10","7","7","10","8","15","9"];
    var myData = myData.map(parseFloat);
    var myLabels = ["General Verbal Insults","General Beatings\/Pushing","Terrorizing\/Threatening Remarks","False Gossip Inflation (Rumors)","Discrimination","Rough Fighting","Sexual Utterance\/Assaults","General Exclusion","Theft","Racist Utterance\/Assaults","Personal Property Damage","Internet Related (Cyber)","Other\/Unspecified"];

    window.onload=function(){

       var colorCharacters = "ACDEF0123456789";
        var globalStylesArray = [];

        var myConfig = {
            type: "bar", 
            legend:{},
            title: {
            "text":"Showing Results For: Canada",
            "color":"green"

            },
            subtitle: {
            "text":"Total Bullying Incidents In Country: 144",
            "color":"blue"
            }, 
            series : [{"values":[ myData[0] ],"text":"General Verbal Insults",},{"values":[ myData[1] ],"text":"General Beatings/Pushing",},{"values":[ myData[2] ],"text":"Terrorizing/Threatening Remarks",},{"values":[ myData[3] ],"text":"False Gossip Inflation (Rumors)",},{"values":[ myData[4] ],"text":"Discrimination",},{"values":[ myData[5] ],"text":"Rough Fighting",},{"values":[ myData[6] ],"text":"Sexual Utterance/Assaults",},{"values":[ myData[7] ],"text":"General Exclusion",},{"values":[ myData[8] ],"text":"Theft",},{"values":[ myData[9] ],"text":"Racist Utterance/Assaults",},{"values":[ myData[10] ],"text":"Personal Property Damage",},{"values":[ myData[11] ],"text":"Internet Related (Cyber)",},{"values":[ myData[12] ],"text":"Other/Unspecified",}]
        };

       zingchart.render({ 
            id : 'myChart', 
            data : myConfig, 
            width:"100%",
            height:500,

        });
        zingchart.gload = function(p) {
          console.log(p);
          var graphId = p.id;
          var graphData = {};
          graphData = zingchart.exec(graphId, 'getdata');
          graphData = graphData.graphset[0] ? graphData.graphset[0] : graphData;
          console.log(graphData);
          createColors(graphData.series[0].values.length);

         zingchart.exec(graphId, 'modifyplot', {
            data: {
              styles: globalStylesArray
            }
          });
        }

       function createColors(seriesLength) {
          console.log('-------createColor seriesLength: ', seriesLength);
          globalStylesArray = [];
          for (var i = 0; i < seriesLength; i++) {
            var colorString = '#';
            for (var j = 0; j < 6; j++) {
              colorString += colorCharacters.charAt(Math.floor(Math.random() * (colorCharacters.length - 4)));
            }
            globalStylesArray.push(colorString);
          }

          console.log('-----globalStylesArray-------', globalStylesArray);
        }

    };
    </script>

Answer 1

Referring to the comment on the OP:

I just want all color to be different, since i dont know how many elements are in MyData - its generated through PHP & MYSQL

If you just want all of the colors to be different, remove the zingchart.gload function and the createColors function. ZingChart will create different colors for each series dynamically.

If you do want to specify each of those colors ahead of time since you do not know how many series your data will produce, you will need to apply a theme to your chart configuration: http://www.zingchart.com/docs/design-and-styling/javascript-chart-themes/