Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adds xtitle & ytitle options #48

Merged
merged 1 commit into from Sep 1, 2015
Merged

Adds xtitle & ytitle options #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 6 additions & 0 deletions README.md
View file
Open in desktop
Expand Up @@ -93,6 +93,12 @@ new Chartkick.LineChart("chart-1", data, {"min": 1000, "max": 5000});

`min` defaults to 0 for charts with non-negative values. Use `null` to let the charting library decide.

Axis titles

```javascript
new Chartkick.LineChart("chart-1", data, {"xtitle": "Horizontal", "ytitle": "Vertical"});
```

Colors

```javascript
Expand Down
36 changes: 30 additions & 6 deletions chartkick.js
View file
Open in desktop
Expand Up @@ -101,26 +101,26 @@
return false;
}

function jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax, setStacked) {
function jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax, setStacked, setXtitle, setYtitle) {
return function (series, opts, chartOptions) {
var options = merge({}, defaultOptions);
options = merge(options, chartOptions || {});

// hide legend
// this is *not* an external option!
if (opts.hideLegend) {
if (hideLegend) {
hideLegend(options);
}

// min
if ("min" in opts) {
if (opts.min) {
setMin(options, opts.min);
} else if (!negativeValues(series)) {
setMin(options, 0);
}

// max
if ("max" in opts) {
if (opts.max) {
setMax(options, opts.max);
}

Expand All @@ -132,6 +132,14 @@
options.colors = opts.colors;
}

if (opts.xtitle) {
setXtitle(options, opts.xtitle);
}

if (opts.ytitle) {
setYtitle(options, opts.ytitle);
}

// merge library last
options = merge(options, opts.library || {});

Expand Down Expand Up @@ -290,7 +298,15 @@
options.plotOptions.series.stacking = "normal";
};

var jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax, setStacked);
var setXtitle = function (options, title) {
options.xAxis = {title: {text: title}};
};

var setYtitle = function (options, title) {
options.yAxis = {title: {text: title}};
};

var jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax, setStacked, setXtitle, setYtitle);

this.renderLineChart = function (chart, chartType) {
chartType = chartType || "spline";
Expand Down Expand Up @@ -511,7 +527,15 @@
options.isStacked = true;
};

var jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax, setStacked);
var setXtitle = function (options, title) {
options.hAxis = {title: title};
}

var setYtitle = function (options, title) {
options.vAxis = {title: title};
};

var jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax, setStacked, setXtitle, setYtitle);

// cant use object as key
var createDataTable = function (series, columnType) {
Expand Down
6 changes: 6 additions & 0 deletions examples/index.html
View file
Open in desktop
Expand Up @@ -148,6 +148,12 @@ <h1>Min Null</h1>
new Chartkick.LineChart("chart-202", {"2013-02-10 00:00:00 -0800":200,"2013-02-11 00:00:00 -0800":206,"2013-02-12 00:00:00 -0800":203,"2013-02-13 00:00:00 -0800":202,"2013-02-14 00:00:00 -0800":205,"2013-02-15 00:00:00 -0800":203}, {"min": null});
</script>

<h1>Axis titles</h1>
<div id="chart-axis-titles" style="height: 300px;"></div>
<script>
new Chartkick.LineChart("chart-axis-titles", {"2013-02-10 00:00:00 -0800":200,"2013-02-11 00:00:00 -0800":206,"2013-02-12 00:00:00 -0800":203,"2013-02-13 00:00:00 -0800":202,"2013-02-14 00:00:00 -0800":205,"2013-02-15 00:00:00 -0800":203}, {"xtitle": "Horizontal", "ytitle": "Vertical"});
</script>

<h1>Colors</h1>
<div id="chart-204" style="height: 300px;"></div>
<script>
Expand Down