Skip to content

00 simpledimple.chart

Nagarajan Chinnasamy edited this page Dec 11, 2016 · 10 revisions

This is the fundamental object in simpledimple. This wraps the entire functionality of dimple.js library and offers hooks to plug in extensions.

Constructor

simpledimple.chart(svg, chartConfig, data) - Initialise the chart with svg where the chart needs to be rendered, configuration of the chart to be rendered and the data on which the chart will be based.

  • svg (Required): The svg in which to render.

  • chartConfig (Required): The (typically but not necessarily externalized) configuration that details the properties of the chart to be rendered. See ChartConfig Properties.

  • data (Required): The data on which this chart will be based. The object passed will be assigned to the data property. This must be a flat JSON table in which the rows are consistent and each field is a simple type. It does not currently support nested objects. The best way to get data in this format is using the d3 data request methods.

Example:

// Get data from an external location
d3.json("MyAwesomeDataSource.json", function (data) {
    // Get the chart configuration from external location
    d3.json("chartconfig/advanced_animated_multiple_pie_bubbles.json", function(chartConfig) {
        // Add an svg object to the element that is to contain the chart
        var svg = dimple.newSvg("#chartContainer", 590, 400);
        // Create a new chart object based on this svg, chart configuration and  data
        var myChart = new simpledimple.chart(svg, chartConfig, data);
        myChart.draw();
    });
});
Clone this wiki locally