Dynamic colors in graphs

Question

I try to load colors dynamicly with jquery.

This is working:

 var colors_array= ["#9CC4E4", "#3A89C9", "#F26C4F"];

Morris.Donut({

  element: 'donut-example',
   colors: colors_array,
  data: [
    {label: "Download Sales", value: 12},
    {label: "In-Store Sales", value: 30},
    {label: "Mail-Order Sales", value: 20}
  ]
});

Desired result (does not work):

   function graphDonut(colors) {
            var value = colors;
            value = value.replace(/\|/g,'", "');
            var colors_array = '["' + value + '"]';

        Morris.Donut({

          element: 'donut-example',
           colors: colors_array,
          data: [
            {label: "Download Sales", value: 12},
            {label: "In-Store Sales", value: 30},
            {label: "Mail-Order Sales", value: 20}
          ]
        });

    }

graphDonut("#9CC4E4|#3A89C9|#F26C4F");

Answer 1

I think you need to replace

var colors_array = '["' + value + '"]';

with

var colors_array = value.split("|");

It gives me this output:

["#9CC4E4", "#3A89C9", "#F26C4F"]

Hope this helps.

Answer 2

split the string or pass an array, the latter would be easier

function graphDonut(colors) {

    Morris.Donut({
        element: 'donut-example',
        colors : colors,
        data   : [
            {label: "Download Sales", value: 12},
            {label: "In-Store Sales", value: 30},
            {label: "Mail-Order Sales", value: 20}
        ]
    });
}

graphDonut( ['#9CC4E4', '#3A89C9', '#F26C4F'] );

or

function graphDonut(colors) {
    var arr = colors.split('|');

    Morris.Donut({
        element: 'donut-example',
        colors : arr,
        data   : [
            {label: "Download Sales", value: 12},
            {label: "In-Store Sales", value: 30},
            {label: "Mail-Order Sales", value: 20}
        ]
    });
}

graphDonut("#9CC4E4|#3A89C9|#F26C4F");

Answer 3

Replace below code

Morris.Donut({

  element: 'donut-example',
   colors: ["#9CC4E4", "#3A89C9", "#F26C4F"],
  data: [
    {label: "Download Sales", value: 12},
    {label: "In-Store Sales", value: 30},
    {label: "Mail-Order Sales", value: 20}
  ]
});

I was getting same issue, I am sharing my corrected code as below

 new Morris.Donut({
     element: "MyChart",
     colors: ["#9CC4E4", "#3A89C9", "#F26C4F"],
     data: object2
  });

Answer 4

Try this:

<script> 
    new Morris.Donut({
        element: 'donut-example',
        data: [
            {label: "Serie 1", value: 12},
            {label: "Serie 2", value: 30},
            {label: "Serie 3", value: 20},
            {label: "Serie 3", value: 20}
        ],
        colors: ['#a6d000', '#0070e7', '#e700b5', '#ffab17'],
        xkey: 'y',
        ykeys: ['vaue']
    });
</script>