1

I'm trying to add Chartkick to an application that uses Mithril.

How would I convert the code below to be used with Mithril?

<h1>Line Chart</h1>
<div id="line" style="height: 300px;"></div>
<script>
  new Chartkick.LineChart("chart-1", "/stocks")
</script>

The Mithril page:

import m from 'mithril';
import _ from 'underscore';
import h from '../h';
import projectShareBox from './project-share-box';
import facebookButton from './facebook-button';
import addressTag from './address-tag';
import categoryTag from './category-tag';

const projectHighlight = {
    controller() {
        return {
            displayShareBox: h.toggleProp(false, true)
        };
    },
    view(ctrl, args) {
        const project = args.project;

        return m('#project-highlight', [
            m('.w-row.u-marginbottom-60', [
                m('.w-col.w-col-12.u-text-center', {
                    style: {
                        'min-height': '300px'
                    }
                }
            ]),

1 Answers1

1

You'll want to use the oncreate vnode lifecycle hook.

Here's an example:

m.mount(document.body, {
    view() {
        return m(".chart", {
            oncreate(vnode) {
                vnode.state.chart = new Chartkick.LineChart(
                    vnode.dom,
                    {
                        one : 1,
                        two : 2,
                        three : 3
                    }
                );
            }
        });
    }
});

Working example of that code: https://jsbin.com/gogucuv/2/edit?html,js,output

Tivac
  • 2,553
  • 18
  • 21
  • Thanks Tivac! The link doesn't seem to be working due to a "502 Bad Gateway" error, so I'll try to view it later. –  Jul 03 '17 at 16:54
  • tried by including both the scripts in the application template and the Minthrill, but the .chart div is blank. Do you have any suggestions on why this may be happening? –  Jul 03 '17 at 20:39
  • 1
    Ask in the mithril gitter room and someone should be able to help! – Tivac Jul 04 '17 at 05:39