Skip to content

Instantly share code, notes, and snippets.

@yutannihilation

yutannihilation/sequence.md

Last active August 29, 2015 14:13
Show Gist options
  • Save yutannihilation/257204fc6ac32fac1161 to your computer and use it in GitHub Desktop.
Save yutannihilation/257204fc6ac32fac1161 to your computer and use it in GitHub Desktop.
Download ZIP
Sequence of Chartist.js's Pie()
Raw
sequence.md

Bar

var data = {series:[[1,2,3,4,5]], labels:[1,2,3,4,5]}
var seq = 0;
var chart = new Chartist.Bar('.ct-chart', data)
chart.on("draw", function(x){console.log(x);});
chart.update()
Object { container: <div#example-gallery-one.ct-chart.ct-golden-section>, data: Object, options: Object, responsiveOptions: undefined, eventEmitter: Object, supportsForeignObject: true, supportsAnimations: true, resizeListener: function (), initializeTimeoutId: 33288 }
Object { type: "grid", axis: "x", index: 0, group: Object, element: Object, x1: 45, x2: 45, y1: 5, y2: 271 }
Object { type: "label", axis: Object, index: 0, group: Object, element: Object, text: 1, x: 45, y: 276, width: 89.2, height: 30 }
Object { type: "grid", axis: "x", index: 1, group: Object, element: Object, x1: 134.2, x2: 134.2, y1: 5, y2: 271 }
Object { type: "label", axis: Object, index: 1, group: Object, element: Object, text: 2, x: 134.2, y: 276, width: 89.2, height: 30 }
Object { type: "grid", axis: "x", index: 2, group: Object, element: Object, x1: 223.4, x2: 223.4, y1: 5, y2: 271 }
Object { type: "label", axis: Object, index: 2, group: Object, element: Object, text: 3, x: 223.4, y: 276, width: 89.2, height: 30 }
Object { type: "grid", axis: "x", index: 3, group: Object, element: Object, x1: 312.6, x2: 312.6, y1: 5, y2: 271 }
Object { type: "label", axis: Object, index: 3, group: Object, element: Object, text: 4, x: 312.6, y: 276, width: 89.2, height: 30 }
Object { type: "grid", axis: "x", index: 4, group: Object, element: Object, x1: 401.8, x2: 401.8, y1: 5, y2: 271 }
Object { type: "label", axis: Object, index: 4, group: Object, element: Object, text: 5, x: 401.8, y: 276, width: 89.2, height: 30 }
Object { type: "grid", axis: "y", index: 0, group: Object, element: Object, y1: 271, y2: 271, x1: 45, x2: 491 }
Object { type: "label", axis: Object, index: 0, group: Object, element: Object, text: 0, y: 256, x: -5, height: 26.6, width: 40 }
Object { type: "grid", axis: "y", index: 1, group: Object, element: Object, y1: 246.8181818181818, y2: 246.8181818181818, x1: 45, x2: 491 }
Object { type: "label", axis: Object, index: 1, group: Object, element: Object, text: 0.5, y: 231.8181818181818, x: -5, height: 26.6, width: 40 }
Object { type: "grid", axis: "y", index: 2, group: Object, element: Object, y1: 222.63636363636363, y2: 222.63636363636363, x1: 45, x2: 491 }
Object { type: "label", axis: Object, index: 2, group: Object, element: Object, text: 1, y: 207.63636363636363, x: -5, height: 26.6, width: 40 }
Object { type: "grid", axis: "y", index: 3, group: Object, element: Object, y1: 198.45454545454544, y2: 198.45454545454544, x1: 45, x2: 491 }
Object { type: "label", axis: Object, index: 3, group: Object, element: Object, text: 1.5, y: 183.45454545454544, x: -5, height: 26.6, width: 40 }
Object { type: "grid", axis: "y", index: 4, group: Object, element: Object, y1: 174.27272727272725, y2: 174.27272727272725, x1: 45, x2: 491 }
Object { type: "label", axis: Object, index: 4, group: Object, element: Object, text: 2, y: 159.27272727272725, x: -5, height: 26.6, width: 40 }
Object { type: "grid", axis: "y", index: 5, group: Object, element: Object, y1: 150.0909090909091, y2: 150.0909090909091, x1: 45, x2: 491 }
Object { type: "label", axis: Object, index: 5, group: Object, element: Object, text: 2.5, y: 135.0909090909091, x: -5, height: 26.6, width: 40 }
Object { type: "grid", axis: "y", index: 6, group: Object, element: Object, y1: 125.9090909090909, y2: 125.9090909090909, x1: 45, x2: 491 }
Object { type: "label", axis: Object, index: 6, group: Object, element: Object, text: 3, y: 110.9090909090909, x: -5, height: 26.6, width: 40 }
Object { type: "grid", axis: "y", index: 7, group: Object, element: Object, y1: 101.72727272727272, y2: 101.72727272727272, x1: 45, x2: 491 }
Object { type: "label", axis: Object, index: 7, group: Object, element: Object, text: 3.5, y: 86.72727272727272, x: -5, height: 26.6, width: 40 }
Object { type: "grid", axis: "y", index: 8, group: Object, element: Object, y1: 77.54545454545453, y2: 77.54545454545453, x1: 45, x2: 491 }
Object { type: "label", axis: Object, index: 8, group: Object, element: Object, text: 4, y: 62.54545454545453, x: -5, height: 26.6, width: 40 }
Object { type: "grid", axis: "y", index: 9, group: Object, element: Object, y1: 53.363636363636374, y2: 53.363636363636374, x1: 45, x2: 491 }
Object { type: "label", axis: Object, index: 9, group: Object, element: Object, text: 4.5, y: 38.363636363636374, x: -5, height: 26.6, width: 40 }
Object { type: "grid", axis: "y", index: 10, group: Object, element: Object, y1: 29.181818181818187, y2: 29.181818181818187, x1: 45, x2: 491 }
Object { type: "label", axis: Object, index: 10, group: Object, element: Object, text: 5, y: 14.181818181818187, x: -5, height: 26.6, width: 40 }
Object { type: "bar", value: 1, index: 0, chartRect: Object, group: Object, element: Object, x1: 89.6, x2: 89.6, y1: 271, y2: 222.63636363636363 }
Object { type: "bar", value: 2, index: 1, chartRect: Object, group: Object, element: Object, x1: 178.79999999999998, x2: 178.79999999999998, y1: 271, y2: 174.27272727272725 }
Object { type: "bar", value: 3, index: 2, chartRect: Object, group: Object, element: Object, x1: 268, x2: 268, y1: 271, y2: 125.9090909090909 }
Object { type: "bar", value: 4, index: 3, chartRect: Object, group: Object, element: Object, x1: 357.20000000000005, x2: 357.20000000000005, y1: 271, y2: 77.54545454545453 }
Object { type: "bar", value: 5, index: 4, chartRect: Object, group: Object, element: Object, x1: 446.40000000000003, x2: 446.40000000000003, y1: 271, y2: 29.181818181818187 }
Object { type: "grid", axis: "x", index: 0, group: Object, element: Object, x1: 45, x2: 45, y1: 5, y2: 314 }
Object { type: "label", axis: Object, index: 0, group: Object, element: Object, text: 1, x: 45, y: 319, width: 103, height: 30 }
Object { type: "grid", axis: "x", index: 1, group: Object, element: Object, x1: 148, x2: 148, y1: 5, y2: 314 }
Object { type: "label", axis: Object, index: 1, group: Object, element: Object, text: 2, x: 148, y: 319, width: 103, height: 30 }
Object { type: "grid", axis: "x", index: 2, group: Object, element: Object, x1: 251, x2: 251, y1: 5, y2: 314 }
Object { type: "label", axis: Object, index: 2, group: Object, element: Object, text: 3, x: 251, y: 319, width: 103, height: 30 }
Object { type: "grid", axis: "x", index: 3, group: Object, element: Object, x1: 354, x2: 354, y1: 5, y2: 314 }
Object { type: "label", axis: Object, index: 3, group: Object, element: Object, text: 4, x: 354, y: 319, width: 103, height: 30 }
Object { type: "grid", axis: "x", index: 4, group: Object, element: Object, x1: 457, x2: 457, y1: 5, y2: 314 }
Object { type: "label", axis: Object, index: 4, group: Object, element: Object, text: 5, x: 457, y: 319, width: 103, height: 30 }
Object { type: "grid", axis: "y", index: 0, group: Object, element: Object, y1: 314, y2: 314, x1: 45, x2: 560 }
Object { type: "label", axis: Object, index: 0, group: Object, element: Object, text: 0, y: 299, x: -5, height: 30.900000000000002, width: 40 }
Object { type: "grid", axis: "y", index: 1, group: Object, element: Object, y1: 285.90909090909093, y2: 285.90909090909093, x1: 45, x2: 560 }
Object { type: "label", axis: Object, index: 1, group: Object, element: Object, text: 0.5, y: 270.90909090909093, x: -5, height: 30.900000000000002, width: 40 }
Object { type: "grid", axis: "y", index: 2, group: Object, element: Object, y1: 257.8181818181818, y2: 257.8181818181818, x1: 45, x2: 560 }
Object { type: "label", axis: Object, index: 2, group: Object, element: Object, text: 1, y: 242.8181818181818, x: -5, height: 30.900000000000002, width: 40 }
Object { type: "grid", axis: "y", index: 3, group: Object, element: Object, y1: 229.72727272727275, y2: 229.72727272727275, x1: 45, x2: 560 }
Object { type: "label", axis: Object, index: 3, group: Object, element: Object, text: 1.5, y: 214.72727272727275, x: -5, height: 30.900000000000002, width: 40 }
Object { type: "grid", axis: "y", index: 4, group: Object, element: Object, y1: 201.63636363636363, y2: 201.63636363636363, x1: 45, x2: 560 }
Object { type: "label", axis: Object, index: 4, group: Object, element: Object, text: 2, y: 186.63636363636363, x: -5, height: 30.900000000000002, width: 40 }
Object { type: "grid", axis: "y", index: 5, group: Object, element: Object, y1: 173.54545454545453, y2: 173.54545454545453, x1: 45, x2: 560 }
Object { type: "label", axis: Object, index: 5, group: Object, element: Object, text: 2.5, y: 158.54545454545453, x: -5, height: 30.900000000000002, width: 40 }
Object { type: "grid", axis: "y", index: 6, group: Object, element: Object, y1: 145.45454545454547, y2: 145.45454545454547, x1: 45, x2: 560 }
Object { type: "label", axis: Object, index: 6, group: Object, element: Object, text: 3, y: 130.45454545454547, x: -5, height: 30.900000000000002, width: 40 }
Object { type: "grid", axis: "y", index: 7, group: Object, element: Object, y1: 117.36363636363637, y2: 117.36363636363637, x1: 45, x2: 560 }
Object { type: "label", axis: Object, index: 7, group: Object, element: Object, text: 3.5, y: 102.36363636363637, x: -5, height: 30.900000000000002, width: 40 }
Object { type: "grid", axis: "y", index: 8, group: Object, element: Object, y1: 89.27272727272728, y2: 89.27272727272728, x1: 45, x2: 560 }
Object { type: "label", axis: Object, index: 8, group: Object, element: Object, text: 4, y: 74.27272727272728, x: -5, height: 30.900000000000002, width: 40 }
Object { type: "grid", axis: "y", index: 9, group: Object, element: Object, y1: 61.18181818181819, y2: 61.18181818181819, x1: 45, x2: 560 }
Object { type: "label", axis: Object, index: 9, group: Object, element: Object, text: 4.5, y: 46.18181818181819, x: -5, height: 30.900000000000002, width: 40 }
Object { type: "grid", axis: "y", index: 10, group: Object, element: Object, y1: 33.090909090909065, y2: 33.090909090909065, x1: 45, x2: 560 }
Object { type: "label", axis: Object, index: 10, group: Object, element: Object, text: 5, y: 18.090909090909065, x: -5, height: 30.900000000000002, width: 40 }
Object { type: "bar", value: 1, index: 0, chartRect: Object, group: Object, element: Object, x1: 96.5, x2: 96.5, y1: 314, y2: 257.8181818181818 }
Object { type: "bar", value: 2, index: 1, chartRect: Object, group: Object, element: Object, x1: 199.5, x2: 199.5, y1: 314, y2: 201.63636363636363 }
Object { type: "bar", value: 3, index: 2, chartRect: Object, group: Object, element: Object, x1: 302.5, x2: 302.5, y1: 314, y2: 145.45454545454547 }
Object { type: "bar", value: 4, index: 3, chartRect: Object, group: Object, element: Object, x1: 405.5, x2: 405.5, y1: 314, y2: 89.27272727272728 }
Object { type: "bar", value: 5, index: 4, chartRect: Object, group: Object, element: Object, x1: 508.5, x2: 508.5, y1: 314, y2: 33.090909090909065 }

Line

var data = {series:[[1,2,3,4,5]], labels:[1,2,3,4,5]}
var seq = 0;
var chart = new Chartist.Line('.ct-chart', data)
chart.on("draw", function(x){console.log(x);});
chart.update()
Object { container: <div#example-gallery-one.ct-chart.ct-golden-section>, data: Object, options: Object, responsiveOptions: undefined, eventEmitter: Object, supportsForeignObject: true, supportsAnimations: true, resizeListener: function (), initializeTimeoutId: 35252 }
Object { type: "grid", axis: "x", index: 0, group: Object, element: Object, x1: 45, x2: 45, y1: 5, y2: 314 }
Object { type: "label", axis: Object, index: 0, group: Object, element: Object, text: 1, x: 45, y: 319, width: 103, height: 30 }
Object { type: "grid", axis: "x", index: 1, group: Object, element: Object, x1: 148, x2: 148, y1: 5, y2: 314 }
Object { type: "label", axis: Object, index: 1, group: Object, element: Object, text: 2, x: 148, y: 319, width: 103, height: 30 }
Object { type: "grid", axis: "x", index: 2, group: Object, element: Object, x1: 251, x2: 251, y1: 5, y2: 314 }
Object { type: "label", axis: Object, index: 2, group: Object, element: Object, text: 3, x: 251, y: 319, width: 103, height: 30 }
Object { type: "grid", axis: "x", index: 3, group: Object, element: Object, x1: 354, x2: 354, y1: 5, y2: 314 }
Object { type: "label", axis: Object, index: 3, group: Object, element: Object, text: 4, x: 354, y: 319, width: 103, height: 30 }
Object { type: "grid", axis: "x", index: 4, group: Object, element: Object, x1: 457, x2: 457, y1: 5, y2: 314 }
Object { type: "label", axis: Object, index: 4, group: Object, element: Object, text: 5, x: 457, y: 319, width: 103, height: 30 }
Object { type: "grid", axis: "y", index: 0, group: Object, element: Object, y1: 314, y2: 314, x1: 45, x2: 560 }
Object { type: "label", axis: Object, index: 0, group: Object, element: Object, text: 1, y: 299, x: -5, height: 38.625, width: 40 }
Object { type: "grid", axis: "y", index: 1, group: Object, element: Object, y1: 279.6666666666667, y2: 279.6666666666667, x1: 45, x2: 560 }
Object { type: "label", axis: Object, index: 1, group: Object, element: Object, text: 1.5, y: 264.6666666666667, x: -5, height: 38.625, width: 40 }
Object { type: "grid", axis: "y", index: 2, group: Object, element: Object, y1: 245.33333333333331, y2: 245.33333333333331, x1: 45, x2: 560 }
Object { type: "label", axis: Object, index: 2, group: Object, element: Object, text: 2, y: 230.33333333333331, x: -5, height: 38.625, width: 40 }
Object { type: "grid", axis: "y", index: 3, group: Object, element: Object, y1: 211, y2: 211, x1: 45, x2: 560 }
Object { type: "label", axis: Object, index: 3, group: Object, element: Object, text: 2.5, y: 196, x: -5, height: 38.625, width: 40 }
Object { type: "grid", axis: "y", index: 4, group: Object, element: Object, y1: 176.66666666666666, y2: 176.66666666666666, x1: 45, x2: 560 }
Object { type: "label", axis: Object, index: 4, group: Object, element: Object, text: 3, y: 161.66666666666666, x: -5, height: 38.625, width: 40 }
Object { type: "grid", axis: "y", index: 5, group: Object, element: Object, y1: 142.33333333333334, y2: 142.33333333333334, x1: 45, x2: 560 }
Object { type: "label", axis: Object, index: 5, group: Object, element: Object, text: 3.5, y: 127.33333333333334, x: -5, height: 38.625, width: 40 }
Object { type: "grid", axis: "y", index: 6, group: Object, element: Object, y1: 108, y2: 108, x1: 45, x2: 560 }
Object { type: "label", axis: Object, index: 6, group: Object, element: Object, text: 4, y: 93, x: -5, height: 38.625, width: 40 }
Object { type: "grid", axis: "y", index: 7, group: Object, element: Object, y1: 73.66666666666666, y2: 73.66666666666666, x1: 45, x2: 560 }
Object { type: "label", axis: Object, index: 7, group: Object, element: Object, text: 4.5, y: 58.66666666666666, x: -5, height: 38.625, width: 40 }
Object { type: "grid", axis: "y", index: 8, group: Object, element: Object, y1: 39.333333333333314, y2: 39.333333333333314, x1: 45, x2: 560 }
Object { type: "label", axis: Object, index: 8, group: Object, element: Object, text: 5, y: 24.333333333333314, x: -5, height: 38.625, width: 40 }
Object { type: "point", value: 1, index: 0, group: Object, element: Object, x: 45, y: 314 }
Object { type: "point", value: 2, index: 1, group: Object, element: Object, x: 148, y: 245.33333333333331 }
Object { type: "point", value: 3, index: 2, group: Object, element: Object, x: 251, y: 176.66666666666666 }
Object { type: "point", value: 4, index: 3, group: Object, element: Object, x: 354, y: 108 }
Object { type: "point", value: 5, index: 4, group: Object, element: Object, x: 457, y: 39.333333333333314 }
Object { type: "line", values: Array[5], path: Object, chartRect: Object, index: 0, group: Object, element: Object }

Pie

var data = {series:[1,2,3,4,5], labels:[1,2,3,4,5]}
var seq = 0;
var chart = new Chartist.Pie('.ct-chart', data)
chart.on("draw", function(x){console.log(x);});
chart.update()
Object {type: "slice", value: 1, totalDataSum: 15, index: 0, group: f…}
Object {type: "label", index: 0, group: f, element: f, text: "1"…}
Object {type: "slice", value: 2, totalDataSum: 15, index: 1, group: f…}
Object {type: "label", index: 1, group: f, element: f, text: "2"…}
Object {type: "slice", value: 3, totalDataSum: 15, index: 2, group: f…}
Object {type: "label", index: 2, group: f, element: f, text: "3"…}
Object {type: "slice", value: 4, totalDataSum: 15, index: 3, group: f…}
Object {type: "label", index: 3, group: f, element: f, text: "4"…}
Object {type: "slice", value: 5, totalDataSum: 15, index: 4, group: f…}
Object {type: "label", index: 4, group: f, element: f, text: "5"…}
f {container: div#htmlwidget-6287.chartist.ct-chart.ct-perfect-fourth.html-widget-static-bound, data: Object, options: Object, responsiveOptions: undefined, eventEmitter: Object…}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment