Home forums Using CanvasJS How can i set more than 1 color set for each graph?

This topic contains 1 reply, has 2 voices, and was last updated by  Vishwas R 4 months, 3 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #20453

    vincent
    Member

    <script type=”text/javascript”>
    window.onload = function () {
    CanvasJS.addColorSet(“greenShades”,
    [//colorSet Array
    “#2F4F4F”,
    “#008080”,
    “#2E8B57”,
    “#3CB371”,
    “#90EE90”,
    “#003A00”,
    ]);

    CanvasJS.addColorSet(“RedShades”,
    [//colorSet Array
    “#F08080”,
    “#E9967A”,
    “#DC143C”,
    “#FF0000”,
    “#B22222”,
    “#8B0000”,
    ]);

    var chart = new CanvasJS.Chart(“chartContainer”,
    { colorSet: “greenShades”,
    colorSet: “RedShades”,

    title:{
    text: “Instant Traffic Volumn Monitoring”
    },

    legend: {
    interval:1,
    intervalType: “hour”,
    cursor: “pointer”,
    itemclick: function (e) {
    //console.log(“legend click: ” + e.dataPointIndex);
    //console.log(e);
    var data = e.chart.options.data;
    for(var i = 0; i < data.length; i++){
    data[i].visible = false;
    }
    e.dataSeries.visible = true;
    e.chart.render();
    }
    },
    axisY:
    {
    title: “Traffic Count”,
    interval:2,
    },

    axisX:
    {
    title: “Lane Code”,
    },
    data: [{
    colorSet:”#greenShades”,
    showInLegend: true,
    //visible: false,
    type: “column”,
    legendText: “14:00″,
    dataPoints: [{
    y: 5,
    label:”LN001″
    }, {
    y: 7,
    label:”LN002″

    }, {
    y: 9,
    label:”LN003″
    }, {
    y: 8,
    label:”LN004″

    }, {
    y: 14,
    label:”LN005″
    }, {
    y: 15,
    label:”LN006”
    },

    ]
    }, {
    showInLegend: true,
    colorSet: “RedShades”,
    visible: false,
    legendText: “15:00”,
    type: “line”,
    dataPoints: [ {
    y: 3,
    label:”LN001″
    }, {
    y: 4,
    label:”LN002″
    }, {
    y: 7,
    label:”LN003″
    }, {
    y: 11,
    label:”LN004″
    }, {
    y: 15,
    label:”LN005″
    }, {
    y: 4,
    label:”LN006″
    },
    ]
    },
    {
    showInLegend: true,
    visible: false,
    legendText: “16:00”,
    type: “spline”,
    dataPoints: [ {
    y: 4,
    label:”LN001″
    }, {
    y: 8,
    label:”LN002″
    }, {
    y: 9,
    label:”LN003″
    }, {
    y: 13,
    label:”LN004″
    }, {
    y: 15,
    label:”LN005″
    }, {
    y: 14,
    label:”LN006″
    },
    ]
    },
    {
    showInLegend: true,
    visible: false,
    legendText: “17:00”,
    type: “stepLine”,
    dataPoints: [ {
    y: 13,
    label:”LN001″
    }, {
    y: 6,
    label:”LN002″
    }, {
    y: 7,
    label:”LN003″
    }, {
    y: 10,
    label:”LN004″
    }, {
    y: 13,
    label:”LN005″
    }, {
    y: 14,
    label:”LN006″
    },
    ]
    },
    {
    showInLegend: true,
    visible: false,
    legendText: “18:00”,
    type: “stepArea”,
    dataPoints: [ {
    y: 3,
    label:”LN001″
    }, {
    y: 5,
    label:”LN002″
    }, {
    y: 9,
    label:”LN003″
    }, {
    y: 8,
    label:”LN004″
    }, {
    y: 6,
    label:”LN005″
    }, {
    y: 2,
    label:”LN006″
    },
    ]
    },
    {
    showInLegend: true,
    visible: false,
    legendText: “19:00”,
    type: “area”,
    dataPoints: [ {
    y: 1,
    label:”LN001″
    }, {
    y: 2,
    label:”LN002″
    }, {
    y: 4,
    label:”LN003″
    }, {
    y: 6,
    label:”LN004″
    }, {
    y: 8,
    label:”LN005″
    }, {
    y: 5,
    label:”LN006″
    },
    ]
    },
    {
    showInLegend: true,
    visible: false,
    legendText: “20:00”,
    type: “splineArea”,
    dataPoints: [ {
    y: 3,
    label:”LN001″
    }, {
    y: 6,
    label:”LN002″
    }, {
    y: 8,
    label:”LN003″
    }, {
    y: 11,
    label:”LN004″
    }, {
    y: 14,
    label:”LN005″
    }, {
    y: 1,
    label:”LN006″
    },
    ]
    },
    {
    showInLegend: true,
    visible: false,
    legendText: “20:00”,
    type: “column”,
    dataPoints: [ {
    y: 5,
    label:”LN001″
    }, {
    y: 7,
    label:”LN002″
    }, {
    y: 9,
    label:”LN003″
    }, {
    y: 8,
    label:”LN004″
    }, {
    y: 15,
    label:”LN005″
    }, {
    y: 14,
    label:”LN006″
    },
    ]
    },{
    showInLegend: true,
    visible: false,
    legendText: “20:00”,
    type: “line”,
    dataPoints: [{
    y: 3,
    label:”LN001″
    }, {
    y: 2,
    label:”LN002″
    }, {
    y: 1,
    label:”LN003″
    }, {
    y: 6,
    label:”LN004″
    }, {
    y: 5,
    label:”LN005″
    }, {
    y: 4,
    label:”LN006″
    }, ]
    }]
    });

    chart.render();}
    </script>

    #20455

    Vishwas R
    Keymaster

    @vincent,

    You can have one colorSet within a chart, as of now. However if you are trying to have different colorSets for each dataSeries, you can try setting color in dataPoint level. Please take a look at this jsfiddle.


    Vishwas R
    Team CanvasJS

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.