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

Remove jQuery from docs; addresses #139 and #238 #242

Open
wants to merge 1 commit into
base: gh-pages
Choose a base branch
from
Open

Remove jQuery from docs; addresses #139 and #238 #242

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.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions basic/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@ Each type of chart uses a specific (though often familiar) data format. Please r

**3. Initialize & Render the Plot**

Use the jQuery method `.epoch` to create, append, and draw the chart:
Use the appropriate Epoch method to create, append, and draw the chart:
```
var myChart = $('#myChart').epoch({ type: 'line', data: myData });
const myChart = new Epoch.Chart.Line({ el: '#myChart', data: myData });
```

**4. Update the Plot as Needed**
Expand Down Expand Up @@ -145,13 +145,13 @@ For the best results each layer should contain the same number of values, with t
d3 to make the best looking graphs possible. To create a single series plot simply include a single layer.

Given that you have data in the appropriate format, instantiating a new chart is fairly easy. Simply create a container
element in HTML and use the jQuery bindings to create, place, and draw the chart:
element in HTML and use one Epoch function to create, place, and draw the chart:

```html
<div id="areaChart" style="width: 800px; height: 200px"></div>
<script>
$('#areaChart').epoch({
type: 'area',
new Epoch.Chart.Area({
el: '#areaChart',
data: areaChartData
});
</script>
Expand Down Expand Up @@ -198,8 +198,8 @@ Next, let's take a look at the markup and scripting required to display our bar
```html
<div id="barChart" style="width: 300px; height: 100px"></div>
<script>
$('#barChart').epoch({
type: 'bar',
new Epoch.Chart.Bar({
el: '#barChart',
data: barChartData
});
</script>
Expand Down Expand Up @@ -279,8 +279,8 @@ Next let's take a look at how you would implement the chart with markup and scri
```html
<div id="lineChart" style="width: 700px; height: 250px"></div>
<script>
$('#lineChart').epoch({
type: 'line',
new Epoch.Chart.Line({
el: '#lineChart',
data: lineChartData
});
</script>
Expand Down Expand Up @@ -310,8 +310,8 @@ Once you have your data formatted correctly you can easly add a chart to your pa
```html
<div id="pie" style="width: 400px; height: 400px"></div>
<script>
$('#pie').epoch({
type: 'pie',
new Epoch.Chart.Pie({
el: '#pie',
data: pieData
});
</script>
Expand Down Expand Up @@ -391,8 +391,8 @@ Next, let's see the markup and scripting needed to add the plot to your page:
```html
<div id="scatter" style="width: 500px; height: 500px"></div>
<script>
$('#scatter').epoch({
type: 'scatter',
new Epoch.Chart.Scatter({
el: '#scatter',
data: scatterData
});
</script>
Expand Down
9 changes: 5 additions & 4 deletions getting-started/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ Building a chart using epoch is a snap and each type of chart follows the same b
{ label: 'Layer 1', values: [ {x: 0, y: 0}, {x: 1, y: 1}, {x: 2, y: 2} ] },
{ label: 'Layer 2', values: [ {x: 0, y: 0}, {x: 1, y: 1}, {x: 2, y: 4} ] }
];
$('#area').epoch({ type: 'area', data: data, axes: ['left', 'right', 'bottom'] });
new Epoch.Chart.Area({ el: '#area', data: data, axes: ['left', 'right', 'bottom'] });
})();

</script>
Expand Down Expand Up @@ -87,14 +87,14 @@ Each chart type expects a certain data format. For the most part they are very s
#### 3. Initialize, Place, and Draw

```javascript
var areaChartInstance = $('#area').epoch({
type: 'area',
const areaChartInstance = new Epoch.Chart.Area({
el: '#area',
data: data,
axes: ['left', 'right', 'bottom']
});
```

Use the custom jQuery method `.epoch` to create the chart. The method will automatically insert the chart as a direct child of the selected container (in this case the `div` with an id of `area`). After the elements have been placed the method will resize the chart to completely fill the container and draw the chart based on the data it was given.
Use the appropriate Epoch method to create the chart. The method will automatically insert the chart as a direct child of the selected container (in this case the `div` with an id of `area`). After the elements have been placed the method will resize the chart to completely fill the container and draw the chart based on the data it was given.

The `.epoch` function returns a chart class instance that can be used to interact with the chart post initialization. In the example above we keep a reference to the chart instance in the `areaChartInstance` variable. For basic charts, such at the area chart we created, this instance can be used to update the chart's data via the `update` method.

Expand All @@ -110,3 +110,4 @@ The method can be used in the following ways:
4. `.option(object)` - Sets key-value pairs in the given object as options for the chart

Note that all of the `key` strings can be hierarchical. For instance, you can use `.option('margins.left', 30)` to set the left margin, as opposed to having to use `.option({ margins: { left: 30 }})`.
---
38 changes: 19 additions & 19 deletions real-time/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ Every real-time chart has a name prefixed with `time.` and was built to use the
2. Fetch and format your data.
- Each type of chart uses a specific (though often familiar) data format.
- See the documentation below for how each chart is expecting the data.
3. Use the jQuery method `.epoch` to create, append, and draw the chart.
- `var myChart = $('#myChart').epoch({ type: 'time.line', data: myData });`
3. Use the appropriate Epoch method to create, append, and draw the chart.
- `const myChart = new Epoch.Time.Line({ el: '#myChart', data: myData });`
4. When you have a new data point to append to the chart, use the `.push` method:
- `myChart.push(nextDataPoint);`

Expand Down Expand Up @@ -60,10 +60,10 @@ Here is an example of how to dynamically switch styles via jQuery:
Epoch supports high resolution displays by automatically detecting and setting the appropriate pixel ratio for the canvas based real-time charts. You can override this behavior by explicitly setting the pixel ratio for any chart described below. Here's an example of how to do this:

```javascript
$('#my-chart').epoch({
type: 'time.line',
new Epoch.Time.Line({
el: '#myChart',
pixelRatio: 1
})
});
```

Note that the `pixelRatio` option must be an integer >= 1.
Expand Down Expand Up @@ -179,13 +179,13 @@ The real-time chart requires that values in each layer have the exact same numbe
entry have the same `time` value.

Given that you have data in the appropriate format, instantiating a new chart is fairly easy. Simply create a container
element in HTML and use the jQuery bindings to create, place, and draw the chart:
element in HTML and use one Epoch function to create, place, and draw the chart:

```html
<div id="areaChart" style="width: 800px; height: 200px"></div>
<script>
$('#areaChart').epoch({
type: 'time.area',
new Epoch.Time.Area({
el: '#areaChart',
data: areaChartData
});
</script>
Expand Down Expand Up @@ -222,13 +222,13 @@ The real-time chart requires that values in each layer have the exact same numbe
entry have the same `time` value.

Given that you have data in the appropriate format, instantiating a new chart is fairly easy. Simply create a container
element in HTML and use the jQuery bindings to create, place, and draw the chart:
element in HTML and use one Epoch function to create, place, and draw the chart:

```html
<div id="barChart" style="width: 800px; height: 200px"></div>
<script>
$('#barChart').epoch({
type: 'time.bar',
new Epoch.Time.Bar({
el: '#barChart',
data: barChartData
});
</script>
Expand Down Expand Up @@ -256,8 +256,8 @@ for the chart to render correctly. Let's take a look at how one might create a n
```html
<div id="gaugeChart" class="epoch gauge-small"></div>
<script>
$('#gaugeChart').epoch({
type: 'time.gauge',
new Epoch.Time.Gauge({
el: '#gaugeChart',
value: 0.5
});
</script>
Expand Down Expand Up @@ -356,13 +356,13 @@ As you can see the data is arranged as an array of layers. Each layer is an obje
- `histogram` - A "sparse" frequency hash that maps values to frequencies

Given that you have data in the appropriate format, instantiating a new chart is fairly easy. Simply create a container
element in HTML and use the jQuery bindings to create, place, and draw the chart:
element in HTML and use one Epoch function to create, place, and draw the chart:

```html
<div id="heatmapChart" style="width: 800px; height: 200px"></div>
<script>
$('#heatmapChart').epoch({
type: 'time.heatmap',
new Epoch.Time.Heatmap({
el: '#heatmapChart',
data: heatmapData
});
</script>
Expand Down Expand Up @@ -449,13 +449,13 @@ The real-time chart requires that values in each layer have the exact same numbe
entry have the same `time` value.

Given that you have data in the appropriate format, instantiating a new chart is fairly easy. Simply create a container
element in HTML and use the jQuery bindings to create, place, and draw the chart:
element in HTML and use one Epoch function to create, place, and draw the chart:

```html
<div id="lineChart" style="width: 800px; height: 200px"></div>
<script>
$('#lineChart').epoch({
type: 'time.line',
new Epoch.Time.Line({
el: '#lineChart',
data: lineChartData
});
</script>
Expand Down