CODEWITHSUNDEEP
javascriptd3.jstime-serieslinechartdimple.js
Information Technology
Information Technology

Reputation: 2333

How to properly assign separate colors to different lines and line series in D3 Dimple?

I have the following data set...

  // DATA
  var dataSet1 = [
    { "Month": "January", "Date": 20150101, "Unit Sales": 3000, "Revenue": 2000 },
    { "Month": "April", "Date": 20150403, "Unit Sales": 500, "Revenue": 6000 },
    { "Month": "May", "Date": 20150530, "Unit Sales": 3000, "Revenue": 2000 },
    { "Month": "June", "Date": 20150620, "Unit Sales": 1500, "Revenue": 39000 },
    { "Month": "July", "Date": 20150706, "Unit Sales": 2500, "Revenue": 6000 },
    { "Month": "February", "Date": 20150205, "Unit Sales": 2500, "Revenue": 5000 },
    { "Month": "March", "Date": 20150307, "Unit Sales": 1500, "Revenue": 6000 },
    { "Month": "August", "Date": 20150816, "Unit Sales": 2500, "Revenue": 20000 },
    { "Month": "September", "Date": 20150907, "Unit Sales": 1500, "Revenue": 6000 },
    { "Month": "October", "Date": 20151009, "Unit Sales": 500, "Revenue": 9000 },
    { "Month": "November", "Date": 20151120, "Unit Sales": 50, "Revenue": 15000 },
    { "Month": "December", "Date": 20151222, "Unit Sales": 2000, "Revenue": 7000 }
  ];

And, I have the following Dimple function that attempts to draw two lines, one for the attribute "Unit Sales" and one for the attribute "Revenue"...

  function draw2(){
    var svg2 = dimple.newSvg("#chart2", 690, 600); // width x height
    var myChart = new dimple.chart(svg2, dataSet1);
    myChart.setBounds(60, 30, 505, 305);
    var x = myChart.addCategoryAxis("x", "Month");
    x.addOrderRule("Date");

    var y1 = myChart.addMeasureAxis("y", "Unit Sales");
    var y2 = myChart.addMeasureAxis("y", "Revenue");

    var line1 = myChart.addSeries(null, dimple.plot.line, [x,y1]);
    var line2 = myChart.addSeries(null, dimple.plot.line, [x,y2]);

    myChart.assignColor("Unit Sales", "blue"); // <------- ASSIGN COLOR HERE
    myChart.assignColor("Revenue", "red"); // <------- ASSIGN COLOR HERE

    //myChart.addLegend(180, 10, 260, 20, "right", line1);
    //myChart.addLegend(180, 10, 360, 20, "right", line2);

    line1.lineMarkers = true;
    line2.lineMarkers = true;
    myChart.draw();
  };

Later calling the function with the call...

draw2();

From the above code, you can see that I want to plot two separate fields from the data as two separate lines. I attempt to do this by creating two separate series, calling dimple.plot.line on each.

I try to assign separate colors using the commands:

myChart.assignColor("Unit Sales", "blue"); // <------- ASSIGN COLOR HERE
myChart.assignColor("Revenue", "red"); // <------- ASSIGN COLOR HERE

However, this doesn't work. The lines are plotted with the same color. (Also, if I add a legend, I only get one legend that is labeled "All" rather than the field names that I try to plot.)

enter image description here

My QUESTION: How do I appropriate draw these two lines and assign separate colors to them?

Thanks for any help you can offer.

Upvotes: 2

Views: 132

Answers (1)

Ram Visagan
Ram Visagan

Reputation: 145

I have edited something and here is the working code:

  var svg2 = dimple.newSvg("#chart2", 690, 600);
  var myChart = new dimple.chart(svg2, dataSet1);
  myChart.setBounds(60, 30, 505, 305);
  var x = myChart.addCategoryAxis("x", "Month");
  x.addOrderRule("Date");

  var y1 = myChart.addMeasureAxis("y", "Unit Sales");
  var y2 = myChart.addMeasureAxis("y", "Revenue");

  var line1 = myChart.addSeries("Sales",dimple.plot.line, [x, y1]);
  var line2 = myChart.addSeries("Profit", dimple.plot.line, [x, y2]);

  myChart.assignColor("Sales", "blue"); // <------- ASSIGN COLOR HERE
  myChart.assignColor("Profit", "green"); // <------- ASSIGN COLOR HERE

  myChart.addLegend(180, 10, 260, 20, "right", line1); 
  myChart.addLegend(180, 10, 360, 20, "right", line2); 

  line1.lineMarkers = true;
  line2.lineMarkers = true;
  myChart.draw();

The Sales and Profit that I have been given in addSeries part is just for assigning different colors to the charts also it remains the title to the legend.

var line1 = myChart.addSeries("Sales",dimple.plot.line, [x, y1]);
var line2 = myChart.addSeries("Profit", dimple.plot.line, [x, y2]);

Here is the answer to the above example:

http://jsbin.com/vewibajeru/edit?html,js,output

Upvotes: 1

Related Questions