Custom Chart - Multiseries Line 2D (msline) - Fusion Chart Format?

How do I do X?
1

I have a data-set coming in from an SQL source. I’ve figured out the javascript mapping but I can’t seem to get any output on my custom graph.

I have user access counts by date and by user. I’d like date to be the x-axis and count to be the y-axis where each user is a series.

This is the format I’m trying to follow as per Fusion Chart’s Docs.

I have the following code which seems to produce a format similar to Fusion’s docs.

Any idea what’s wrong?

{"type":"msline",
"datasource":{"chart":{},
"categories":[{"category":
{{
function(){
	const dates = {};
	User_Access_By_Date.data.map((row) => {
		dates[row.action_date] = 1;
	})
	return Object.keys(dates).map((key) => {
		return {"label":key}
	});
}()}}}],
"dataset":
{{
function(){
  const aggregateMap = {
  };
	User_Access_By_Date.data.map((row) => {
    aggregateMap[row.email] = aggregateMap[row.email] ? aggregateMap[row.email].concat([{"value":row.count}]) : [{"value":row.count}];
  });
  return Object.keys(aggregateMap).map((key) => {
    return {
      "seriesname": key,
      "data": aggregateMap[key]
    }
  })
}()
}}
}}

Here’s what the error box says it produces (again, seems to look correct?). It doesn’t line up with the expected format, but that expected format isn’t how Fusion says to format a multi-series chart. I’ve abbreviated this for readability.

{"type":"msline",
"datasource":{"chart":{},
"categories":[{"category":
[
  {
    "label": "2022-04-18"
  },
  {
    "label": "2022-04-19"
  },
  {
    "label": "2022-04-20"
  },
  {
    "label": "2022-04-21"
  },
  {
    "label": "2022-04-22"
  },
  {
    "label": "2022-04-23"
  },
  {
    "label": "2022-04-24"
  }
]}],
"dataset":
[
  {
    "seriesname": "askidmore@fake.com",
    "data": [
      {
        "value": 0
      },
      {
        "value": 12
      },
      {
        "value": 0
      },
      {
        "value": 1
      },
      {
        "value": 0
      },
      {
        "value": 0
      },
      {
        "value": 0
      }
    ]
  },
  {
    "seriesname": "benjamin@fake.com",
    "data": [
      {
        "value": 4
      },
      {
        "value": 47
      },
      {
        "value": 22
      },
      {
        "value": 17
      },
      {
        "value": 25
      },
      {
        "value": 20
      },
      {
        "value": 15
      }
    ]
  },
  {
    "seriesname": "bryan@fake.com",
    "data": [
      {
        "value": 14
      },
      {
        "value": 82
      },
      {
        "value": 15
      },
      {
        "value": 117
      },
      {
        "value": 33
      },
      {
        "value": 0
      },
      {
        "value": 10
      },
      ]
   }
]
}}
2

Update: “datasource” must be camelcase to work “dataSource”.

Also, and I’m not sure if this is required, but the data values have to be strings possibly? So I changed all of the “row.count” to “row.count.toString()”

Those made it work.

1 Like