Importing MapD Charting in Web Framework

Programming & Data Ecosystem Tools JavaScript
#1

I am having a lot of trouble trying to setup mapd charting with Vue.js. I am trying to import in mapdc, like they do in the react tweetmap project from the github repository.

import * as dc from "mapd-charting";

after installing mapd-charting through the npm https://www.npmjs.com/package/mapd-charting

Here is the error that it is giving me.

 error  in ./node_modules/@mapd/mapdc/src/index.js

Module parse failed: Unexpected token (11:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

export * as d3 from “d3” // eslint-disable-line
| export * from “./core/core”
| export * from “./core/core-async”

I see that this was also a github issue posted 6 months back but never resolved. If anyone has any idea how to fix this issue or knows how to import and use MapD charting properly, I would greatly appreciate it.

#2

@Dominic, could you please try this as a workaround for importing, and see if it works for your build system?

import dc from 'mapd-charting/dist/mapdc';
#3

Hey there, this fixed this first problem with importing, however dc seems to just be an empty object when I try to use it. When I try to call its methods they just don’t exist.

var dcBarChart = dc.rowChart('.chart1-example')

// The error message
TypeError: mapd_charting_dist_mapdc__WEBPACK_IMPORTED_MODULE_2___default.a.rowChart is not a function
#4

If it helps at all, the suggestion that you made resolved all of the issues that I was having for mapd-crossfilter

1 Like
#5

@Dominic,

thanks for the feedback; it will be probably useful for other users, so I want to give you a big thank for yyou contribution :wink:

#6

Very useful information for my work, thanks! :+1: