Simple Bar Chart

A simple bar chart

main
run-button
run-button
reset-button
loadData('/static/cars.json')
  .then((data) => {
  	// The schema for the data
  	const schema = [
      		{
                name: 'Name', 
                type: 'dimension'
            },
            {
                name: 'Maker',
                type: 'dimension'
            },
            {
                name: 'Miles_per_Gallon',
                type: 'measure'
            },

            {
                name: 'Displacement',
                type: 'measure'
            },
            {
                name: 'Horsepower',
                type: 'measure'
            },
            {
                name: 'Weight_in_lbs',
                type: 'measure',
            },
            {
                name: 'Acceleration',
                type: 'measure'
            },
            {
                name: 'Origin',
                type: 'dimension'
            },
            {
                name: 'Cylinders',
                type: 'dimension'
            },
            {
                name: 'Year',
                type: 'dimension'
            }
    ];
    
  	// Create a new DataModel instance with data and schema
  	let dm = new muze.DataModel(data, schema);
  	// Perform the groupBy operation
    dm = dm.groupBy(['Year'], {
		Acceleration: 'mean'
	});
  
  	// Create a global environment to share common configs across charts
  	const env = muze();
  	// Create a canvas from the global environment
  	const canvas = env.canvas();
	canvas
    	.data(dm)
		.rows(['Acceleration']) // The fields to appear in y-axis
      	.columns(['Year']) // The fields to appear in x-axis
      	.width(900) // Set the chart width
      	.height(500) // Set the chart height
      	.mount('#chart-container') // Set the chart mount point
      	.done().then(()=>{createChart();});  
});