Search code examples
chartslinedimple.js

Measure Axis adding up values when multiseries dimple chart line chart is plotted. How to avoid

I am having a multi-series line chart plotted using dimple.js library. Problem I am facing is, x axis duplicate values are added up and plotted as a single point in the graph. here is my example http://jsfiddle.net/geervani/jcow2y4u/8/. Here in the data below, for KM 240000, there are two values of MM - 8 and 14. THis should be plotted as 2 different points. But the rendered chart has only 1 point at (22,240000). points 8 and 14 are added up. How can this be resolved. Please suggest.

 var chartdata = [{
        "Tyre": "1-OL",
            "Design": "HDL2+ECO+",
            "Size": "295.0/22.5R55.0",
            "KM": 128000,
            "MM": 22
    }, {
        "Tyre": "1-OL",
            "Design": "HDL2+ECO+",
            "Size": "295.0/22.5R55.0",
            "KM": 145000,
            "MM": 20
    }, {
        "Tyre": "1-OL",
            "Design": "HDL2+ECO+",
            "Size": "295.0/22.5R55.0",
            "KM": 195000,
            "MM": 17
    }, {
        "Tyre": "1-OL",
            "Design": "HDL2+ECO+",
            "Size": "295.0/22.5R55.0",
            "KM": 240000,
            "MM": 8
    }, {
        "Tyre": "1-OL",
            "Design": "HDL2+ECO+",
            "Size": "295.0/22.5R55.0",
            "KM": 240000,
            "MM": 14
    }, {
        "Tyre": "1-OL",
            "Design": "HDL2+ECO+",
            "Size": "295.0/22.5R55.0",
            "KM": 300000,
            "MM": 12
    }, {
        "Tyre": "1-OL",
            "Design": "HDL2+ECO+",
            "Size": "295.0/22.5R55.0",
            "KM": 429117.39,
            "MM": 3
    }];

    var svg = dimple.newSvg("#chartContainer", '100%', '100%');

    // Create and Position a Chart
    var myChart = new dimple.chart(svg, chartdata);
    myChart.setMargins(50, 10, 10, 50);
    //myChart.setBounds(30, '0px', '95%', '100%');

    var x = myChart.addCategoryAxis("x", "KM");
    x.showGridlines = false;
    var y = myChart.addMeasureAxis("y", "MM");
    y.showGridlines = false;
    y.ticks = 5;

    // Min price will be green, middle price yellow and max red
    //myChart.addColorAxis("KM", ["green", "yellow", "red"]);

    // Add a thick line with markers
    myChart.addSeries("Tyre", dimple.plot.bubble);

    var s = myChart.addSeries("Tyre", dimple.plot.line);

    // Add line markers to the line because it looks nice
    s.lineMarkers = true;
    // Draw the chart
    myChart.draw();

enter image description here

Thanks, Geervani

Solution

  • Dimple pre-aggregates your data based on the dimensionality defined in your code. This means that you need some way to distinguish the rows in your data, otherwise they will be aggregated. You should think about what makes a row different from another row and capture that in the data. For example I have assumed that they are observations and numbered them:

    for (var i = 0; i < chartdata.length; i += 1) {
    chartdata[i]["Observation"] = i;
}

    Then referenced this new dimension in the series arrays:

    var s = myChart.addSeries(["Observation", "Tyre"], dimple.plot.line);

    Of course if you could include some kind of time value or more meaningful way to distinguish what a row actually relates to in the real world it would be preferable but here is this example working: http://jsfiddle.net/jcow2y4u/11/