csbun / gitbook-plugin-chart Goto Github PK

View Code? Open in Web Editor NEW

11.0 11.0 3.0 240 KB

Using C3.js or Highcharts chart library in Gitbook.

License: MIT License

JavaScript 91.28% HTML 8.72%

chart gitbook

gitbook-plugin-chart's Introduction

gitbook-plugin-chart's People

Contributors

Stargazers

Watchers

Forkers

jpreynat nrekretep bcopy

gitbook-plugin-chart's Issues

How to convert JS code to JSON

I had a doubt on how to convert data like 7 * 24 * 36e5 to proper JSON. I tried multiple techniques, but everything failed.

Here's the sample JS code for

/**
 * Add custom date formats
 */
Highcharts.dateFormats = {
    W: function (timestamp) {
        var date = new Date(timestamp),
            day = date.getUTCDay() === 0 ? 7 : date.getUTCDay(),
            dayNumber;
        date.setDate(date.getUTCDate() + 4 - day);
        dayNumber = Math.floor((date.getTime() - new Date(date.getUTCFullYear(), 0, 1, -6)) / 86400000);
        return 1 + Math.floor(dayNumber / 7);

    }
};

Highcharts.chart('container', {

    title: {
        text: 'Custom date format'
    },

    xAxis: {
        type: 'datetime',
        tickInterval: 7 * 24 * 36e5, // one week
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        pointInterval: 7 * 24 * 36e5,
        pointStart: Date.UTC(2013, 0, 7)

    }]

});

HighCharts

Hi,

I'm trying to workout how to create a plugin for GitBook. The documentation seem a little sparse.

Could you give me a few pointers as to how I could modify your example to use highcharts instead of C3?

Thanks

Any plans for adding Google Charts?

There's a lot of other charts (such as org charts) supported by google charts... any plans to add it?

C3 Tick text formatting

Hi, I'm trying to get an example from the C3 site to work in gitbook.

The basic things work fine, but as soon as I try to specify a custom format for the axis ticks, the whole chart disappears.

Do you know of a way to make it work in gitbook?

{% chart format="json" %}
{
"data": {
        "columns": [
            ["a", 0.97, 0.70],
            ["b", 0.80, 0.635]
        ],
        "type": "bar"
    },
    "axis" : {
      "x" : {
          "type" : "category",
          "categories": ["cat1", "cat2"]
      },
      "y": {
          "tick" : {
             // None of these work
              "format": "d3.format('.0%')"
              "format": d3.format(".0%")
              "format": "function(d) {return d+'%';}"
              "format": function(d) {return d+"%";}
          }
      }
    },
    "bar": {
        "width": {
            "ratio": 0.1 
        }
    }
}
{% endchart %}

Any plans for support chart data in code block.

such as:

```chart
{
    "data": {
        "type": "bar",
        "columns": [
            ["data1", 30, 200, 100, 400, 150, 1500, 2500],
            ["data2", 50, 100, 300, 450, 650, 250, 1320]
        ]
    },
    "axis": {
        "y": {
            "tick": {
                "format": d3.format("$,")
            }
        }
    }
}

Chart data in YAML format.

Hi,

I'm looking into forking your repo in order to use YAML in the Git Book markup as oppose to specifying the entire chart in its JSON format.

I would like to move the chart configs to separate templates and then provide only the chart data. e.g.

I was able to successfully create a block that looks like this:

{%% 
categories: [cars, trains, buses, planes, trams]
competition:
  comp1: [20, 8, 1, 2, 9]
  comp2: [5, 8, 1, 2, 9]
  comp3: [5, 8, 1, 2, 9]
  comp4: [8, 5, 1, 2, 9]
  comp5: [5, 8, 1, 2, 9]
  comp6: [9, 9, 1, 2, 9]
  comp7: [2, 5, 5, 5, 9]
  comp8: [5, 8, 1, 2, 9]
  comp9: [5, 5, 3, 3, 9]
  comp10: [8, 5, 1, 2, 9]
title: Today
ven: [1,2,3,4,20]
%%}

I then used js-yaml to parse the file into a JSON structure that looks like this.

{
    "id": "c1",
    "categories": ["cars", "trains", "buses", "planes", "trams"],
    "competition": {
        "comp1": [20, 8, 1, 2, 9],
        "comp2": [5, 8, 1, 2, 9],
        "comp3": [5, 8, 1, 2, 9],
        "comp4": [8, 5, 1, 2, 9],
        "comp5": [5, 8, 1, 2, 9],
        "comp6": [9, 9, 1, 2, 9],
        "comp7": [2, 5, 5, 5, 9],
        "comp8": [5, 8, 1, 2, 9],
        "comp9": [5, 5, 3, 3, 9],
        "comp10": [8, 5, 1, 2, 9]
    },
    "title": "Today",
    "ven": [1, 2, 3, 4, 20]
}

However, I'm a little stuck from this point onwards. I could do with a couple of pointers regarding the following:

Creating the Chart template
Adding the JSON data to the chart template
Rendering the template to the <div id="${id}"></div> tag in the page.

Is this something you provide a little guidance on ?

I was trying to use this plugin by adding it to book.json but with that it's not working.
After that I forked the repo and added forked version to book.json. Right now it works even without any change. Is npm version the same as version in github repo?

csbun / gitbook-plugin-chart Goto Github PK

gitbook-plugin-chart's Introduction

gitbook-plugin-chart's People

Contributors

Stargazers

Watchers

Forkers

gitbook-plugin-chart's Issues

How to convert JS code to JSON

HighCharts

Any plans for adding Google Charts?

C3 Tick text formatting

Any plans for support chart data in code block.

Chart data in YAML format.

npm/github install

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent