Skip to content

dimple.plot

Jump to bottom Edit New page
Christabella edited this page Jun 15, 2017 · 3 revisions

The plot objects are used by the renderer to create the series objects. These are static objects which do not need to be initialised by calling code. They are not intended for manipulation within external code and are provided as a way to set the renderer for a series, while allowing expert users to pass in custom renderers should they wish. The structure of all objects is the same and must be replicated by any custom versions. To understand the structure required please see the code links below.

Static Objects

Static Objects

dimple.plot.area [code] - The bar renderer creates a filled line series. This allows the creation of area charts. It has the following attributes:

  • stacked: By default the area chart renders a stacked series, meaning values will stack against a category axis. This can be overridden by setting the stacked property of the relevant series.

  • supports "x", "y" and "color" axis objects: Other mapped axes will be ignored. The x-axis determines the horizontal position of the ceiling line's data points. The y-axis determines vertical position of the ceiling line's data points. The color axis will determine both the line and area color, it will have different colors at each data point and they will be graded in the intervals.

Example:

// Draw areas for day stacked by brand
var svg = dimple.newSvg("body", 600, 400);
var data = [
    { "Brand":"Coolio", "Day":"Mon", "Sales Volume":1000 },
    { "Brand":"Coolio", "Day":"Tue", "Sales Volume":1100 },
    { "Brand":"Coolio", "Day":"Wed", "Sales Volume":900 },
    { "Brand":"Coolio", "Day":"Thu", "Sales Volume":800 },
    { "Brand":"Coolio", "Day":"Fri", "Sales Volume":850 },
    { "Brand":"Uncoolio", "Day":"Mon", "Sales Volume":200 },
    { "Brand":"Uncoolio", "Day":"Tue", "Sales Volume":100 },
    { "Brand":"Uncoolio", "Day":"Wed", "Sales Volume":300 },
    { "Brand":"Uncoolio", "Day":"Thu", "Sales Volume":250 },
    { "Brand":"Uncoolio", "Day":"Fri", "Sales Volume":350 }
];
var myChart = new dimple.chart(svg, data);
myChart.addCategoryAxis("x", "Day");
myChart.addMeasureAxis("y", "Sales Volume");
myChart.addSeries("Brand", dimple.plot.area);
myChart.draw();

dimple.plot.bar [code] - The bar renderer creates a rectangle series. This allows the creation of stacked, standard bar charts and mekko charts. It has the following attributes:

  • stacked: By default the bar chart renders a stacked series, meaning values will stack against a category axis. This can be overridden by setting the stacked property of the relevant series.

  • supports "x", "y" and "color" axis objects: Other mapped axes will be ignored. The x-axis determines the horizontal position and size of the bars. The y-axis determines vertical position and size of the bars. The color axis will determine both bar fill and stroke color.

Example:

// Draw bars for region sales volume stacked by brand
var svg = dimple.newSvg("body", 600, 400);
var data = [
    { "Brand":"Coolio", "Region":"Hipsville", "Sales Volume":1000 },
    { "Brand":"Uncoolio", "Region":"Hipsville", "Sales Volume":500 },
    { "Brand":"Coolio", "Region":"Dullsville", "Sales Volume":100 },
    { "Brand":"Uncoolio", "Region":"Dullsville", "Sales Volume":2000 }
];
var myChart = new dimple.chart(svg, data);
myChart.addCategoryAxis("x", "Region");
myChart.addMeasureAxis("y", "Sales Volume");
myChart.addSeries("Brand", dimple.plot.bar);
myChart.draw();

dimple.plot.bubble [code] - The bubble renderer creates a circular series. This allows the creation of scatter, bubble, lollipop and matrix charts. It has the following attributes:

  • non-stacked: By default the bubble chart renders a non-stacked series, meaning values will not stack against a category axis and each bubbles position against a measure axis is independent of other bubbles. This can be overridden by setting the stacked property of the relevant series.

  • supports "x", "y", "z" and "color" axis objects: Other mapped axes will be ignored. The x-axis determines the horizontal position of the bubbles. The y-axis determines vertical position of the bubbles. The z-axis determines the size of the circles rendered. The color axis will determine both fill and stroke color of bubbles.

Example:

// Draw a bubble chart for brand price vs volume sized by value
var svg = dimple.newSvg("body", 600, 400);
var data = [
    { "Brand":"Supercoolio", "Sales Volume":1000, "Sales Value":1500, "Price":1.5 },
    { "Brand":"Coolio", "Sales Volume":2000, "Sales Value":1800, "Price":0.9 },
    { "Brand":"Averagium", "Sales Volume":1000, "Sales Value":800, "Price":0.8 },
    { "Brand":"Uncoolio", "Sales Volume":1500, "Sales Value":750, "Price":0.5 },
    { "Brand":"Uncoolio Max", "Sales Volume":500, "Sales Value":100, "Price":0.2 },
    
];
var myChart = new dimple.chart(svg, data);
myChart.addMeasureAxis("x", "Sales Volume");
myChart.addMeasureAxis("y", "Price");
myChart.addMeasureAxis("z", "Sales Value");
myChart.addSeries("Brand", dimple.plot.bubble);
myChart.draw();

dimple.plot.line [code] - The line renderer an unfilled line series. This allows the creation of line charts. It has the following attributes:

  • non-stacked: By default the line chart renders a non-stacked series, meaning values will not stack against a category axis and each lines position against a measure axis is independent of other lines. This can be overridden by setting the stacked property of the relevant series.

  • supports "x", "y" and "color" axis objects: Other mapped axes will be ignored. The x-axis determines the horizontal position of the line's data points. The y-axis determines vertical position of the line's data points. The color axis will determine the line color, it will have different colors at each data point and they will be graded in the intervals.

Example:

// Draw lines for brand sales volume by day of the week
var svg = dimple.newSvg("body", 600, 400);
var data = [
    { "Brand":"Coolio", "Day":"Mon", "Sales Volume":1000 },
    { "Brand":"Coolio", "Day":"Tue", "Sales Volume":1100 },
    { "Brand":"Coolio", "Day":"Wed", "Sales Volume":900 },
    { "Brand":"Coolio", "Day":"Thu", "Sales Volume":800 },
    { "Brand":"Coolio", "Day":"Fri", "Sales Volume":850 },
    { "Brand":"Uncoolio", "Day":"Mon", "Sales Volume":200 },
    { "Brand":"Uncoolio", "Day":"Tue", "Sales Volume":100 },
    { "Brand":"Uncoolio", "Day":"Wed", "Sales Volume":300 },
    { "Brand":"Uncoolio", "Day":"Thu", "Sales Volume":250 },
    { "Brand":"Uncoolio", "Day":"Fri", "Sales Volume":350 }
];
var myChart = new dimple.chart(svg, data);
myChart.addCategoryAxis("x", "Day");
myChart.addMeasureAxis("y", "Sales Volume");
myChart.addSeries("Brand", dimple.plot.line);
myChart.draw();
Add a custom footer
Add a custom sidebar
Clone this wiki locally