Trying to add the following into my React component from
<script src='js/addons/mg_line_brushing.js'></script>
<link rel='stylesheet' href='css/addons/mg_line_brushing.css' />
d3.json('data/fake_users2.json', function(data) {
for (var i = 0; i < data.length; i++) {
data[i] = MG.convert.date(data[i], 'date');
}
MG.data_graphic({
title: "Brushing Addon by Dan De Havilland",
description: "Drag the crosshair over the chart to zoom. For further details about this addon, take a look at its GitHub repo.",
data: data,
top: 70,
width: 600,
height: 240,
right: 40,
missing_is_hidden: true,
target: '#brushing'
});
});
where my React component class Dashboard.js:
import React from 'react';
import DocumentTitle from 'react-document-title';
export default class DashboardPage extends React.Component {
render() {
return (
<DocumentTitle title={'Dashboard'}>
<div className="container">
<div className="row">
<div className="col-xs-12">
<h3>Dashboard for data visualization</h3>
<hr />
</div>
</div>
</div>
</DocumentTitle>
);
}
}
Resulting in
This is my Dashboard component page:
"use strict";
import { Link } from 'react-router';
import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import Header from './Header';
import { LoginLink } from 'react-stormpath';
import DocumentTitle from 'react-document-title';
var d3 = require("d3");
var Chart = require('react-d3-core').Chart;
var LineChart = require('react-d3-basic').LineChart;
export default class DashboardPage extends React.Component {
componentDidMount() {
const jsCode = `
src="../../bower_components/mg-line-brushing/dist/mg_line_brushing.js";
`;
new Function(jsCode)();
{/*<link rel="stylesheet" href="../../bower_components/mg-line-brushing/dist/mg_line_brushing.css">*/}
d3.json('../../../data/fake_users2.json', function (data) {
for (var i = 0;i < data.length; i++) {
data[i] = MG.convert.date(data[i], 'date');
}
MG.data_graphic({
title: "30 min energy data by SebastianC",
description: "Drag the crosshair over the chart to zoom. For further details about this addon, take a look at its GitHub repo.",
data: data,
top: 70,
width: 600,
height: 240,
right: 40,
missing_is_hidden: true,
target: 'brushing'
});
});
}
render() {
return (
<DocumentTitle title={'Dashboard'}>
<div className="container">
<div className="row">
<div className="col-xs-12">
<h3>Dashboard for data visualization</h3>
<hr />
</div>
</div>
<div className="row">
<div className="col-xs-12">
<div id="chartdiv"></div>
<h1>Hello</h1>
</div>
</div>
</div>
</DocumentTitle>
);
}
}
Or we need https://egghead.io/lessons/react-using-react-s-jsx-to-dangerouslysetinnerhtml
Uncaught TypeError: Cannot read property ‘length’ of null